{"id":"performance","name":"performance","summary":"ウェブパフォーマンスを最適化し、より高速な読み込みとより良いユーザー体験を実現します。「サイトのスピードアップ」「パフォーマンス最適化」「ロード時間短縮」「読み込みの遅さの修正」「ページ速度の改善」「パフォーマンス監査」などを求められたときに使ってください。","body":"# 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/after metrics\n\n## Performance budget\n\n| Resource | Budget | Rationale |\n|----------|--------|-----------|\n| Total page weight | < 1.5 MB | 3G loads in ~4s |\n| JavaScript (compressed) | < 300 KB | Parsing + execution time |\n| CSS (compressed) | < 100 KB | Render blocking |\n| Images (above-fold) | < 500 KB | LCP impact |\n| Fonts | < 100 KB | FOIT/FOUT prevention |\n| Third-party | < 200 KB | Uncontrolled latency |\n\n## Critical rendering path\n\n### Server response\n* **TTFB < 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/2 or HTTP/3.** 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: ; rel=preload; as=image` (and similar for critical CSS/fonts) so the browser starts fetching before the `200 OK` lands. Cloudflare reports [20–30% LCP improvements](https://blog.cloudflare.com/early-hints-performance/) on image-heavy pages. Requires HTTP/2+ 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\n\n```\n\n**Preload critical resources:**\n```html\n\n\n\n\n\n```\n\n**Prerender likely-next navigations** with the [Speculation Rules API](https://developer.chrome.com/docs/web-platform/prerender-pages):\n```html\n\n```\n`moderate` triggers after a ~200ms hover — usually intent-correlated, rarely wasted. See [core-web-vitals → LCP](../core-web-vitals/SKILL.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\n\n\n\n\n\n```\n\n### JavaScript optimization\n\n**Defer non-essential scripts:**\n```html\n\n\n\n\n\n\n\n\n\n\n\n```\n\n**Code splitting patterns:**\n```javascript\n// Route-based splitting\nconst Dashboard = lazy(() => import('./Dashboard'));\n\n// Component-based splitting\nconst HeavyChart = lazy(() => import('./HeavyChart'));\n\n// Feature-based splitting\nif (user.isPremium) {\n const PremiumFeatures = await import('./PremiumFeatures');\n}\n```\n\n**Tree shaking best practices:**\n```javascript\n// ❌ Imports entire library\nimport _ from 'lodash';\n_.debounce(fn, 300);\n\n// ✅ Imports only what's needed\nimport debounce from 'lodash/debounce';\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\n \n \n \n \n \n \n \n \"Hero\n\n```\n\n### LCP image priority\n```html\n\n\"Hero\"\n\n\n\"Product\"\n```\n\n## Font optimization\n\n### Loading strategy\n```css\n/* System font stack as fallback */\nbody {\n font-family: 'Custom Font', -apple-system, BlinkMacSystemFont, \n 'Segoe UI', Roboto, sans-serif;\n}\n\n/* Prevent invisible text */\n@font-face {\n font-family: 'Custom Font';\n src: url('/fonts/custom.woff2') format('woff2');\n font-display: swap; /* or optional for non-critical */\n font-weight: 400;\n font-style: normal;\n unicode-range: U+0000-00FF; /* Subset to Latin */\n}\n```\n\n### Preloading critical fonts\n```html\n\n```\n\n### Variable fonts\n```css\n/* One file instead of multiple weights */\n@font-face {\n font-family: 'Inter';\n src: url('/fonts/Inter-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// 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// ❌ Forces multiple reflows\nelements.forEach(el => {\n const height = el.offsetHeight; // Read\n el.style.height = height + 10 + 'px'; // Write\n});\n\n// ✅ Batch reads, then batch writes\nconst heights = elements.map(el => el.offsetHeight); // All reads\nelements.forEach((el, i) => {\n el.style.height = heights[i] + 10 + 'px'; // 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// Debounce scroll/resize handlers\nwindow.addEventListener('scroll', debounce(handleScroll, 100));\n```\n\n### Use requestAnimationFrame\n```javascript\n// ❌ May cause jank\nsetInterval(animate, 16);\n\n// ✅ Synced with display refresh\nfunction animate() {\n // Animation logic\n requestAnimationFrame(animate);\n}\nrequestAnimationFrame(animate);\n```\n\n### Virtualize long lists\n```javascript\n// For lists > 100 items, render only visible items\n// Use libraries like react-window, vue-virtual-scroller, or native CSS:\n.virtual-list {\n content-visibility: auto;\n contain-intrinsic-size: 0 50px; /* Estimated item height */\n}\n```\n\n### Smooth navigations with View Transitions\n\nThe [View Transitions API](https://developer.chrome.com/docs/web-platform/view-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// 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/* On both source and destination pages */\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// ❌ Blocks main thread\n\n\n// ✅ Async loading\n\n\n// ✅ Delay until interaction\n\n```\n\n### Facade pattern\n```html\n\n
\n \"Video\n \n
\n```\n\n## Measurement\n\n### Key metrics\n| Metric | Target | Tool |\n|--------|--------|------|\n| LCP | < 2.5s | Lighthouse, CrUX |\n| FCP | < 1.8s | Lighthouse |\n| Speed Index | < 3.4s | Lighthouse |\n| TBT | < 200ms | Lighthouse |\n| TTI | < 3.8s | Lighthouse |\n\n### Testing commands\n```bash\n# Lighthouse CLI\nnpx lighthouse https://example.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](../core-web-vitals/SKILL.md).","author":"@addyosmani","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/addyosmani/web-quality-skills/tree/main/skills/performance","license":"MIT","category":"review","lang":"en","tokens":2872,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":["analytics.example.com","blog.cloudflare.com","cdn.example.com","developer.chrome.com","widget.example.com"]}}