[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6GSY44J636RZ4NEVAC6KTG3":3,"skill-same:01M6GSY44J636RZ4NEVAC6KTG3":81},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":51,"commitSha":52,"skillDirectory":53,"forksCount":14,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":56,"install":57,"resources":70},"01M6GSY44J636RZ4NEVAC6KTG3","web-performance",null,"Optimize web performance for faster loading and better user experience. Use when asked to \"speed up my site\", \"optimize performance\", \"reduce load time\", \"fix slow loading\", \"improve page speed\", or \"performance audit\".","japurcell\u002Fskills","japurcell","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F10947458?v=4","01M6GSJK1YAG95R6VHF47V30KY","Adam Purcell","01M6GSJK6817NVR5FVDMFFNJ6H",0,"MIT","https:\u002F\u002Fgithub.com\u002Fjapurcell\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fdefault\u002Fweb-performance\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"web","web performance","performance","when","performance audit","reduce","for","load","my","loading","optimize web","user experience","speed","time","optimize","up","use","fix","user","quality","page","site","improve","audit","2026-11-10 10:12:30",false,"---\nname: web-performance\ndescription: Optimize web performance for faster loading and better user experience. Use when asked to \"speed up my site\", \"optimize performance\", \"reduce load time\", \"fix slow loading\", \"improve page speed\", or \"performance audit\".\nlicense: MIT\nmetadata:\n  author: web-quality-skills\n  version: \"2.0\"\n---\n\n# Performance optimization\n\nEvidence-led performance optimization using real-user signals for prioritization and browser traces for diagnosis. Focuses on loading speed, runtime responsiveness, and resource delivery.\n\n## How it works\n\n1. If a page can run, read [the measurement workflow](references\u002FMEASUREMENT.md) and establish a field-plus-lab baseline before editing.\n2. Prioritize poor real-user Core Web Vitals. Use a DevTools performance trace and its focused insights to find the cause.\n3. Inspect and change only the code or assets connected to measured bottlenecks.\n4. Re-run equivalent lab measurements and report before\u002Fafter values, conditions, and uncertainty. Field verification remains pending until enough new user data arrives.\n\nWhen no runnable page exists, perform static inspection but call findings **hypotheses**, not measured regressions. Include the command or browser workflow that can verify each high-impact hypothesis.\n\nPrefer a browser tool that records a performance trace and exposes focused insights. With Chrome DevTools MCP, use `performance_start_trace` and `performance_analyze_insight`; do not route performance through `lighthouse_audit`, which covers non-performance Lighthouse categories.\n\n## Starting performance budget\n\nBudgets must reflect the product's target devices, networks, page types, and user journeys. The values below are initial guardrails for a typical content or commerce page, not universal pass\u002Ffail criteria. Preserve an existing project budget when one is already defined.\n\n| Resource                | Budget   | Rationale                                                                                              |\n| ----------------------- | -------- | ------------------------------------------------------------------------------------------------------ |\n| Total page weight       | \u003C 1.5 MB | Bounds transfer time and data cost on constrained target networks; calibrate with representative pages |\n| JavaScript (compressed) | \u003C 300 KB | Protect parse and execution cost                                                                       |\n| CSS (compressed)        | \u003C 100 KB | Limit render-blocking work                                                                             |\n| Images (above-fold)     | \u003C 500 KB | Protect likely LCP resources                                                                           |\n| Fonts                   | \u003C 100 KB | Limit critical font transfer                                                                           |\n| Third-party             | \u003C 200 KB | Bound code outside product control                                                                     |\n\n## Critical rendering path\n\n### Server response\n\n- **TTFB \u003C 800ms.** Time to First Byte should be fast. Use CDN, caching, and efficient backends.\n- **Enable compression.** Gzip or Brotli for text assets. Brotli preferred (15-20% smaller).\n- **HTTP\u002F2 or HTTP\u002F3.** Multiplexing reduces connection overhead.\n- **Edge caching.** Cache HTML at CDN edge when possible.\n- **Consider Early Hints (HTTP 103) for measured document latency.** If a trace shows slow HTML generation and stable critical subresources, send an interim `103` with `Link` headers before the normal final response from the same request. Use HTTP\u002F2 or later. A CDN may synthesize the `103` from `Link` headers on an earlier `200`, or the origin\u002Fedge handler can emit it directly. Unsupported clients continue to the final response, but confirm current browser and infrastructure support. Limit hints to proven critical preloads or preconnects: inaccurate hints waste bandwidth. Cloudflare reported a 20–30% LCP improvement in an artificial, image-heavy test; treat that as a vendor case study, not an expected saving, and measure your result. See [MDN's 103 implementation example](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTTP\u002FReference\u002FStatus\u002F103) and [the Cloudflare study](https:\u002F\u002Fblog.cloudflare.com\u002Fearly-hints-performance\u002F).\n\n### Resource loading\n\n**Preconnect to required origins:**\n\n```html\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\" \u002F>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fcdn.example.com\" crossorigin \u002F>\n```\n\n**Preload critical resources:**\n\nPreload only resources whose late discovery is visible in the trace. Each preload competes for bandwidth and an unnecessary high-priority request can delay LCP.\n\n```html\n\u003C!-- LCP image -->\n\u003Clink rel=\"preload\" href=\"\u002Fhero.webp\" as=\"image\" fetchpriority=\"high\" \u002F>\n\n\u003C!-- Critical font -->\n\u003Clink\n  rel=\"preload\"\n  href=\"\u002Ffont.woff2\"\n  as=\"font\"\n  type=\"font\u002Fwoff2\"\n  crossorigin\n\u002F>\n```\n\n**Prerender likely-next navigations** with the [Speculation Rules API](https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fweb-platform\u002Fprerender-pages):\n\n```html\n\u003Cscript type=\"speculationrules\">\n  {\n    \"prerender\": [\n      {\n        \"where\": { \"href_matches\": \"\u002F*\" },\n        \"eagerness\": \"moderate\"\n      }\n    ]\n  }\n\u003C\u002Fscript>\n```\n\n`moderate` waits for a stronger intent signal than eager modes. Measure prediction hit rate, transferred bytes, and server cost; a wrong prerender is roughly an unused navigation. See [core-web-vitals → LCP](..\u002Fcore-web-vitals\u002FSKILL.md#lcp-largest-contentful-paint) for the tradeoffs and the `prerenderingchange` gating needed for analytics.\n\n**Defer non-critical CSS:**\n\n```html\n\u003C!-- Critical CSS inlined -->\n\u003Cstyle>\n  \u002F* Above-fold styles *\u002F\n\u003C\u002Fstyle>\n\n\u003C!-- Non-critical CSS -->\n\u003Clink\n  rel=\"preload\"\n  href=\"\u002Fstyles.css\"\n  as=\"style\"\n  onload=\"this.onload=null;this.rel='stylesheet'\"\n\u002F>\n\u003Cnoscript>\u003Clink rel=\"stylesheet\" href=\"\u002Fstyles.css\" \u002F>\u003C\u002Fnoscript>\n```\n\n### JavaScript optimization\n\n**Defer non-essential scripts:**\n\n```html\n\u003C!-- Parser-blocking (avoid) -->\n\u003Cscript src=\"\u002Fcritical.js\">\u003C\u002Fscript>\n\n\u003C!-- Deferred (preferred) -->\n\u003Cscript defer src=\"\u002Fapp.js\">\u003C\u002Fscript>\n\n\u003C!-- Async (for independent scripts) -->\n\u003Cscript async src=\"\u002Fanalytics.js\">\u003C\u002Fscript>\n\n\u003C!-- Module (deferred by default) -->\n\u003Cscript type=\"module\" src=\"\u002Fapp.mjs\">\u003C\u002Fscript>\n```\n\n**Code splitting patterns:**\n\n```javascript\n\u002F\u002F Route-based splitting\nconst Dashboard = lazy(() => import(\".\u002FDashboard\"));\n\n\u002F\u002F Component-based splitting\nconst HeavyChart = lazy(() => import(\".\u002FHeavyChart\"));\n\n\u002F\u002F Feature-based splitting\nif (user.isPremium) {\n  const PremiumFeatures = await import(\".\u002FPremiumFeatures\");\n}\n```\n\n**Tree shaking best practices:**\n\n```javascript\n\u002F\u002F ❌ Imports entire library\nimport _ from \"lodash\";\n_.debounce(fn, 300);\n\n\u002F\u002F ✅ Imports only what's needed\nimport debounce from \"lodash\u002Fdebounce\";\ndebounce(fn, 300);\n```\n\n## Image optimization\n\n### Format selection\n\n| Format | Use case                    | Browser support |\n| ------ | --------------------------- | --------------- |\n| AVIF   | Photos, best compression    | 92%+            |\n| WebP   | Photos, good fallback       | 97%+            |\n| PNG    | Graphics with transparency  | Universal       |\n| SVG    | Icons, logos, illustrations | Universal       |\n\n### Responsive images\n\n```html\n\u003Cpicture>\n  \u003C!-- AVIF for modern browsers -->\n  \u003Csource\n    type=\"image\u002Favif\"\n    srcset=\"hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w\"\n    sizes=\"(max-width: 600px) 100vw, 50vw\"\n  \u002F>\n\n  \u003C!-- WebP fallback -->\n  \u003Csource\n    type=\"image\u002Fwebp\"\n    srcset=\"hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w\"\n    sizes=\"(max-width: 600px) 100vw, 50vw\"\n  \u002F>\n\n  \u003C!-- JPEG fallback -->\n  \u003Cimg\n    src=\"hero-800.jpg\"\n    srcset=\"hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w\"\n    sizes=\"(max-width: 600px) 100vw, 50vw\"\n    width=\"1200\"\n    height=\"600\"\n    alt=\"Hero image\"\n    loading=\"lazy\"\n    decoding=\"async\"\n  \u002F>\n\u003C\u002Fpicture>\n```\n\n### LCP image priority\n\n```html\n\u003C!-- Above-fold LCP image: eager loading, high priority -->\n\u003Cimg\n  src=\"hero.webp\"\n  fetchpriority=\"high\"\n  loading=\"eager\"\n  decoding=\"sync\"\n  alt=\"Hero\"\n\u002F>\n\n\u003C!-- Below-fold images: lazy loading -->\n\u003Cimg src=\"product.webp\" loading=\"lazy\" decoding=\"async\" alt=\"Product\" \u002F>\n```\n\n## Font optimization\n\n### Loading strategy\n\n```css\n\u002F* System font stack as fallback *\u002F\nbody {\n  font-family:\n    \"Custom Font\",\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Roboto,\n    sans-serif;\n}\n\n\u002F* Prevent invisible text *\u002F\n@font-face {\n  font-family: \"Custom Font\";\n  src: url(\"\u002Ffonts\u002Fcustom.woff2\") format(\"woff2\");\n  font-display: swap; \u002F* or optional for non-critical *\u002F\n  font-weight: 400;\n  font-style: normal;\n  unicode-range: U+0000-00FF; \u002F* Subset to Latin *\u002F\n}\n```\n\n### Preloading critical fonts\n\n```html\n\u003Clink\n  rel=\"preload\"\n  href=\"\u002Ffonts\u002Fheading.woff2\"\n  as=\"font\"\n  type=\"font\u002Fwoff2\"\n  crossorigin\n\u002F>\n```\n\n### Variable fonts\n\n```css\n\u002F* One file instead of multiple weights *\u002F\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"\u002Ffonts\u002FInter-Variable.woff2\") format(\"woff2-variations\");\n  font-weight: 100 900;\n  font-display: swap;\n}\n```\n\n## Caching strategy\n\n### Cache-Control headers\n\n```\n# HTML (short or no cache)\nCache-Control: no-cache, must-revalidate\n\n# Static assets with hash (immutable)\nCache-Control: public, max-age=31536000, immutable\n\n# Static assets without hash\nCache-Control: public, max-age=86400, stale-while-revalidate=604800\n\n# API responses\nCache-Control: private, max-age=0, must-revalidate\n```\n\n### Service worker caching\n\n```javascript\n\u002F\u002F Cache-first for static assets\nself.addEventListener(\"fetch\", (event) => {\n  if (\n    event.request.destination === \"image\" ||\n    event.request.destination === \"style\" ||\n    event.request.destination === \"script\"\n  ) {\n    event.respondWith(\n      caches.match(event.request).then((cached) => {\n        return (\n          cached ||\n          fetch(event.request).then((response) => {\n            const clone = response.clone();\n            caches\n              .open(\"static-v1\")\n              .then((cache) => cache.put(event.request, clone));\n            return response;\n          })\n        );\n      }),\n    );\n  }\n});\n```\n\n## Runtime performance\n\n### Avoid layout thrashing\n\n```javascript\n\u002F\u002F ❌ Forces multiple reflows\nelements.forEach((el) => {\n  const height = el.offsetHeight; \u002F\u002F Read\n  el.style.height = height + 10 + \"px\"; \u002F\u002F Write\n});\n\n\u002F\u002F ✅ Batch reads, then batch writes\nconst heights = elements.map((el) => el.offsetHeight); \u002F\u002F All reads\nelements.forEach((el, i) => {\n  el.style.height = heights[i] + 10 + \"px\"; \u002F\u002F All writes\n});\n```\n\n### Debounce expensive operations\n\n```javascript\nfunction debounce(fn, delay) {\n  let timeout;\n  return (...args) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => fn(...args), delay);\n  };\n}\n\n\u002F\u002F Debounce scroll\u002Fresize handlers\nwindow.addEventListener(\"scroll\", debounce(handleScroll, 100));\n```\n\n### Use requestAnimationFrame\n\n```javascript\n\u002F\u002F ❌ May cause jank\nsetInterval(animate, 16);\n\n\u002F\u002F ✅ Synced with display refresh\nfunction animate() {\n  \u002F\u002F Animation logic\n  requestAnimationFrame(animate);\n}\nrequestAnimationFrame(animate);\n```\n\n### Virtualize long lists\n\n```javascript\n\u002F\u002F For lists > 100 items, render only visible items\n\u002F\u002F Use libraries like react-window, vue-virtual-scroller, or native CSS:\n.virtual-list {\n  content-visibility: auto;\n  contain-intrinsic-size: 0 50px; \u002F* Estimated item height *\u002F\n}\n```\n\n### Smooth navigations with View Transitions\n\nThe [View Transitions API](https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fweb-platform\u002Fview-transitions) lets the browser cross-fade (or custom-animate) between two DOM states using a single GPU-composited snapshot — no double-render, no layout thrash, and the snapshot doesn't count toward CLS.\n\n**Same-document (SPA-style) — Baseline 2026:**\n\n```javascript\n\u002F\u002F Wrap the DOM mutation that swaps the view\nfunction navigate(newView) {\n  if (!document.startViewTransition) return swapDOM(newView);\n  document.startViewTransition(() => swapDOM(newView));\n}\n```\n\n**Cross-document (MPA-style) — Chromium-stable, progressive enhancement elsewhere:**\n\n```css\n\u002F* On both source and destination pages *\u002F\n@view-transition {\n  navigation: auto;\n}\n```\n\nThat's the entire integration — same-origin navigations now fade automatically. To opt specific elements into shared-element transitions (e.g. a thumbnail expanding into a hero), give them a matching `view-transition-name`:\n\n```css\n.product-thumb[data-id=\"42\"],\n.product-hero {\n  view-transition-name: product-42;\n}\n```\n\nPair this with Speculation Rules (above) for instant + animated navigations.\n\n## Third-party scripts\n\n### Load strategies\n\n```javascript\n\u002F\u002F ❌ Blocks main thread\n\u003Cscript src=\"https:\u002F\u002Fanalytics.example.com\u002Fscript.js\">\u003C\u002Fscript>\n\n\u002F\u002F ✅ Async loading\n\u003Cscript async src=\"https:\u002F\u002Fanalytics.example.com\u002Fscript.js\">\u003C\u002Fscript>\n\n\u002F\u002F ✅ Delay until interaction\n\u003Cscript>\ndocument.addEventListener('DOMContentLoaded', () => {\n  const observer = new IntersectionObserver((entries) => {\n    if (entries[0].isIntersecting) {\n      const script = document.createElement('script');\n      script.src = 'https:\u002F\u002Fwidget.example.com\u002Fembed.js';\n      document.body.appendChild(script);\n      observer.disconnect();\n    }\n  });\n  observer.observe(document.querySelector('#widget-container'));\n});\n\u003C\u002Fscript>\n```\n\n### Facade pattern\n\n```html\n\u003C!-- Show static placeholder until interaction -->\n\u003Cdiv class=\"youtube-facade\" data-video-id=\"abc123\" onclick=\"loadYouTube(this)\">\n  \u003Cimg src=\"\u002Fthumbnails\u002Fabc123.jpg\" alt=\"Video title\" \u002F>\n  \u003Cbutton aria-label=\"Play video\">▶\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n```\n\n## Measurement\n\nUse [the measurement workflow](references\u002FMEASUREMENT.md) whenever a URL is runnable. It defines Chrome DevTools MCP routing, CrUX and fallback sources, repeatable lab conditions, and a compact evidence format.\n\n| Metric               | Kind  | Interpretation                                                       |\n| -------------------- | ----- | -------------------------------------------------------------------- |\n| LCP, INP, CLS at p75 | Field | User-outcome Core Web Vitals; use for pass\u002Ffail prioritization       |\n| LCP, CLS in a trace  | Lab   | Reproducible diagnostic values for one navigation                    |\n| TBT                  | Lab   | Main-thread blocking diagnostic and a rough INP proxy, not field INP |\n| FCP, Speed Index     | Lab   | Loading diagnostics, not Core Web Vitals                             |\n\nRaw `PerformanceObserver` snippets are useful for the current browser session but are not real-user data by themselves. When the user wants production telemetry, read [the first-party RUM reference](references\u002FRUM.md) and prefer `web-vitals` over a hand-rolled metric implementation.\n\n## References\n\nFor Core Web Vitals specific optimizations, see [Core Web Vitals](..\u002Fcore-web-vitals\u002FSKILL.md).\n","# Performance optimization\n\nEvidence-led performance optimization using real-user signals for prioritization and browser traces for diagnosis. Focuses on loading speed, runtime responsiveness, and resource delivery.\n\n## How it works\n\n1. If a page can run, read [the measurement workflow](references\u002FMEASUREMENT.md) and establish a field-plus-lab baseline before editing.\n2. Prioritize poor real-user Core Web Vitals. Use a DevTools performance trace and its focused insights to find the cause.\n3. Inspect and change only the code or assets connected to measured bottlenecks.\n4. Re-run equivalent lab measurements and report before\u002Fafter values, conditions, and uncertainty. Field verification remains pending until enough new user data arrives.\n\nWhen no runnable page exists, perform static inspection but call findings **hypotheses**, not measured regressions. Include the command or browser workflow that can verify each high-impact hypothesis.\n\nPrefer a browser tool that records a performance trace and exposes focused insights. With Chrome DevTools MCP, use `performance_start_trace` and `performance_analyze_insight`; do not route performance through `lighthouse_audit`, which covers non-performance Lighthouse categories.\n\n## Starting performance budget\n\nBudgets must reflect the product's target devices, networks, page types, and user journeys. The values below are initial guardrails for a typical content or commerce page, not universal pass\u002Ffail criteria. Preserve an existing project budget when one is already defined.\n\n| Resource                | Budget   | Rationale                                                                                              |\n| ----------------------- | -------- | ------------------------------------------------------------------------------------------------------ |\n| Total page weight       | \u003C 1.5 MB | Bounds transfer time and data cost on constrained target networks; calibrate with representative pages |\n| JavaScript (compressed) | \u003C 300 KB | Protect parse and execution cost                                                                       |\n| CSS (compressed)        | \u003C 100 KB | Limit render-blocking work                                                                             |\n| Images (above-fold)     | \u003C 500 KB | Protect likely LCP resources                                                                           |\n| Fonts                   | \u003C 100 KB | Limit critical font transfer                                                                           |\n| Third-party             | \u003C 200 KB | Bound code outside product control                                                                     |\n\n## Critical rendering path\n\n### Server response\n\n- **TTFB \u003C 800ms.** Time to First Byte should be fast. Use CDN, caching, and efficient backends.\n- **Enable compression.** Gzip or Brotli for text assets. Brotli preferred (15-20% smaller).\n- **HTTP\u002F2 or HTTP\u002F3.** Multiplexing reduces connection overhead.\n- **Edge caching.** Cache HTML at CDN edge when possible.\n- **Consider Early Hints (HTTP 103) for measured document latency.** If a trace shows slow HTML generation and stable critical subresources, send an interim `103` with `Link` headers before the normal final response from the same request. Use HTTP\u002F2 or later. A CDN may synthesize the `103` from `Link` headers on an earlier `200`, or the origin\u002Fedge handler can emit it directly. Unsupported clients continue to the final response, but confirm current browser and infrastructure support. Limit hints to proven critical preloads or preconnects: inaccurate hints waste bandwidth. Cloudflare reported a 20–30% LCP improvement in an artificial, image-heavy test; treat that as a vendor case study, not an expected saving, and measure your result. See [MDN's 103 implementation example](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTTP\u002FReference\u002FStatus\u002F103) and [the Cloudflare study](https:\u002F\u002Fblog.cloudflare.com\u002Fearly-hints-performance\u002F).\n\n### Resource loading\n\n**Preconnect to required origins:**\n\n```html\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\" \u002F>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fcdn.example.com\" crossorigin \u002F>\n```\n\n**Preload critical resources:**\n\nPreload only resources whose late discovery is visible in the trace. Each preload competes for bandwidth and an unnecessary high-priority request can delay LCP.\n\n```html\n\u003C!-- LCP image -->\n\u003Clink rel=\"preload\" href=\"\u002Fhero.webp\" as=\"image\" fetchpriority=\"high\" \u002F>\n\n\u003C!-- Critical font -->\n\u003Clink\n  rel=\"preload\"\n  href=\"\u002Ffont.woff2\"\n  as=\"font\"\n  type=\"font\u002Fwoff2\"\n  crossorigin\n\u002F>\n```\n\n**Prerender likely-next navigations** with the [Speculation Rules API](https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fweb-platform\u002Fprerender-pages):\n\n```html\n\u003Cscript type=\"speculationrules\">\n  {\n    \"prerender\": [\n      {\n        \"where\": { \"href_matches\": \"\u002F*\" },\n        \"eagerness\": \"moderate\"\n      }\n    ]\n  }\n\u003C\u002Fscript>\n```\n\n`moderate` waits for a stronger intent signal than eager modes. Measure prediction hit rate, transferred bytes, and server cost; a wrong prerender is roughly an unused navigation. See [core-web-vitals → LCP](..\u002Fcore-web-vitals\u002FSKILL.md#lcp-largest-contentful-paint) for the tradeoffs and the `prerenderingchange` gating needed for analytics.\n\n**Defer non-critical CSS:**\n\n```html\n\u003C!-- Critical CSS inlined -->\n\u003Cstyle>\n  \u002F* Above-fold styles *\u002F\n\u003C\u002Fstyle>\n\n\u003C!-- Non-critical CSS -->\n\u003Clink\n  rel=\"preload\"\n  href=\"\u002Fstyles.css\"\n  as=\"style\"\n  onload=\"this.onload=null;this.rel='stylesheet'\"\n\u002F>\n\u003Cnoscript>\u003Clink rel=\"stylesheet\" href=\"\u002Fstyles.css\" \u002F>\u003C\u002Fnoscript>\n```\n\n### JavaScript optimization\n\n**Defer non-essential scripts:**\n\n```html\n\u003C!-- Parser-blocking (avoid) -->\n\u003Cscript src=\"\u002Fcritical.js\">\u003C\u002Fscript>\n\n\u003C!-- Deferred (preferred) -->\n\u003Cscript defer src=\"\u002Fapp.js\">\u003C\u002Fscript>\n\n\u003C!-- Async (for independent scripts) -->\n\u003Cscript async src=\"\u002Fanalytics.js\">\u003C\u002Fscript>\n\n\u003C!-- Module (deferred by default) -->\n\u003Cscript type=\"module\" src=\"\u002Fapp.mjs\">\u003C\u002Fscript>\n```\n\n**Code splitting patterns:**\n\n```javascript\n\u002F\u002F Route-based splitting\nconst Dashboard = lazy(() => import(\".\u002FDashboard\"));\n\n\u002F\u002F Component-based splitting\nconst HeavyChart = lazy(() => import(\".\u002FHeavyChart\"));\n\n\u002F\u002F Feature-based splitting\nif (user.isPremium) {\n  const PremiumFeatures = await import(\".\u002FPremiumFeatures\");\n}\n```\n\n**Tree shaking best practices:**\n\n```javascript\n\u002F\u002F ❌ Imports entire library\nimport _ from \"lodash\";\n_.debounce(fn, 300);\n\n\u002F\u002F ✅ Imports only what's needed\nimport debounce from \"lodash\u002Fdebounce\";\ndebounce(fn, 300);\n```\n\n## Image optimization\n\n### Format selection\n\n| Format | Use case                    | Browser support |\n| ------ | --------------------------- | --------------- |\n| AVIF   | Photos, best compression    | 92%+            |\n| WebP   | Photos, good fallback       | 97%+            |\n| PNG    | Graphics with transparency  | Universal       |\n| SVG    | Icons, logos, illustrations | Universal       |\n\n### Responsive images\n\n```html\n\u003Cpicture>\n  \u003C!-- AVIF for modern browsers -->\n  \u003Csource\n    type=\"image\u002Favif\"\n    srcset=\"hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w\"\n    sizes=\"(max-width: 600px) 100vw, 50vw\"\n  \u002F>\n\n  \u003C!-- WebP fallback -->\n  \u003Csource\n    type=\"image\u002Fwebp\"\n    srcset=\"hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w\"\n    sizes=\"(max-width: 600px) 100vw, 50vw\"\n  \u002F>\n\n  \u003C!-- JPEG fallback -->\n  \u003Cimg\n    src=\"hero-800.jpg\"\n    srcset=\"hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w\"\n    sizes=\"(max-width: 600px) 100vw, 50vw\"\n    width=\"1200\"\n    height=\"600\"\n    alt=\"Hero image\"\n    loading=\"lazy\"\n    decoding=\"async\"\n  \u002F>\n\u003C\u002Fpicture>\n```\n\n### LCP image priority\n\n```html\n\u003C!-- Above-fold LCP image: eager loading, high priority -->\n\u003Cimg\n  src=\"hero.webp\"\n  fetchpriority=\"high\"\n  loading=\"eager\"\n  decoding=\"sync\"\n  alt=\"Hero\"\n\u002F>\n\n\u003C!-- Below-fold images: lazy loading -->\n\u003Cimg src=\"product.webp\" loading=\"lazy\" decoding=\"async\" alt=\"Product\" \u002F>\n```\n\n## Font optimization\n\n### Loading strategy\n\n```css\n\u002F* System font stack as fallback *\u002F\nbody {\n  font-family:\n    \"Custom Font\",\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Roboto,\n    sans-serif;\n}\n\n\u002F* Prevent invisible text *\u002F\n@font-face {\n  font-family: \"Custom Font\";\n  src: url(\"\u002Ffonts\u002Fcustom.woff2\") format(\"woff2\");\n  font-display: swap; \u002F* or optional for non-critical *\u002F\n  font-weight: 400;\n  font-style: normal;\n  unicode-range: U+0000-00FF; \u002F* Subset to Latin *\u002F\n}\n```\n\n### Preloading critical fonts\n\n```html\n\u003Clink\n  rel=\"preload\"\n  href=\"\u002Ffonts\u002Fheading.woff2\"\n  as=\"font\"\n  type=\"font\u002Fwoff2\"\n  crossorigin\n\u002F>\n```\n\n### Variable fonts\n\n```css\n\u002F* One file instead of multiple weights *\u002F\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"\u002Ffonts\u002FInter-Variable.woff2\") format(\"woff2-variations\");\n  font-weight: 100 900;\n  font-display: swap;\n}\n```\n\n## Caching strategy\n\n### Cache-Control headers\n\n```\n# HTML (short or no cache)\nCache-Control: no-cache, must-revalidate\n\n# Static assets with hash (immutable)\nCache-Control: public, max-age=31536000, immutable\n\n# Static assets without hash\nCache-Control: public, max-age=86400, stale-while-revalidate=604800\n\n# API responses\nCache-Control: private, max-age=0, must-revalidate\n```\n\n### Service worker caching\n\n```javascript\n\u002F\u002F Cache-first for static assets\nself.addEventListener(\"fetch\", (event) => {\n  if (\n    event.request.destination === \"image\" ||\n    event.request.destination === \"style\" ||\n    event.request.destination === \"script\"\n  ) {\n    event.respondWith(\n      caches.match(event.request).then((cached) => {\n        return (\n          cached ||\n          fetch(event.request).then((response) => {\n            const clone = response.clone();\n            caches\n              .open(\"static-v1\")\n              .then((cache) => cache.put(event.request, clone));\n            return response;\n          })\n        );\n      }),\n    );\n  }\n});\n```\n\n## Runtime performance\n\n### Avoid layout thrashing\n\n```javascript\n\u002F\u002F ❌ Forces multiple reflows\nelements.forEach((el) => {\n  const height = el.offsetHeight; \u002F\u002F Read\n  el.style.height = height + 10 + \"px\"; \u002F\u002F Write\n});\n\n\u002F\u002F ✅ Batch reads, then batch writes\nconst heights = elements.map((el) => el.offsetHeight); \u002F\u002F All reads\nelements.forEach((el, i) => {\n  el.style.height = heights[i] + 10 + \"px\"; \u002F\u002F All writes\n});\n```\n\n### Debounce expensive operations\n\n```javascript\nfunction debounce(fn, delay) {\n  let timeout;\n  return (...args) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => fn(...args), delay);\n  };\n}\n\n\u002F\u002F Debounce scroll\u002Fresize handlers\nwindow.addEventListener(\"scroll\", debounce(handleScroll, 100));\n```\n\n### Use requestAnimationFrame\n\n```javascript\n\u002F\u002F ❌ May cause jank\nsetInterval(animate, 16);\n\n\u002F\u002F ✅ Synced with display refresh\nfunction animate() {\n  \u002F\u002F Animation logic\n  requestAnimationFrame(animate);\n}\nrequestAnimationFrame(animate);\n```\n\n### Virtualize long lists\n\n```javascript\n\u002F\u002F For lists > 100 items, render only visible items\n\u002F\u002F Use libraries like react-window, vue-virtual-scroller, or native CSS:\n.virtual-list {\n  content-visibility: auto;\n  contain-intrinsic-size: 0 50px; \u002F* Estimated item height *\u002F\n}\n```\n\n### Smooth navigations with View Transitions\n\nThe [View Transitions API](https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fweb-platform\u002Fview-transitions) lets the browser cross-fade (or custom-animate) between two DOM states using a single GPU-composited snapshot — no double-render, no layout thrash, and the snapshot doesn't count toward CLS.\n\n**Same-document (SPA-style) — Baseline 2026:**\n\n```javascript\n\u002F\u002F Wrap the DOM mutation that swaps the view\nfunction navigate(newView) {\n  if (!document.startViewTransition) return swapDOM(newView);\n  document.startViewTransition(() => swapDOM(newView));\n}\n```\n\n**Cross-document (MPA-style) — Chromium-stable, progressive enhancement elsewhere:**\n\n```css\n\u002F* On both source and destination pages *\u002F\n@view-transition {\n  navigation: auto;\n}\n```\n\nThat's the entire integration — same-origin navigations now fade automatically. To opt specific elements into shared-element transitions (e.g. a thumbnail expanding into a hero), give them a matching `view-transition-name`:\n\n```css\n.product-thumb[data-id=\"42\"],\n.product-hero {\n  view-transition-name: product-42;\n}\n```\n\nPair this with Speculation Rules (above) for instant + animated navigations.\n\n## Third-party scripts\n\n### Load strategies\n\n```javascript\n\u002F\u002F ❌ Blocks main thread\n\u003Cscript src=\"https:\u002F\u002Fanalytics.example.com\u002Fscript.js\">\u003C\u002Fscript>\n\n\u002F\u002F ✅ Async loading\n\u003Cscript async src=\"https:\u002F\u002Fanalytics.example.com\u002Fscript.js\">\u003C\u002Fscript>\n\n\u002F\u002F ✅ Delay until interaction\n\u003Cscript>\ndocument.addEventListener('DOMContentLoaded', () => {\n  const observer = new IntersectionObserver((entries) => {\n    if (entries[0].isIntersecting) {\n      const script = document.createElement('script');\n      script.src = 'https:\u002F\u002Fwidget.example.com\u002Fembed.js';\n      document.body.appendChild(script);\n      observer.disconnect();\n    }\n  });\n  observer.observe(document.querySelector('#widget-container'));\n});\n\u003C\u002Fscript>\n```\n\n### Facade pattern\n\n```html\n\u003C!-- Show static placeholder until interaction -->\n\u003Cdiv class=\"youtube-facade\" data-video-id=\"abc123\" onclick=\"loadYouTube(this)\">\n  \u003Cimg src=\"\u002Fthumbnails\u002Fabc123.jpg\" alt=\"Video title\" \u002F>\n  \u003Cbutton aria-label=\"Play video\">▶\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n```\n\n## Measurement\n\nUse [the measurement workflow](references\u002FMEASUREMENT.md) whenever a URL is runnable. It defines Chrome DevTools MCP routing, CrUX and fallback sources, repeatable lab conditions, and a compact evidence format.\n\n| Metric               | Kind  | Interpretation                                                       |\n| -------------------- | ----- | -------------------------------------------------------------------- |\n| LCP, INP, CLS at p75 | Field | User-outcome Core Web Vitals; use for pass\u002Ffail prioritization       |\n| LCP, CLS in a trace  | Lab   | Reproducible diagnostic values for one navigation                    |\n| TBT                  | Lab   | Main-thread blocking diagnostic and a rough INP proxy, not field INP |\n| FCP, Speed Index     | Lab   | Loading diagnostics, not Core Web Vitals                             |\n\nRaw `PerformanceObserver` snippets are useful for the current browser session but are not real-user data by themselves. When the user wants production telemetry, read [the first-party RUM reference](references\u002FRUM.md) and prefer `web-vitals` over a hand-rolled metric implementation.\n\n## References\n\nFor Core Web Vitals specific optimizations, see [Core Web Vitals](..\u002Fcore-web-vitals\u002FSKILL.md).\n",{"name":5,"license":15,"metadata":48,"description":7},{"author":49,"version":50},"web-quality-skills","2.0","main","57541c0eee379b047ef924f47432ce8ffa5130e8","skills\u002Fdefault\u002Fweb-performance","https:\u002F\u002Fgithub.com\u002Fjapurcell\u002Fskills","https:\u002F\u002Fgithub.com\u002Fjapurcell","2026-11-11 08:59:34",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add japurcell\u002Fskills --skill web-performance",{"tool":63,"command":64},"bunx","bunx skills add japurcell\u002Fskills --skill web-performance",{"tool":66,"command":67},"pnpm","pnpm dlx skills add japurcell\u002Fskills --skill web-performance","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fjapurcell\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fdefault\u002Fweb-performance\u002FSKILL.md",true,[71,77],{"path":72,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":75,"sourceHtmlUrl":76},"references\u002FMEASUREMENT.md","REFERENCE","参考文档",7371,"https:\u002F\u002Fgithub.com\u002Fjapurcell\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fdefault\u002Fweb-performance\u002Freferences\u002FMEASUREMENT.md",{"path":78,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":79,"sourceHtmlUrl":80},"references\u002FRUM.md",3135,"https:\u002F\u002Fgithub.com\u002Fjapurcell\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fdefault\u002Fweb-performance\u002Freferences\u002FRUM.md",[82,111,133,161,183,203],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":93,"publishedAt":43},"01M6PT0ZTYCN4DHK3SXWS79WSY","spec-create","Create or revise a portable behavioral SPEC for a feature or whole product. Use when specifying a new idea, documenting an existing system for reimplementation, or defining a change while preserving compatibility. Implementation planning is a separate task.","https:\u002F\u002Fgithub.com\u002Fjapurcell\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fdefault\u002Fspec-create\u002FSKILL.md",[88],{"categoryNo":89,"categoryName":90,"taxonomyType":91,"taxonomyTypeDesc":92},"01JBSEEDCAT000000000000031","产品经理","PROFESSION","适用职业",[94,95,96,97,98,25,99,35,100,101,102,103,104,105,106,107,108,109,110],"create","spec","spec create","feature","planning","system","Existing","task","output","change","product","implementation","revise","compatibility","behavioral","idea","path",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":118,"publishedAt":43},"01M6GSVHQ4MY4R4SMS8RY6324Q","prd-ralph","Complete at most one eligible unfinished PRD task, verify it, log progress, and optionally create one scoped commit.","https:\u002F\u002Fgithub.com\u002Fjapurcell\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fdefault\u002Fprd-ralph\u002FSKILL.md",[117],{"categoryNo":89,"categoryName":90,"taxonomyType":91,"taxonomyTypeDesc":92},[119,120,121,94,122,123,124,125,126,127,101,128,129,130,131,132,110],"prd ralph","ralph","prd","progress","verify","at","complete","commit","it","log","scoped","false","file","id",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":142,"publishedAt":43},"01M6GSYMGHE2FEGEFKD926EJH8","fsdp-style-guide","Mandatory for all UI\u002FUX design, implementation, review, audit, or visual regression tasks. Always use for any work that affects user-facing appearance, behavior, accessibility, branding, layout, navigation, forms, dialogs, alerts, tables, or visual design.","https:\u002F\u002Fgithub.com\u002Fjapurcell\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fforest-service\u002Ffsdp-style-guide\u002FSKILL.md",[139],{"categoryNo":140,"categoryName":141,"taxonomyType":91,"taxonomyTypeDesc":92},"01JBSEEDCAT000000000000032","设计师",[143,144,145,146,147,148,149,150,35,151,152,153,154,155,156,157,158,42,159,160,25],"fsdp style guide","style guide","FSDP","style","guide","visual regression","regression","design","visual","tasks","review","visual design","alerts","work","branding","layout","ux","behavior",{"skillNo":162,"name":163,"nameZh":6,"description":164,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":167,"publishedAt":43},"01M6GSYHEQARNM7WN0RJA7K7T2","agency-priorities","Provide self-contained USDA strategic goals and Forest Service priorities for agency briefings, proposals, and work-plan alignment. Use when explaining agency direction or evaluating how a project contributes to USDA and Forest Service priorities.","https:\u002F\u002Fgithub.com\u002Fjapurcell\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fforest-service\u002Fagency-priorities\u002FSKILL.md",[],[168,169,170,171,172,156,173,174,175,176,177,178,179,180,35,25,22,181,182],"agency priorities","priorities","agency","self","alignment","plan","goals","proposals","direction","how","project","strategic","service","briefings","self-contained",{"skillNo":184,"name":185,"nameZh":6,"description":186,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":187,"categories":188,"keywords":192,"publishedAt":43},"01M6GSY9VVN8RSJ5QYM540ZJ1D","accomplishment-report","Create a concise Forest Service executive accomplishment report when all work in an ExecPlan is completed, or update its existing report. Use at ExecPlan closeout and when asked to report completed work, agency alignment, and estimated AI-assisted versus human-only time and cost savings.","https:\u002F\u002Fgithub.com\u002Fjapurcell\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fforest-service\u002Faccomplishment-report\u002FSKILL.md",[189],{"categoryNo":190,"categoryName":191,"taxonomyType":91,"taxonomyTypeDesc":92},"01JBSEEDCAT000000000000034","行政与办公人员",[193,194,172,195,94,156,196,197,32,198,124,170,199,180,35,200,201,202,100,22],"report","accomplishment report","cost","concise","human","update","only","closeout","savings","execplan",{"skillNo":204,"name":205,"nameZh":6,"description":206,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":207,"categories":208,"keywords":217,"publishedAt":43},"01M6GSY7J8ZMCE319P8Y6JZ432","writing-for-agents","Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.","https:\u002F\u002Fgithub.com\u002Fjapurcell\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fdefault\u002Fwriting-for-agents\u002FSKILL.md",[209,214],{"categoryNo":210,"categoryName":211,"taxonomyType":212,"taxonomyTypeDesc":213},"01JBSEEDCAT000000000000018","写作与文案","SCENARIO","使用场景",{"categoryNo":215,"categoryName":216,"taxonomyType":91,"taxonomyTypeDesc":92},"01JBSEEDCAT000000000000036","内容创作者",[218,219,25,35,220,221,22],"writing","writing for agents","documents","editing"]