performance-profiling
使用 Lighthouse 進行網頁效能分析
此技能協助開發人員使用 Lighthouse 稽核和瀏覽器開發者工具來測量和優化網頁應用程式效能。它提供結構化的工作流程來識別效能瓶頸並改善 Core Web Vitals 分數。
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"performance-profiling" 사용 중입니다. Run Lighthouse audit on my website
예상 결과:
Performance Score: 78/100
Key Findings:
- LCP: 2.8s (Needs improvement)
- CLS: 0.05 (Good)
- INP: 180ms (Good)
Recommendations:
1. Eliminate render-blocking resources
2. Properly size images
3. Reduce JavaScript execution time
"performance-profiling" 사용 중입니다. What are the Core Web Vitals thresholds?
예상 결과:
Core Web Vitals Thresholds:
| Metric | Good | Poor |
|-------|------|------|
| LCP | < 2.5s | > 4.0s |
| 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)
품질 점수
만들 수 있는 것
前端開發人員優化載入速度
前端開發人員想要改善其網頁應用程式的載入效能。他們使用此技能執行 Lighthouse 稽核、識別最大的效能瓶頸，並進行針對性的優化。
DevOps 工程師設定 CI 效能檢查
DevOps 工程師想要在 CI/CD 管道中加入自動化效能測試。他們使用此技能的 Lighthouse 指令碼在每次部署時執行稽核，並對低於效能閾值的建置失敗。
全端開發人員排查執行階段問題
全端開發人員發現其網頁應用程式上有緩慢的互動。他們使用此技能分析執行階段效能、識別長時間執行的任務，並使用 DevTools 記憶體標籤尋找記憶體洩漏。
이 프롬프트를 사용해 보세요
Run a Lighthouse performance audit on https://example.com using the performance-profiling skill. Show me the performance score and main recommendations.
Using the performance-profiling skill, explain what Core Web Vitals (LCP, INP, CLS) measure and provide tips for improving each metric.
Apply the performance-profiling skill to analyze a large JavaScript bundle. What common issues should I look for and what are the recommended optimization actions?
Using the 4-step profiling workflow from the performance-profiling skill (BASELINE, IDENTIFY, FIX, VALIDATE), help me optimize a slow web application. Start with establishing a baseline.
모범 사례
- 在進行變更之前務必建立效能基準
- 優先處理最大的瓶頸，而非微優化
- 使用重複測量來驗證改善成果，以考慮變異性
피하기
- 在未進行分析的情況下猜測效能問題
- 在識別出實際瓶頸之前優化程式碼
- 忽略真實使用者資料，只依賴合成測試