@@ -8,11 +8,11 @@ A curated collection of JavaScript snippets to measure and debug Web Performance
88
99## What you can measure
1010
11- | Category | What it includes |
12- | ----------| ------------------|
13- | ** Core Web Vitals** | LCP, CLS, INP - the metrics that impact SEO and user experience |
14- | ** Loading** | TTFB, resource hints, scripts, fonts, images, render-blocking resources |
15- | ** Interaction** | Long Animation Frames, event timing, responsiveness |
11+ | Category | What it includes |
12+ | ------------------- | ----------------------------------------------------------------------- |
13+ | ** Core Web Vitals** | LCP, CLS, INP - the metrics that impact SEO and user experience |
14+ | ** Loading** | TTFB, resource hints, scripts, fonts, images, render-blocking resources |
15+ | ** Interaction** | Long Animation Frames, event timing, responsiveness |
1616
1717## How to use
1818
@@ -73,27 +73,29 @@ This installs skills to `~/.claude/skills/` for use across any project.
7373
7474### Available Skills
7575
76- | Skill | Snippets | Description |
77- | -------| ----------| -------------|
78- | ` webperf ` | 47 | Main entry point for all web performance analysis |
79- | ` webperf-core-web-vitals ` | 7 | LCP, CLS, INP measurements with detailed breakdowns |
80- | ` webperf-loading ` | 28 | TTFB, FCP, script/font analysis, resource hints, service workers |
81- | ` webperf-interaction ` | 8 | Long tasks, animation frames, scroll jank, INP debugging |
82- | ` webperf-media ` | 3 | Image/video audits, lazy loading validation, SVG analysis |
83- | ` webperf-resources ` | 1 | Network bandwidth, connection quality, adaptive loading |
76+ | Skill | Snippets | Description |
77+ | ------------------------- | -------- | ---------------------------------------------------------------- |
78+ | ` webperf ` | 47 | Main entry point for all web performance analysis |
79+ | ` webperf-core-web-vitals ` | 7 | LCP, CLS, INP measurements with detailed breakdowns |
80+ | ` webperf-loading ` | 28 | TTFB, FCP, script/font analysis, resource hints, service workers |
81+ | ` webperf-interaction ` | 8 | Long tasks, animation frames, scroll jank, INP debugging |
82+ | ` webperf-media ` | 3 | Image/video audits, lazy loading validation, SVG analysis |
83+ | ` webperf-resources ` | 1 | Network bandwidth, connection quality, adaptive loading |
8484
8585### Intelligent Workflows & Decision Trees
8686
8787Skills include built-in workflows and decision trees that enable autonomous performance analysis:
8888
8989** Workflows** - Predefined sequences for common scenarios:
90+
9091- Complete loading audit (6 snippets)
9192- Server performance investigation (4 snippets)
9293- Font loading optimization (3 snippets)
9394- Script performance deep dive (6 snippets)
9495- And more...
9596
9697** Decision Trees** - Conditional logic based on results:
98+
9799- If TTFB > 600ms → automatically run TTFB-Sub-Parts.js
98100- If FCP > 1.8s → run render-blocking resource analysis
99101- If many third-party scripts detected → analyze timing and impact
@@ -137,3 +139,10 @@ Visit **[webperf-snippets.nucliweb.net](https://webperf-snippets.nucliweb.net)**
137139- [ Web Vitals] ( https://web.dev/articles/vitals ) - Learn about Core Web Vitals
138140- [ Chrome DevTools] ( https://developer.chrome.com/docs/devtools/ ) - Official documentation
139141
142+ ## Star History
143+
144+ <picture >
145+ <source media =" (prefers-color-scheme: dark) " srcset =" https://api.star-history.com/image?repos=nucliweb/webperf-snippets&type=date&theme=dark&legend=top-left " />
146+ <source media =" (prefers-color-scheme: light) " srcset =" https://api.star-history.com/image?repos=nucliweb/webperf-snippets&type=date&legend=top-left " />
147+ <img alt =" Star History Chart " src =" https://api.star-history.com/image?repos=nucliweb/webperf-snippets&type=date&legend=top-left " />
148+ </picture >
0 commit comments