{"id":13428446,"url":"https://github.com/nucliweb/webperf-snippets","last_synced_at":"2026-03-18T01:12:56.256Z","repository":{"id":37639855,"uuid":"493156800","full_name":"nucliweb/webperf-snippets","owner":"nucliweb","description":"⚡️ 💾  Web Performance Snippets","archived":false,"fork":false,"pushed_at":"2026-03-13T20:15:15.000Z","size":1114,"stargazers_count":1417,"open_issues_count":2,"forks_count":79,"subscribers_count":22,"default_branch":"main","last_synced_at":"2026-03-14T08:28:01.519Z","etag":null,"topics":["performance","performance-analysis","performance-metrics","snippets","webperf","webperformance","webvitals"],"latest_commit_sha":null,"homepage":"https://webperf-snippets.nucliweb.net","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nucliweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-05-17T08:11:38.000Z","updated_at":"2026-03-13T20:15:18.000Z","dependencies_parsed_at":"2025-12-16T06:09:02.163Z","dependency_job_id":null,"html_url":"https://github.com/nucliweb/webperf-snippets","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/nucliweb/webperf-snippets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucliweb%2Fwebperf-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucliweb%2Fwebperf-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucliweb%2Fwebperf-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucliweb%2Fwebperf-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nucliweb","download_url":"https://codeload.github.com/nucliweb/webperf-snippets/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucliweb%2Fwebperf-snippets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30639152,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-18T00:09:27.587Z","status":"ssl_error","status_checked_at":"2026-03-18T00:09:26.123Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["performance","performance-analysis","performance-metrics","snippets","webperf","webperformance","webvitals"],"created_at":"2024-07-31T01:00:57.460Z","updated_at":"2026-03-18T01:12:56.249Z","avatar_url":"https://github.com/nucliweb.png","language":"JavaScript","readme":"# WebPerf Snippets\n\nA curated collection of JavaScript snippets to measure and debug Web Performance directly in your browser's DevTools console.\n\n[![Star History](https://img.shields.io/github/stars/nucliweb/webperf-snippets?style=social)](https://star-history.com/#nucliweb/webperf-snippets\u0026Date)\n\n![WebPerf Snippets](https://github.com/nucliweb/webperf-snippets/assets/1307927/f47f3049-34f5-407c-896a-d26a30ddf344)\n\n## What you can measure\n\n| Category            | What it includes                                                        |\n| ------------------- | ----------------------------------------------------------------------- |\n| **Core Web Vitals** | LCP, CLS, INP - the metrics that impact SEO and user experience         |\n| **Loading**         | TTFB, resource hints, scripts, fonts, images, render-blocking resources |\n| **Interaction**     | Long Animation Frames, event timing, responsiveness                     |\n\n## How to use\n\n### Option 1: Run in browser console\n\n1. Copy any snippet from [webperf-snippets.nucliweb.net](https://webperf-snippets.nucliweb.net)\n2. Open DevTools (`F12` or `Cmd+Option+I` / `Ctrl+Shift+I`)\n3. Go to the **Console** tab\n4. Paste and press `Enter`\n\n### Option 2: Save as DevTools Snippet\n\nSave frequently used snippets for quick access:\n\n1. Open DevTools → **Sources** tab → **Snippets** panel\n2. Click **+ New snippet**\n3. Name it (e.g., \"LCP\")\n4. Paste the code\n5. Right-click → **Run** (or `Cmd+Enter` / `Ctrl+Enter`)\n\n### Video tutorial\n\nhttps://github.com/nucliweb/webperf-snippets/assets/1307927/2987a2ca-3eef-4b73-8f6b-7b1e06b50040\n\n## Agent Skills for AI Coding Assistants\n\nWebPerf Snippets can be used as [Agent Skills](https://agentskills.io/) with AI coding assistants like Claude Code, Cursor, OpenCode, Gemini CLI, and more for automated performance analysis.\n\n### Installation\n\n**Option 1: Using skills CLI (recommended)**\n\n```bash\nnpx skills add nucliweb/webperf-snippets\n```\n\nInstalls directly from GitHub repository to `~/.claude/skills/`.\n\n**Option 2: Install locally (project-specific)**\n\n```bash\ngit clone https://github.com/nucliweb/webperf-snippets.git\ncd webperf-snippets\nnpm run install-skills\n```\n\nThis installs skills to `.claude/skills/` in your project directory.\n\n**Option 3: Install globally (for contributors)**\n\n```bash\ngit clone https://github.com/nucliweb/webperf-snippets.git\ncd webperf-snippets\nnpm run install-global\n```\n\nThis installs skills to `~/.claude/skills/` for use across any project.\n\n### Available Skills\n\n| Skill                     | Snippets | Description                                                      |\n| ------------------------- | -------- | ---------------------------------------------------------------- |\n| `webperf`                 | 47       | Main entry point for all web performance analysis                |\n| `webperf-core-web-vitals` | 7        | LCP, CLS, INP measurements with detailed breakdowns              |\n| `webperf-loading`         | 28       | TTFB, FCP, script/font analysis, resource hints, service workers |\n| `webperf-interaction`     | 8        | Long tasks, animation frames, scroll jank, INP debugging         |\n| `webperf-media`           | 3        | Image/video audits, lazy loading validation, SVG analysis        |\n| `webperf-resources`       | 1        | Network bandwidth, connection quality, adaptive loading          |\n\n### Intelligent Workflows \u0026 Decision Trees\n\nSkills include built-in workflows and decision trees that enable autonomous performance analysis:\n\n**Workflows** - Predefined sequences for common scenarios:\n\n- Complete loading audit (6 snippets)\n- Server performance investigation (4 snippets)\n- Font loading optimization (3 snippets)\n- Script performance deep dive (6 snippets)\n- And more...\n\n**Decision Trees** - Conditional logic based on results:\n\n- If TTFB \u003e 600ms → automatically run TTFB-Sub-Parts.js\n- If FCP \u003e 1.8s → run render-blocking resource analysis\n- If many third-party scripts detected → analyze timing and impact\n- And 15+ more intelligent triggers\n\nExample interaction:\n\n```\nUser: \"Analyze loading performance\"\n\nAgent:\n1. Runs TTFB.js → detects 750ms (slow)\n2. Follows decision tree → runs TTFB-Sub-Parts.js\n3. Identifies DNS + server time issues\n4. Runs Service-Worker-Analysis.js\n5. Provides consolidated report with specific fixes\n```\n\n### Usage\n\nSkills activate automatically when matched:\n\n```\nAudit this page for Core Web Vitals\nAnalyze loading performance\nCheck for image optimization issues\nDebug slow LCP\nWhy is my TTFB so high?\n```\n\nSkills are compatible with [Chrome DevTools MCP](https://github.com/modelcontextprotocol/servers/tree/main/src/chrome-devtools) for automated browser-based performance auditing.\n\n**Supported agents**: Claude Code, Cursor, OpenCode, Gemini CLI, VS Code extensions, and [many more](https://agentskills.io/).\n\n## Documentation\n\nVisit **[webperf-snippets.nucliweb.net](https://webperf-snippets.nucliweb.net)** for the full documentation with all snippets.\n\n## Resources\n\n- [Web Vitals](https://web.dev/articles/vitals) - Learn about Core Web Vitals\n- [Chrome DevTools](https://developer.chrome.com/docs/devtools/) - Official documentation\n\n## Star History\n\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://api.star-history.com/image?repos=nucliweb/webperf-snippets\u0026type=date\u0026theme=dark\u0026legend=top-left\" /\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://api.star-history.com/image?repos=nucliweb/webperf-snippets\u0026type=date\u0026legend=top-left\" /\u003e\n  \u003cimg alt=\"Star History Chart\" src=\"https://api.star-history.com/image?repos=nucliweb/webperf-snippets\u0026type=date\u0026legend=top-left\" /\u003e\n\u003c/picture\u003e\n","funding_links":[],"categories":["Third Party Sources","MDX","JavaScript","Tools"],"sub_categories":["Resources"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnucliweb%2Fwebperf-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnucliweb%2Fwebperf-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnucliweb%2Fwebperf-snippets/lists"}