跳到正文
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(原文)

安装前可以查看交给 AI 代理的指令内容。

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.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

2d-games

免费

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

中文简介正在准备中。当前显示原文说明。

AxelMrak/ai52026年2月20日 更新

3d-games

免费

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

中文简介正在准备中。当前显示原文说明。

AxelMrak/ai52026年2月20日 更新

Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.

中文简介正在准备中。当前显示原文说明。

AxelMrak/ai52026年2月20日 更新

Structured guide for setting up A/B tests with mandatory gates for hypothesis, metrics, and execution readiness.

中文简介正在准备中。当前显示原文说明。

AxelMrak/ai52026年2月20日 更新

This skill should be used when the user asks to "attack Active Directory", "exploit AD", "Kerberoasting", "DCSync", "pass-the-hash", "BloodHound enumeration", "Golden Ticket", "Silver Ticket", "AS-REP roasting", "NTLM relay", or needs guidance on Windows domain penetration testing.

中文简介正在准备中。当前显示原文说明。

AxelMrak/ai52026年2月20日 更新

Use when you need to address review or issue comments on an open GitHub Pull Request using the gh CLI.

中文简介正在准备中。当前显示原文说明。

AxelMrak/ai52026年2月20日 更新

查看 AxelMrak 的全部技能

报告此技能的问题