[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FDK8Z4ESTP3QBVAGSMCMWE":3,"skill-same:01M6FDK8Z4ESTP3QBVAGSMCMWE":45},{"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":18,"linkOnly":19,"markdownContent":20,"markdownBody":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6FDK8Z4ESTP3QBVAGSMCMWE","optimize",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fmxyhi\u002Fok-skills\u002Foptimize\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"Identify and fix performance issues to create faster, smoother user experiences.\n\n## Assess Performance Issues\n\nUnderstand current performance and identify problems:\n\n1. **Measure current state**:\n   - **Core Web Vitals**: LCP, FID\u002FINP, CLS scores\n   - **Load time**: Time to interactive, first contentful paint\n   - **Bundle size**: JavaScript, CSS, image sizes\n   - **Runtime performance**: Frame rate, memory usage, CPU usage\n   - **Network**: Request count, payload sizes, waterfall\n\n2. **Identify bottlenecks**:\n   - What's slow? (Initial load? Interactions? Animations?)\n   - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?)\n   - How bad is it? (Perceivable? Annoying? Blocking?)\n   - Who's affected? (All users? Mobile only? Slow connections?)\n\n**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters.\n\n## Optimization Strategy\n\nCreate systematic improvement plan:\n\n### Loading Performance\n\n**Optimize Images**:\n- Use modern formats (WebP, AVIF)\n- Proper sizing (don't load 3000px image for 300px display)\n- Lazy loading for below-fold images\n- Responsive images (`srcset`, `picture` element)\n- Compress images (80-85% quality is usually imperceptible)\n- Use CDN for faster delivery\n\n```html\n\u003Cimg \n  src=\"hero.webp\"\n  srcset=\"hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w\"\n  sizes=\"(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px\"\n  loading=\"lazy\"\n  alt=\"Hero image\"\n\u002F>\n```\n\n**Reduce JavaScript Bundle**:\n- Code splitting (route-based, component-based)\n- Tree shaking (remove unused code)\n- Remove unused dependencies\n- Lazy load non-critical code\n- Use dynamic imports for large components\n\n```javascript\n\u002F\u002F Lazy load heavy component\nconst HeavyChart = lazy(() => import('.\u002FHeavyChart'));\n```\n\n**Optimize CSS**:\n- Remove unused CSS\n- Critical CSS inline, rest async\n- Minimize CSS files\n- Use CSS containment for independent regions\n\n**Optimize Fonts**:\n- Use `font-display: swap` or `optional`\n- Subset fonts (only characters you need)\n- Preload critical fonts\n- Use system fonts when appropriate\n- Limit font weights loaded\n\n```css\n@font-face {\n  font-family: 'CustomFont';\n  src: url('\u002Ffonts\u002Fcustom.woff2') format('woff2');\n  font-display: swap; \u002F* Show fallback immediately *\u002F\n  unicode-range: U+0020-007F; \u002F* Basic Latin only *\u002F\n}\n```\n\n**Optimize Loading Strategy**:\n- Critical resources first (async\u002Fdefer non-critical)\n- Preload critical assets\n- Prefetch likely next pages\n- Service worker for offline\u002Fcaching\n- HTTP\u002F2 or HTTP\u002F3 for multiplexing\n\n### Rendering Performance\n\n**Avoid Layout Thrashing**:\n```javascript\n\u002F\u002F ❌ Bad: Alternating reads and writes (causes reflows)\nelements.forEach(el => {\n  const height = el.offsetHeight; \u002F\u002F Read (forces layout)\n  el.style.height = height * 2; \u002F\u002F Write\n});\n\n\u002F\u002F ✅ Good: 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] * 2; \u002F\u002F All writes\n});\n```\n\n**Optimize Rendering**:\n- Use CSS `contain` property for independent regions\n- Minimize DOM depth (flatter is faster)\n- Reduce DOM size (fewer elements)\n- Use `content-visibility: auto` for long lists\n- Virtual scrolling for very long lists (react-window, react-virtualized)\n\n**Reduce Paint & Composite**:\n- Use `transform` and `opacity` for animations (GPU-accelerated)\n- Avoid animating layout properties (width, height, top, left)\n- Use `will-change` sparingly for known expensive operations\n- Minimize paint areas (smaller is faster)\n\n### Animation Performance\n\n**GPU Acceleration**:\n```css\n\u002F* ✅ GPU-accelerated (fast) *\u002F\n.animated {\n  transform: translateX(100px);\n  opacity: 0.5;\n}\n\n\u002F* ❌ CPU-bound (slow) *\u002F\n.animated {\n  left: 100px;\n  width: 300px;\n}\n```\n\n**Smooth 60fps**:\n- Target 16ms per frame (60fps)\n- Use `requestAnimationFrame` for JS animations\n- Debounce\u002Fthrottle scroll handlers\n- Use CSS animations when possible\n- Avoid long-running JavaScript during animations\n\n**Intersection Observer**:\n```javascript\n\u002F\u002F Efficiently detect when elements enter viewport\nconst observer = new IntersectionObserver((entries) => {\n  entries.forEach(entry => {\n    if (entry.isIntersecting) {\n      \u002F\u002F Element is visible, lazy load or animate\n    }\n  });\n});\n```\n\n### React\u002FFramework Optimization\n\n**React-specific**:\n- Use `memo()` for expensive components\n- `useMemo()` and `useCallback()` for expensive computations\n- Virtualize long lists\n- Code split routes\n- Avoid inline function creation in render\n- Use React DevTools Profiler\n\n**Framework-agnostic**:\n- Minimize re-renders\n- Debounce expensive operations\n- Memoize computed values\n- Lazy load routes and components\n\n### Network Optimization\n\n**Reduce Requests**:\n- Combine small files\n- Use SVG sprites for icons\n- Inline small critical assets\n- Remove unused third-party scripts\n\n**Optimize APIs**:\n- Use pagination (don't load everything)\n- GraphQL to request only needed fields\n- Response compression (gzip, brotli)\n- HTTP caching headers\n- CDN for static assets\n\n**Optimize for Slow Connections**:\n- Adaptive loading based on connection (navigator.connection)\n- Optimistic UI updates\n- Request prioritization\n- Progressive enhancement\n\n## Core Web Vitals Optimization\n\n### Largest Contentful Paint (LCP \u003C 2.5s)\n- Optimize hero images\n- Inline critical CSS\n- Preload key resources\n- Use CDN\n- Server-side rendering\n\n### First Input Delay (FID \u003C 100ms) \u002F INP (\u003C 200ms)\n- Break up long tasks\n- Defer non-critical JavaScript\n- Use web workers for heavy computation\n- Reduce JavaScript execution time\n\n### Cumulative Layout Shift (CLS \u003C 0.1)\n- Set dimensions on images and videos\n- Don't inject content above existing content\n- Use `aspect-ratio` CSS property\n- Reserve space for ads\u002Fembeds\n- Avoid animations that cause layout shifts\n\n```css\n\u002F* Reserve space for image *\u002F\n.image-container {\n  aspect-ratio: 16 \u002F 9;\n}\n```\n\n## Performance Monitoring\n\n**Tools to use**:\n- Chrome DevTools (Lighthouse, Performance panel)\n- WebPageTest\n- Core Web Vitals (Chrome UX Report)\n- Bundle analyzers (webpack-bundle-analyzer)\n- Performance monitoring (Sentry, DataDog, New Relic)\n\n**Key metrics**:\n- LCP, FID\u002FINP, CLS (Core Web Vitals)\n- Time to Interactive (TTI)\n- First Contentful Paint (FCP)\n- Total Blocking Time (TBT)\n- Bundle size\n- Request count\n\n**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative.\n\n**NEVER**:\n- Optimize without measuring (premature optimization)\n- Sacrifice accessibility for performance\n- Break functionality while optimizing\n- Use `will-change` everywhere (creates new layers, uses memory)\n- Lazy load above-fold content\n- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first)\n- Forget about mobile performance (often slower devices, slower connections)\n\n## Verify Improvements\n\nTest that optimizations worked:\n\n- **Before\u002Fafter metrics**: Compare Lighthouse scores\n- **Real user monitoring**: Track improvements for real users\n- **Different devices**: Test on low-end Android, not just flagship iPhone\n- **Slow connections**: Throttle to 3G, test experience\n- **No regressions**: Ensure functionality still works\n- **User perception**: Does it *feel* faster?\n\nRemember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fmxyhi\u002Fok-skills\u002Foptimize",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":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill optimize",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill optimize",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill optimize","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fmxyhi\u002Fok-skills\u002Foptimize\u002FSKILL.md",true,[],[46,60,70,79,85,92],{"skillNo":47,"name":48,"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":49,"categories":50,"keywords":56,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[51],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[57,58,59],"model","model hierarchy","model hierarchy skill",{"skillNo":61,"name":62,"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":63,"categories":64,"keywords":66,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[65],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[67,68,69],"MCP","zoom","zoom mcp",{"skillNo":71,"name":72,"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":73,"categories":74,"keywords":75,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[76,77,78,68],"sdk","zoom apps sdk","apps",{"skillNo":80,"name":81,"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":82,"categories":83,"keywords":84,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[81],{"skillNo":86,"name":87,"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":88,"categories":89,"keywords":91,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[90],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[87],{"skillNo":93,"name":94,"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":95,"categories":96,"keywords":97,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[94]]