performance-profiling
Lighthouse で Web パフォーマンスをプロファイリング
このスキルは、Lighthouse 監査とブラウザ開発者ツールを使用して、Web アプリケーションのパフォーマンスを測定・最適化するためのものです。ボトルネックを特定し、Core Web Vitals スコアを改善するための構造化されたワークフローを提供します。
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"performance-profiling" 사용 중입니다. Web サイトで Lighthouse 監査を実行する
예상 결과:
パフォーマンススコア：78/100
主な調査結果：
- LCP：2.8 秒（改善が必要）
- CLS：0.05（良好）
- INP：180ms（良好）
推奨事項：
1. レンダリングブロックリソースを排除する
2. 画像の適切なサイズ設定
3. JavaScript 実行時間を短縮する
"performance-profiling" 사용 중입니다. Core Web Vitals の閾値は何か？
예상 결과:
Core Web Vitals 閾値：
| メトリクス | 良好 | 不良 |
|-------|------|------|
| LCP | < 2.5 秒 | > 4.0 秒 |
| INP | < 200ms | > 500ms |
| CLS | < 0.1 | > 0.25 |
보안 감사
안전Evaluated 11 static security findings. All patterns detected are false positives. The subprocess.run call uses list arguments (not shell=True), preventing command injection. Temp file operations use the safe tempfile module. Documentation examples in SKILL.md are not executable code. The 'cryptographic algorithm' alerts were misidentified keywords. This is a legitimate performance profiling skill with no security concerns.
높은 위험 문제 (2)
중간 위험 문제 (2)
낮은 위험 문제 (1)
품질 점수
만들 수 있는 것
ロード速度を最適化するフロントエンド開発者
フロントエンド開発者が Web アプリの読み込みパフォーマンスを改善したい場合。このスキルを使用して Lighthouse 監査を実行し、主要なパフォーマンスボトルネックを特定して、ターゲットを絞った最適化を適用します。
CI パフォーマンスチェックを設定する DevOps エンジニア
DevOps エンジニアが CI/CD パイプラインに自動パフォーマンステストを追加したい場合。このスキルの Lighthouse スクリプトを使用して、各デプロイで監査を実行し、パフォーマンス閾値を下回るビルドを失敗させます。
ランタイムの問題をトラブルシュートするフルスタック開発者
フルスタック開発者が Web アプリで遅いインタラクションに気づいた場合。このスキルを使用してランタイムパフォーマンスをプロファイリングし、長時間タスクを特定し、DevTools の Memory タブでメモリリークを見つけます。
이 프롬프트를 사용해 보세요
performance-profiling スキルを使用して、https://example.com で Lighthouse パフォーマンス監査を実行してください。パフォーマンススコアと主な推奨事項を示してください。
performance-profiling スキルを使用して、Core Web Vitals（LCP、INP、CLS）が何を測定するものかを説明し、各メトリクスを改善するためのヒントを提供してください。
performance-profiling スキルを適用して、大規模な JavaScript バンドルを分析してください。どのような一般的な問題を探す必要があり、推奨される最適化アクションは何ですか？
performance-profiling スキルの 4 ステップのプロファイリングワークフロー（BASELINE、IDENTIFY、FIX、VALIDATE）を使用して、遅い Web アプリケーションの最適化を支援してください。ベースラインの確立から始めてください。
모범 사례
- 変更を加える前に、必ずパフォーマンスベースラインを確立する
- マイクロ最適化ではなく、最大のボトルネックから優先的に対処する
- 変動を考慮して、繰り返し測定により改善を検証する
피하기
- プロファイリングなしでパフォーマンス問題を推測する
- 実際のボトルネックを特定する前にコードを最適化する
- 合成テストのみを優先し、実際のユーザーデータを無視する