[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6BY2NJ2VTZARGZBWEBFRM9N":3,"skill-same:01M6BY2NJ2VTZARGZBWEBFRM9N":75},{"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":26,"linkOnly":27,"markdownContent":28,"markdownBody":29,"frontMatter":30,"refName":34,"commitSha":35,"skillDirectory":36,"forksCount":14,"repositoryHtmlUrl":37,"repositoryHomepageUrl":38,"ownerHtmlUrl":39,"ownerBlogUrl":40,"ownerDescription":41,"updatedAt":42,"install":43,"resources":56},"01M6BY2NJ2VTZARGZBWEBFRM9N","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\".","wolfstar-project\u002Fwolfstar.rocks","wolfstar-project","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F109528280?v=4","01M6BXZW9J3Y1DWPNSBBWC2BVY","wolfstar","01M6BXZWDRD3C71GVE58BWXW1D",0,"MIT","https:\u002F\u002Fgithub.com\u002Fwolfstar-project\u002Fwolfstar.rocks\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fperformance\u002FSKILL.md",[],[5,19,20,21,22,23,24,25],"web","web performance","audit","improve","site","page","quality","2026-11-10 10:12:30",false,"---\nname: 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: \"1.0\"\n---\n\n# Performance optimization\n\nDeep performance optimization based on Lighthouse performance audits. Focuses on loading speed, runtime efficiency, and resource optimization.\n\n## How it works\n\n1. Identify performance bottlenecks in code and assets\n2. Prioritize by impact on Core Web Vitals\n3. Provide specific optimizations with code examples\n4. Measure improvement with before\u002Fafter metrics\n\n## Performance budget\n\n| Resource | Budget | Rationale |\n|----------|--------|-----------|\n| Total page weight | \u003C 1.5 MB | 3G loads in ~4s |\n| JavaScript (compressed) | \u003C 300 KB | Parsing + execution time |\n| CSS (compressed) | \u003C 100 KB | Render blocking |\n| Images (above-fold) | \u003C 500 KB | LCP impact |\n| Fonts | \u003C 100 KB | FOIT\u002FFOUT prevention |\n| Third-party | \u003C 200 KB | Uncontrolled latency |\n\n## Critical rendering path\n\n### Server response\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* **Send Early Hints (HTTP 103) for slow origins.** When the origin needs hundreds of milliseconds to assemble the final response, return a `103 Early Hints` with `Link: \u003C\u002Fhero.webp>; rel=preload; as=image` (and similar for critical CSS\u002Ffonts) so the browser starts fetching before the `200 OK` lands. Cloudflare reports [20–30% LCP improvements](https:\u002F\u002Fblog.cloudflare.com\u002Fearly-hints-performance\u002F) on image-heavy pages. Requires HTTP\u002F2+ and is supported by Chromium-based browsers; other browsers ignore the 103 and fall through to the 200 — safe to enable. CDNs (Cloudflare, Fastly, Akamai) can synthesize 103s automatically from prior responses; on your own origin, emit them from the same handler that issues the 200.\n\n### Resource loading\n\n**Preconnect to required origins:**\n```html\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fcdn.example.com\" crossorigin>\n```\n\n**Preload critical resources:**\n```html\n\u003C!-- LCP image -->\n\u003Clink rel=\"preload\" href=\"\u002Fhero.webp\" as=\"image\" fetchpriority=\"high\">\n\n\u003C!-- Critical font -->\n\u003Clink rel=\"preload\" href=\"\u002Ffont.woff2\" as=\"font\" type=\"font\u002Fwoff2\" crossorigin>\n```\n\n**Prerender likely-next navigations** with the [Speculation Rules API](https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fweb-platform\u002Fprerender-pages):\n```html\n\u003Cscript type=\"speculationrules\">\n{\n  \"prerender\": [{\n    \"where\": { \"href_matches\": \"\u002F*\" },\n    \"eagerness\": \"moderate\"\n  }]\n}\n\u003C\u002Fscript>\n```\n`moderate` triggers after a ~200ms hover — usually intent-correlated, rarely wasted. See [core-web-vitals → LCP](..\u002Fcore-web-vitals\u002FSKILL.md#lcp-largest-contentful-paint) for the full discussion of eagerness tradeoffs and the `prerenderingchange` gating you'll need for analytics.\n\n**Defer non-critical CSS:**\n```html\n\u003C!-- Critical CSS inlined -->\n\u003Cstyle>\u002F* Above-fold styles *\u002F\u003C\u002Fstyle>\n\n\u003C!-- Non-critical CSS -->\n\u003Clink rel=\"preload\" href=\"\u002Fstyles.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\">\n\u003Cnoscript>\u003Clink rel=\"stylesheet\" href=\"\u002Fstyles.css\">\u003C\u002Fnoscript>\n```\n\n### JavaScript optimization\n\n**Defer non-essential scripts:**\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```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```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| 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```html\n\u003Cpicture>\n  \u003C!-- AVIF for modern browsers -->\n  \u003Csource \n    type=\"image\u002Favif\"\n    srcset=\"hero-400.avif 400w,\n            hero-800.avif 800w,\n            hero-1200.avif 1200w\"\n    sizes=\"(max-width: 600px) 100vw, 50vw\">\n  \n  \u003C!-- WebP fallback -->\n  \u003Csource \n    type=\"image\u002Fwebp\"\n    srcset=\"hero-400.webp 400w,\n            hero-800.webp 800w,\n            hero-1200.webp 1200w\"\n    sizes=\"(max-width: 600px) 100vw, 50vw\">\n  \n  \u003C!-- JPEG fallback -->\n  \u003Cimg \n    src=\"hero-800.jpg\"\n    srcset=\"hero-400.jpg 400w,\n            hero-800.jpg 800w,\n            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\u003C\u002Fpicture>\n```\n\n### LCP image priority\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\n\u003C!-- Below-fold images: lazy loading -->\n\u003Cimg \n  src=\"product.webp\" \n  loading=\"lazy\"\n  decoding=\"async\"\n  alt=\"Product\">\n```\n\n## Font optimization\n\n### Loading strategy\n```css\n\u002F* System font stack as fallback *\u002F\nbody {\n  font-family: 'Custom Font', -apple-system, BlinkMacSystemFont, \n               'Segoe UI', Roboto, 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```html\n\u003Clink rel=\"preload\" href=\"\u002Ffonts\u002Fheading.woff2\" as=\"font\" type=\"font\u002Fwoff2\" crossorigin>\n```\n\n### Variable fonts\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# 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```javascript\n\u002F\u002F Cache-first for static assets\nself.addEventListener('fetch', (event) => {\n  if (event.request.destination === 'image' ||\n      event.request.destination === 'style' ||\n      event.request.destination === 'script') {\n    event.respondWith(\n      caches.match(event.request).then((cached) => {\n        return cached || fetch(event.request).then((response) => {\n          const clone = response.clone();\n          caches.open('static-v1').then((cache) => cache.put(event.request, clone));\n          return response;\n        });\n      })\n    );\n  }\n});\n```\n\n## Runtime performance\n\n### Avoid layout thrashing\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```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```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```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```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```css\n\u002F* On both source and destination pages *\u002F\n@view-transition { navigation: auto; }\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```css\n.product-thumb[data-id=\"42\"], .product-hero { view-transition-name: product-42; }\n```\n\nPair this with Speculation Rules (above) for instant + animated navigations.\n\n## Third-party scripts\n\n### Load strategies\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```html\n\u003C!-- Show static placeholder until interaction -->\n\u003Cdiv class=\"youtube-facade\" \n     data-video-id=\"abc123\" \n     onclick=\"loadYouTube(this)\">\n  \u003Cimg src=\"\u002Fthumbnails\u002Fabc123.jpg\" alt=\"Video title\">\n  \u003Cbutton aria-label=\"Play video\">▶\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n```\n\n## Measurement\n\n### Key metrics\n| Metric | Target | Tool |\n|--------|--------|------|\n| LCP | \u003C 2.5s | Lighthouse, CrUX |\n| FCP | \u003C 1.8s | Lighthouse |\n| Speed Index | \u003C 3.4s | Lighthouse |\n| TBT | \u003C 200ms | Lighthouse |\n| TTI | \u003C 3.8s | Lighthouse |\n\n### Testing commands\n```bash\n# Lighthouse CLI\nnpx lighthouse https:\u002F\u002Fexample.com --output html --output-path report.html\n\n# Web Vitals library\nimport {onLCP, onINP, onCLS} from 'web-vitals';\nonLCP(console.log);\nonINP(console.log);\nonCLS(console.log);\n```\n\n## References\n\nFor Core Web Vitals specific optimizations, see [Core Web Vitals](..\u002Fcore-web-vitals\u002FSKILL.md).\n","# Performance optimization\n\nDeep performance optimization based on Lighthouse performance audits. Focuses on loading speed, runtime efficiency, and resource optimization.\n\n## How it works\n\n1. Identify performance bottlenecks in code and assets\n2. Prioritize by impact on Core Web Vitals\n3. Provide specific optimizations with code examples\n4. Measure improvement with before\u002Fafter metrics\n\n## Performance budget\n\n| Resource | Budget | Rationale |\n|----------|--------|-----------|\n| Total page weight | \u003C 1.5 MB | 3G loads in ~4s |\n| JavaScript (compressed) | \u003C 300 KB | Parsing + execution time |\n| CSS (compressed) | \u003C 100 KB | Render blocking |\n| Images (above-fold) | \u003C 500 KB | LCP impact |\n| Fonts | \u003C 100 KB | FOIT\u002FFOUT prevention |\n| Third-party | \u003C 200 KB | Uncontrolled latency |\n\n## Critical rendering path\n\n### Server response\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* **Send Early Hints (HTTP 103) for slow origins.** When the origin needs hundreds of milliseconds to assemble the final response, return a `103 Early Hints` with `Link: \u003C\u002Fhero.webp>; rel=preload; as=image` (and similar for critical CSS\u002Ffonts) so the browser starts fetching before the `200 OK` lands. Cloudflare reports [20–30% LCP improvements](https:\u002F\u002Fblog.cloudflare.com\u002Fearly-hints-performance\u002F) on image-heavy pages. Requires HTTP\u002F2+ and is supported by Chromium-based browsers; other browsers ignore the 103 and fall through to the 200 — safe to enable. CDNs (Cloudflare, Fastly, Akamai) can synthesize 103s automatically from prior responses; on your own origin, emit them from the same handler that issues the 200.\n\n### Resource loading\n\n**Preconnect to required origins:**\n```html\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fcdn.example.com\" crossorigin>\n```\n\n**Preload critical resources:**\n```html\n\u003C!-- LCP image -->\n\u003Clink rel=\"preload\" href=\"\u002Fhero.webp\" as=\"image\" fetchpriority=\"high\">\n\n\u003C!-- Critical font -->\n\u003Clink rel=\"preload\" href=\"\u002Ffont.woff2\" as=\"font\" type=\"font\u002Fwoff2\" crossorigin>\n```\n\n**Prerender likely-next navigations** with the [Speculation Rules API](https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fweb-platform\u002Fprerender-pages):\n```html\n\u003Cscript type=\"speculationrules\">\n{\n  \"prerender\": [{\n    \"where\": { \"href_matches\": \"\u002F*\" },\n    \"eagerness\": \"moderate\"\n  }]\n}\n\u003C\u002Fscript>\n```\n`moderate` triggers after a ~200ms hover — usually intent-correlated, rarely wasted. See [core-web-vitals → LCP](..\u002Fcore-web-vitals\u002FSKILL.md#lcp-largest-contentful-paint) for the full discussion of eagerness tradeoffs and the `prerenderingchange` gating you'll need for analytics.\n\n**Defer non-critical CSS:**\n```html\n\u003C!-- Critical CSS inlined -->\n\u003Cstyle>\u002F* Above-fold styles *\u002F\u003C\u002Fstyle>\n\n\u003C!-- Non-critical CSS -->\n\u003Clink rel=\"preload\" href=\"\u002Fstyles.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\">\n\u003Cnoscript>\u003Clink rel=\"stylesheet\" href=\"\u002Fstyles.css\">\u003C\u002Fnoscript>\n```\n\n### JavaScript optimization\n\n**Defer non-essential scripts:**\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```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```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| 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```html\n\u003Cpicture>\n  \u003C!-- AVIF for modern browsers -->\n  \u003Csource \n    type=\"image\u002Favif\"\n    srcset=\"hero-400.avif 400w,\n            hero-800.avif 800w,\n            hero-1200.avif 1200w\"\n    sizes=\"(max-width: 600px) 100vw, 50vw\">\n  \n  \u003C!-- WebP fallback -->\n  \u003Csource \n    type=\"image\u002Fwebp\"\n    srcset=\"hero-400.webp 400w,\n            hero-800.webp 800w,\n            hero-1200.webp 1200w\"\n    sizes=\"(max-width: 600px) 100vw, 50vw\">\n  \n  \u003C!-- JPEG fallback -->\n  \u003Cimg \n    src=\"hero-800.jpg\"\n    srcset=\"hero-400.jpg 400w,\n            hero-800.jpg 800w,\n            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\u003C\u002Fpicture>\n```\n\n### LCP image priority\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\n\u003C!-- Below-fold images: lazy loading -->\n\u003Cimg \n  src=\"product.webp\" \n  loading=\"lazy\"\n  decoding=\"async\"\n  alt=\"Product\">\n```\n\n## Font optimization\n\n### Loading strategy\n```css\n\u002F* System font stack as fallback *\u002F\nbody {\n  font-family: 'Custom Font', -apple-system, BlinkMacSystemFont, \n               'Segoe UI', Roboto, 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```html\n\u003Clink rel=\"preload\" href=\"\u002Ffonts\u002Fheading.woff2\" as=\"font\" type=\"font\u002Fwoff2\" crossorigin>\n```\n\n### Variable fonts\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# 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```javascript\n\u002F\u002F Cache-first for static assets\nself.addEventListener('fetch', (event) => {\n  if (event.request.destination === 'image' ||\n      event.request.destination === 'style' ||\n      event.request.destination === 'script') {\n    event.respondWith(\n      caches.match(event.request).then((cached) => {\n        return cached || fetch(event.request).then((response) => {\n          const clone = response.clone();\n          caches.open('static-v1').then((cache) => cache.put(event.request, clone));\n          return response;\n        });\n      })\n    );\n  }\n});\n```\n\n## Runtime performance\n\n### Avoid layout thrashing\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```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```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```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```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```css\n\u002F* On both source and destination pages *\u002F\n@view-transition { navigation: auto; }\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```css\n.product-thumb[data-id=\"42\"], .product-hero { view-transition-name: product-42; }\n```\n\nPair this with Speculation Rules (above) for instant + animated navigations.\n\n## Third-party scripts\n\n### Load strategies\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```html\n\u003C!-- Show static placeholder until interaction -->\n\u003Cdiv class=\"youtube-facade\" \n     data-video-id=\"abc123\" \n     onclick=\"loadYouTube(this)\">\n  \u003Cimg src=\"\u002Fthumbnails\u002Fabc123.jpg\" alt=\"Video title\">\n  \u003Cbutton aria-label=\"Play video\">▶\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n```\n\n## Measurement\n\n### Key metrics\n| Metric | Target | Tool |\n|--------|--------|------|\n| LCP | \u003C 2.5s | Lighthouse, CrUX |\n| FCP | \u003C 1.8s | Lighthouse |\n| Speed Index | \u003C 3.4s | Lighthouse |\n| TBT | \u003C 200ms | Lighthouse |\n| TTI | \u003C 3.8s | Lighthouse |\n\n### Testing commands\n```bash\n# Lighthouse CLI\nnpx lighthouse https:\u002F\u002Fexample.com --output html --output-path report.html\n\n# Web Vitals library\nimport {onLCP, onINP, onCLS} from 'web-vitals';\nonLCP(console.log);\nonINP(console.log);\nonCLS(console.log);\n```\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":31,"description":7},{"author":32,"version":33},"web-quality-skills","1.0","main","218944972a37a59fccc9ee1474e524ddc83048aa",".agents\u002Fskills\u002Fperformance","https:\u002F\u002Fgithub.com\u002Fwolfstar-project\u002Fwolfstar.rocks","https:\u002F\u002Fwolfstar.rocks","https:\u002F\u002Fgithub.com\u002Fwolfstar-project","https:\u002F\u002Fwww.wolfstar.rocks","All projects for bot WolfStar","2026-11-14 03:21:46",{"source":8,"skillName":5,"commands":44,"prompt":54,"zipAvailable":55},[45,48,51],{"tool":46,"command":47},"npx","npx skills add wolfstar-project\u002Fwolfstar.rocks --skill performance",{"tool":49,"command":50},"bunx","bunx skills add wolfstar-project\u002Fwolfstar.rocks --skill performance",{"tool":52,"command":53},"pnpm","pnpm dlx skills add wolfstar-project\u002Fwolfstar.rocks --skill performance","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fwolfstar-project\u002Fwolfstar.rocks\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fperformance\u002FSKILL.md",true,[57,63,69],{"path":58,"resourceType":59,"resourceTypeDesc":60,"sizeBytes":61,"sourceHtmlUrl":62},"assets\u002FREADME.md","ASSET","资产文件",373,"https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Fplugins-community\u002Fplugins\u002Fdevops\u002Fgitops-workflow-builder\u002Fskills\u002Fbuilding-gitops-workflows\u002Fassets\u002FREADME.md",{"path":64,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":67,"sourceHtmlUrl":68},"references\u002FREADME.md","REFERENCE","参考文档",466,"https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Fplugins-community\u002Fplugins\u002Fdevops\u002Fgitops-workflow-builder\u002Fskills\u002Fbuilding-gitops-workflows\u002Freferences\u002FREADME.md",{"path":70,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":73,"sourceHtmlUrl":74},"scripts\u002FREADME.md","SCRIPT","脚本",328,"https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Fplugins-community\u002Fplugins\u002Fdevops\u002Fgitops-workflow-builder\u002Fskills\u002Fbuilding-gitops-workflows\u002Fscripts\u002FREADME.md",[76,98,119,139,153,164],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":80,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":93,"publishedAt":26},"01M6BY9H7CDDKSGQ7G6SG7H7VW","writing-plans","Use when you have a spec or requirements for a multi-step task, before touching code","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fwolfstar-project\u002Fwolfstar.rocks\u002Fblob\u002Fmain\u002F.skills\u002Fwriting-plans\u002FSKILL.md",[83,88],{"categoryNo":84,"categoryName":85,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000018","写作与文案","SCENARIO","使用场景",{"categoryNo":89,"categoryName":90,"taxonomyType":91,"taxonomyTypeDesc":92},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[94,95,96,97],"writing","writing plans","code","spec",{"skillNo":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":110,"publishedAt":26},"01M6BY9C1NMAWJYQV2AG9Z50JD","web-quality-audit","Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to \"audit my site\", \"review web quality\", \"run lighthouse audit\", \"check page quality\", or \"optimize my website\".","https:\u002F\u002Fgithub.com\u002Fwolfstar-project\u002Fwolfstar.rocks\u002Fblob\u002Fmain\u002F.skills\u002Fweb-quality-audit\u002FSKILL.md",[104,107],{"categoryNo":105,"categoryName":106,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":108,"categoryName":109,"taxonomyType":91,"taxonomyTypeDesc":92},"01JBSEEDCAT000000000000035","市场营销",[21,111,19,25,5,112,113,114,115,116,117,118,23,24],"web quality audit","accessibility","run","review","best practices","website","seo","Lighthouse",{"skillNo":120,"name":121,"nameZh":6,"description":122,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":80,"licenseFileUrl":6,"sourceHtmlUrl":123,"categories":124,"keywords":131,"publishedAt":26},"01M6BY99BPGY7PGAJNJBSA43VC","web-design-guidelines","Review UI code for Web Interface Guidelines compliance. Use when asked to \"review my UI\", \"check accessibility\", \"audit design\", \"review UX\", or \"check my site against best practices\".","https:\u002F\u002Fgithub.com\u002Fwolfstar-project\u002Fwolfstar.rocks\u002Fblob\u002Fmain\u002F.skills\u002Fweb-design-guidelines\u002FSKILL.md",[125,128],{"categoryNo":126,"categoryName":127,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":129,"categoryName":130,"taxonomyType":91,"taxonomyTypeDesc":92},"01JBSEEDCAT000000000000032","设计师",[132,19,133,134,114,23,112,96,115,135,136,21,137,138],"guidelines","design","web design guidelines","ux","file","ui","compliance",{"skillNo":140,"name":141,"nameZh":6,"description":142,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":80,"licenseFileUrl":6,"sourceHtmlUrl":143,"categories":144,"keywords":149,"publishedAt":26},"01M6BY96B8TTMXB77QSZ4RG44C","test-driven-development","Use when implementing any feature or bugfix, before writing implementation code","https:\u002F\u002Fgithub.com\u002Fwolfstar-project\u002Fwolfstar.rocks\u002Fblob\u002Fmain\u002F.skills\u002Ftest-driven-development\u002FSKILL.md",[145,148],{"categoryNo":146,"categoryName":147,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":84,"categoryName":85,"taxonomyType":86,"taxonomyTypeDesc":87},[150,151,152,94,96],"development","test driven development","test",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":80,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":159,"publishedAt":26},"01M6BY9415MPKFMGTNR996N2YX","tdd","Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions \"red-green-refactor\", or wants integration tests.","https:\u002F\u002Fgithub.com\u002Fwolfstar-project\u002Fwolfstar.rocks\u002Fblob\u002Fmain\u002F.skills\u002Ftdd\u002FSKILL.md",[],[155,152,160,150,161,162,163],"integration tests","integration","refactor","first",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":80,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":171,"publishedAt":26},"01M6BY91BK1ER9EV193FCVHY88","systematic-debugging","Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes","https:\u002F\u002Fgithub.com\u002Fwolfstar-project\u002Fwolfstar.rocks\u002Fblob\u002Fmain\u002F.skills\u002Fsystematic-debugging\u002FSKILL.md",[170],{"categoryNo":146,"categoryName":147,"taxonomyType":86,"taxonomyTypeDesc":87},[172,173,152],"systematic debugging","debugging"]