[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FJ97VTJW8CS8Y94DJB7RJD":3,"skill-same:01M6FJ97VTJW8CS8Y94DJB7RJD":49},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":22,"linkOnly":23,"markdownContent":24,"markdownBody":24,"frontMatter":25,"refName":26,"commitSha":27,"skillDirectory":28,"forksCount":29,"repositoryHtmlUrl":30,"repositoryHomepageUrl":31,"ownerHtmlUrl":32,"ownerBlogUrl":6,"ownerDescription":33,"updatedAt":34,"install":35,"resources":48},"01M6FJ97VTJW8CS8Y94DJB7RJD","perf-web-optimization",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Ftech-leads-club\u002Fagent-skills\u002Fperf-web-optimization\u002FSKILL.md",[],[18,19,20,21],"web","perf","Optimization","perf web optimization","2026-11-10 10:12:30",false,"# Web Performance Optimization\n\nSystematic approach: Measure → Identify → Prioritize → Implement → Verify.\n\n## Target Metrics\n\n| Metric | Good    | Needs Work | Poor    |\n| ------ | ------- | ---------- | ------- |\n| LCP    | \u003C 2.5s  | 2.5-4s     | > 4s    |\n| INP    | \u003C 200ms | 200-500ms  | > 500ms |\n| CLS    | \u003C 0.1   | 0.1-0.25   | > 0.25  |\n| TTFB   | \u003C 800ms | 800ms-1.8s | > 1.8s  |\n\n## Quick Wins\n\n### 1. Images (usually biggest impact on LCP)\n\n```html\n\u003C!-- Hero\u002FLCP image: eager + high priority -->\n\u003Cimg src=\"\u002Fhero.webp\" alt=\"Hero\" width=\"1200\" height=\"600\" loading=\"eager\" fetchpriority=\"high\" decoding=\"async\" \u002F>\n\n\u003C!-- Below fold: lazy load -->\n\u003Cimg src=\"\u002Fproduct.webp\" alt=\"Product\" width=\"400\" height=\"300\" loading=\"lazy\" decoding=\"async\" \u002F>\n```\n\nAlways set `width` and `height` to prevent CLS.\n\n### 2. Fonts (common LCP\u002FCLS culprit)\n\n```html\n\u003C!-- Preconnect to font origin -->\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin \u002F>\n\n\u003C!-- Non-blocking font load -->\n\u003Clink\n  rel=\"stylesheet\"\n  href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter&display=swap\"\n  media=\"print\"\n  onload=\"this.media='all'\"\n\u002F>\n```\n\n### 3. Third-party Scripts (common INP killer)\n\n```html\n\u003C!-- Defer to user interaction -->\n\u003Cscript>\n  function loadThirdParty() {\n    \u002F\u002F Load analytics, chat widgets, etc.\n  }\n  ;['scroll', 'click', 'touchstart'].forEach((e) => addEventListener(e, loadThirdParty, { once: true, passive: true }))\n  setTimeout(loadThirdParty, 5000)\n\u003C\u002Fscript>\n```\n\n### 4. Critical CSS\n\nInline critical CSS in `\u003Chead>`, defer the rest:\n\n```html\n\u003Cstyle>\n  \u002F* critical styles *\u002F\n\u003C\u002Fstyle>\n\u003Clink rel=\"preload\" href=\"\u002Fstyles.css\" as=\"style\" onload=\"this.rel='stylesheet'\" \u002F>\n```\n\n## Bundle Analysis\n\n```bash\n# Webpack\nnpx webpack-bundle-analyzer dist\u002Fstats.json\n\n# Vite\nnpx vite-bundle-visualizer\n\n# Check package size before installing\nnpx bundlephobia \u003Cpackage-name>\n```\n\nCommon heavy packages to replace:\n\n- `moment` (67KB) → `date-fns` (12KB) or `dayjs` (2KB)\n- `lodash` (72KB) → cherry-pick imports or native methods\n\n## Code Splitting Patterns\n\n```javascript\n\u002F\u002F React lazy\nconst Chart = lazy(() => import('.\u002FChart'))\n\n\u002F\u002F Next.js dynamic\nconst Admin = dynamic(() => import('.\u002FAdmin'), { ssr: false })\n\n\u002F\u002F Vite\u002FRollup manual chunks\nbuild: {\n  rollupOptions: {\n    output: {\n      manualChunks: {\n        vendor: ['react', 'react-dom']\n      }\n    }\n  }\n}\n```\n\n## Caching Headers\n\n```\n# Static assets (immutable hash in filename)\nCache-Control: public, max-age=31536000, immutable\n\n# HTML (revalidate)\nCache-Control: no-cache\n\n# API responses\nCache-Control: private, max-age=0, must-revalidate\n```\n\n## Measurement\n\nFor running audits, reading reports, and setting budgets, use the **perf-lighthouse** skill.\n\n## Checklist\n\n### Images\n\n- [ ] Modern formats (WebP\u002FAVIF)\n- [ ] Responsive `srcset`\n- [ ] `width`\u002F`height` attributes\n- [ ] `loading=\"lazy\"` below fold\n- [ ] `fetchpriority=\"high\"` on LCP image\n\n### JavaScript\n\n- [ ] Bundle \u003C 200KB gzipped\n- [ ] Code splitting by route\n- [ ] Third-party scripts deferred\n- [ ] No unused dependencies\n\n### CSS\n\n- [ ] Critical CSS inlined\n- [ ] Non-critical CSS deferred\n- [ ] No unused CSS\n\n### Fonts\n\n- [ ] `font-display: swap`\n- [ ] Preconnect to font origin\n- [ ] Subset if possible\n\n## Detailed Examples\n\nFor in-depth optimization patterns, see:\n\n- [references\u002Fcore-web-vitals.md](references\u002Fcore-web-vitals.md) - Fixing LCP, CLS, INP issues\n- [references\u002Fbundle-optimization.md](references\u002Fbundle-optimization.md) - Reducing JS bundle size\n- [references\u002Fimage-optimization.md](references\u002Fimage-optimization.md) - Image formats, responsive images, sharp scripts\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Ftech-leads-club\u002Fagent-skills\u002Fperf-web-optimization",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":36,"prompt":46,"zipAvailable":47},[37,40,43],{"tool":38,"command":39},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill perf-web-optimization",{"tool":41,"command":42},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill perf-web-optimization",{"tool":44,"command":45},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill perf-web-optimization","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Ftech-leads-club\u002Fagent-skills\u002Fperf-web-optimization\u002FSKILL.md",true,[],[50,64,74,83,89,96],{"skillNo":51,"name":52,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":53,"categories":54,"keywords":60,"publishedAt":22},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[55],{"categoryNo":56,"categoryName":57,"taxonomyType":58,"taxonomyTypeDesc":59},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[61,62,63],"model","model hierarchy","model hierarchy skill",{"skillNo":65,"name":66,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":67,"categories":68,"keywords":70,"publishedAt":22},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[69],{"categoryNo":56,"categoryName":57,"taxonomyType":58,"taxonomyTypeDesc":59},[71,72,73],"MCP","zoom","zoom mcp",{"skillNo":75,"name":76,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":79,"publishedAt":22},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[80,81,82,72],"sdk","zoom apps sdk","apps",{"skillNo":84,"name":85,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":22},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[85],{"skillNo":90,"name":91,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":95,"publishedAt":22},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[94],{"categoryNo":56,"categoryName":57,"taxonomyType":58,"taxonomyTypeDesc":59},[91],{"skillNo":97,"name":98,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":22},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[98]]