本文へ移動
cccskills
無料GitHub で公開

performance-profiling

Performance profiling principles. Measurement, analysis, and optimization techniques.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md3.0 KB
  • scripts/lighthouse_audit.py2.6 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Performance Profiling

Measure, analyze, optimize - in that order.

🔧 Runtime Scripts

Execute these for automated profiling:

ScriptPurposeUsage
scripts/lighthouse_audit.pyLighthouse performance auditpython scripts/lighthouse_audit.py https://example.com

1. Core Web Vitals

Targets

MetricGoodPoorMeasures
LCP< 2.5s> 4.0sLoading
INP< 200ms> 500msInteractivity
CLS< 0.1> 0.25Stability

When to Measure

StageTool
DevelopmentLocal Lighthouse
CI/CDLighthouse CI
ProductionRUM (Real User Monitoring)

2. Profiling Workflow

The 4-Step Process

1. BASELINE → Measure current state
2. IDENTIFY → Find the bottleneck
3. FIX → Make targeted change
4. VALIDATE → Confirm improvement

Profiling Tool Selection

ProblemTool
Page loadLighthouse
Bundle sizeBundle analyzer
RuntimeDevTools Performance
MemoryDevTools Memory
NetworkDevTools Network

3. Bundle Analysis

What to Look For

IssueIndicator
Large dependenciesTop of bundle
Duplicate codeMultiple chunks
Unused codeLow coverage
Missing splitsSingle large chunk

Optimization Actions

FindingAction
Big libraryImport specific modules
Duplicate depsDedupe, update versions
Route in mainCode split
Unused exportsTree shake

4. Runtime Profiling

Performance Tab Analysis

PatternMeaning
Long tasks (>50ms)UI blocking
Many small tasksPossible batching opportunity
Layout/paintRendering bottleneck
ScriptJavaScript execution

Memory Tab Analysis

PatternMeaning
Growing heapPossible leak
Large retainedCheck references
Detached DOMNot cleaned up

5. Common Bottlenecks

By Symptom

SymptomLikely Cause
Slow initial loadLarge JS, render blocking
Slow interactionsHeavy event handlers
Jank during scrollLayout thrashing
Growing memoryLeaks, retained refs

6. Quick Win Priorities

PriorityActionImpact
1Enable compressionHigh
2Lazy load imagesHigh
3Code split routesHigh
4Cache static assetsMedium
5Optimize imagesMedium

7. Anti-Patterns

❌ Don't✅ Do
Guess at problemsProfile first
Micro-optimizeFix biggest issue
Optimize earlyOptimize when needed
Ignore real usersUse RUM data

Remember: The fastest code is code that doesn't run. Remove before optimizing.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

2d-games

無料

2D game development principles. Sprites, tilemaps, physics, camera.

日本語の概要は準備中です。原文の説明を表示しています。

umairinayat/Specter-AI182026年9月29日 更新

3d-games

無料

3D game development principles. Rendering, shaders, physics, cameras.

日本語の概要は準備中です。原文の説明を表示しています。

umairinayat/Specter-AI182026年9月29日 更新

API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination.

日本語の概要は準備中です。原文の説明を表示しています。

umairinayat/Specter-AI182026年9月29日 更新

Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.

日本語の概要は準備中です。原文の説明を表示しています。

umairinayat/Specter-AI182026年9月29日 更新

Architectural decision-making framework. Requirements analysis, trade-off evaluation, ADR documentation. Use when making architecture decisions or analyzing system design.

日本語の概要は準備中です。原文の説明を表示しています。

umairinayat/Specter-AI182026年9月29日 更新

Bash/Linux terminal patterns. Critical commands, piping, error handling, scripting. Use when working on macOS or Linux systems.

日本語の概要は準備中です。原文の説明を表示しています。

umairinayat/Specter-AI182026年9月29日 更新

umairinayat のスキルをすべて見る

このスキルの問題を報告する