{"id":"4b45f7a4-2ec0-41b1-8880-5c61b91621b4","shortId":"TJhhZJ","kind":"skill","title":"performance-optimization","tagline":"Diagnose and fix web performance issues including Core Web Vitals (LCP, INP, CLS), bundle size, asset optimization, render performance, and runtime efficiency. Use this skill whenever the user wants to improve page speed, fix Core Web Vitals, optimize assets, reduce bundle size, ","description":"# Performance Optimization\n\nDiagnose web performance issues and produce a remediation plan. Stack-agnostic. Anchored to Core Web Vitals and standard browser performance patterns.\n\nThis skill goes deeper than the performance checks in `qa-testing` and `seo-technical`. Use this when performance itself is the goal.\n\n---\n\n## When to use\n\n- Fixing Core Web Vitals (LCP, INP, CLS)\n- Diagnosing slow page loads\n- Reducing JavaScript bundle size\n- Optimizing images, fonts, and other assets\n- Fixing layout shift, render-blocking resources, jank\n- Pre-launch performance verification\n- Annual performance health check\n\n## When NOT to use\n\n- General QA after deploys (use `qa-testing`)\n- Technical SEO including indexing and crawling (use `seo-technical`)\n- Code review for general bugs (use `code-review-web`)\n\n---\n\n## Required inputs\n\n- The site or page under audit\n- Specific performance complaints if any\n- Target metrics (Core Web Vitals thresholds, Lighthouse score, custom)\n- Browser dev tools access\n- Performance monitoring data if available (Real User Monitoring, lab data)\n\n---\n\n## The framework: Core Web Vitals\n\nThree metrics carry most of the weight for both user experience and SEO:\n\n### LCP (Largest Contentful Paint)\n\n**What it measures:** Time until the largest visible content element finishes rendering.\n\n**Targets:**\n- Good: under 2.5 seconds\n- Needs improvement: 2.5 to 4.0 seconds\n- Poor: over 4.0 seconds\n\n**Common causes of poor LCP:**\n- Slow server response time (TTFB over 800ms)\n- Render-blocking JavaScript or CSS\n- Large unoptimized images for the LCP element\n- Late-loading fonts that delay text render\n- Client-side rendering of the LCP element\n\n**Common fixes:**\n- Server-render the LCP element (no client-side render)\n- Optimize the LCP image (right format, right size, preloaded)\n- Reduce render-blocking resources (defer non-critical CSS and JS)\n- Use modern image formats (WebP, AVIF)\n- Specify image dimensions to skip layout pass\n\n### INP (Interaction to Next Paint)\n\n**What it measures:** Responsiveness to user interactions. Replaces FID as the standard interactivity metric.\n\n**Targets:**\n- Good: under 200ms\n- Needs improvement: 200 to 500ms\n- Poor: over 500ms\n\n**Common causes of poor INP:**\n- Long-running JavaScript blocking the main thread\n- Heavy event handlers\n- Excessive React/framework re-renders\n- Synchronous operations in event handlers\n- Large DOM with expensive layouts\n\n**Common fixes:**\n- Break long tasks into chunks (`scheduler.yield()` or `setTimeout`)\n- Memoize expensive computations\n- Debounce or throttle high-frequency event handlers (scroll, mousemove, input)\n- Avoid synchronous storage or DOM operations in handlers\n- Reduce DOM size (under 1500 elements ideal)\n- Use CSS over JS for animations where possible\n\n### CLS (Cumulative Layout Shift)\n\n**What it measures:** How much the page jumps around as it loads. Unexpected layout shifts hurt usability.\n\n**Targets:**\n- Good: under 0.1\n- Needs improvement: 0.1 to 0.25\n- Poor: over 0.25\n\n**Common causes of poor CLS:**\n- Images without explicit dimensions\n- Ads, embeds, iframes that load late\n- Dynamically injected content above existing content\n- Web fonts causing FOIT/FOUT (flash of invisible/unstyled text)\n- CSS that depends on JS-loaded data\n\n**Common fixes:**\n- Always specify `width` and `height` (or `aspect-ratio`) on images and videos\n- Reserve space for ads and embeds before they load\n- Use `font-display: optional` or `font-display: swap` thoughtfully\n- Avoid injecting content above the fold after initial render\n- Preload critical fonts\n\n---\n\n## Beyond Core Web Vitals\n\n### Time to First Byte (TTFB)\n\nThe server response time. Bad TTFB makes everything else worse.\n\n**Targets:** under 800ms ideal.\n\n**Common causes:**\n- Slow database queries on the request path\n- N+1 query patterns\n- Missing caching\n- Server geographic distance from users (no CDN)\n- Cold starts on serverless\n\n**Fixes:**\n- Cache database queries\n- Use a CDN for static and cacheable dynamic content\n- Optimize critical-path queries\n- Pre-render where possible (SSG, ISR)\n- Edge functions for low-latency dynamic content\n\n### Bundle size\n\nJavaScript shipped to the browser.\n\n**Targets:**\n- Initial JS under 170KB compressed for typical pages\n- Lazy-loaded chunks under 100KB compressed each\n\n**Common causes of bloat:**\n- Importing entire libraries when only one function is used\n- Bundling polyfills for modern browsers\n- Including dev-only code in production\n- Duplicate dependencies (multiple versions of the same library)\n- Large client-side state (Redux store snapshots, etc.)\n\n**Fixes:**\n- Tree-shake imports (`import { fn } from 'lib'` not `import lib from 'lib'`)\n- Code-split per route\n- Lazy-load below-the-fold components\n- Audit dependencies; replace heavy ones (e.g., moment.js → date-fns or native Intl)\n- Build-time bundle analyzer to spot bloat\n- Dynamic imports for rarely-used features\n\n### Image optimization\n\nImages are typically 60 to 80 percent of page weight.\n\n**Best practices:**\n- Modern formats: WebP everywhere supported, AVIF where supported\n- Responsive images: `srcset` for different viewport sizes\n- Lazy loading: `loading=\"lazy\"` for below-the-fold\n- Explicit dimensions: prevents CLS\n- Right size: don't ship 4000px images for 800px display\n- LCP image: preload, never lazy-load\n\n### Font loading\n\nWeb fonts often delay text render and cause CLS.\n\n**Best practices:**\n- Self-host fonts (avoid third-party blocking)\n- Preload critical fonts (`<link rel=\"preload\" as=\"font\">`)\n- Use `font-display: swap` for non-critical fonts\n- Subset fonts to remove unused glyphs\n- Use variable fonts where possible\n- Provide system-font fallback that visually matches\n\n### Third-party scripts\n\nThird parties (analytics, ads, chat widgets) often dominate performance budgets.\n\n**Audit each:**\n- Is it required?\n- Can it load after page interaction (defer)?\n- Can it run from a worker (off main thread)?\n- Is the third party itself fast?\n- Are there lighter-weight alternatives?\n\nA common pattern: 50 percent of performance issues come from third-party scripts.\n\n---\n\n## Workflow\n\n1. **Establish a baseline.** Lighthouse scan, WebPageTest run, or Real User Monitoring data. Capture current Core Web Vitals.\n2. **Identify the worst offender.** LCP, INP, or CLS - which is failing? Focus there first.\n3. **Diagnose specifically.** Browser dev tools (Performance tab, Network tab, Coverage tab). Identify the actual cause of the metric failure.\n4. **Plan fixes.** Per identified issue, plan a specific change. Estimate impact and effort.\n5. **Implement.** One fix at a time where possible. Easier to measure impact.\n6. **Re-measure.** After each major fix, re-run Lighthouse and check Real User Monitoring.\n7. **Iterate.** Performance is rarely solved in one pass. Plan for ongoing monitoring and fixes.\n\n---\n\n## Tools\n\n**Lab tools** (run on demand):\n- Lighthouse (built into Chrome DevTools)\n- PageSpeed Insights (online)\n- WebPageTest (online, more configurable)\n- Browser Performance tab (deep flame graph analysis)\n\n**Field tools** (real user data):\n- Chrome User Experience Report (CrUX) - public data for any site\n- Real User Monitoring (RUM) - your own users (DataDog, New Relic, custom, etc.)\n- Search Console Core Web Vitals report\n\nLab tools are useful for diagnosis. Field tools are the source of truth for what users actually experience.\n\n---\n\n## Failure patterns\n\n- **Optimizing without measuring.** Performance theater without baseline metrics. Always measure first.\n- **Optimizing the wrong metric.** A great Lighthouse score with bad real-user metrics means your test conditions don't match users.\n- **Over-optimizing.** Spending weeks shaving 10ms off TTFB while CLS is 0.4. Fix the worst offender first.\n- **Lighthouse-driven optimization only.** Lighthouse runs in idealized conditions. Always check field data.\n- **Single-page optimization.** Performance regressions creep in across the codebase. Build performance budgets and CI checks.\n- **Treating every byte as equal.** A render-blocking 100KB script is worse than a deferred 500KB script.\n- **Bundle size obsession.** Bundle size matters, but execution time matters more. A small bundle that takes 5 seconds to parse is worse than a larger bundle that runs fast.\n- **Ignoring third parties.** \"It's the analytics tag, not us.\" Third parties run on your domain in your users' eyes. Own them.\n\n---\n\n## Output format\n\nDefault output is a performance report at `performance-audit.md`.\n\nStructure:\n1. Executive summary\n2. Methodology (tools, conditions, sample pages)\n3. Current state (Core Web Vitals, Lighthouse scores, RUM data)\n4. Critical issues (Core Web Vitals failures)\n5. Important issues (sub-optimal but not failing)\n6. Polish (further-than-required wins)\n7. Remediation roadmap (sequenced)\n8. Performance budget recommendations\n9. Monitoring plan\n\nFor complex audits, include:\n- Per-page Lighthouse exports\n- Bundle analysis output\n- Network waterfall screenshots\n- Specific code snippets to change\n\n---\n\n## Reference files\n\n- [`references/audit-template.md`](references/audit-template.md) - Full performance audit report template.\n- [`references/optimization-checklist.md`](references/optimization-checklist.md) - Quick-reference checklist of common optimizations by priority.\n- [`references/optimization-playbook.md`](references/optimization-playbook.md) - Symptom-to-fix playbook for the common Core Web Vitals problems (LCP, INP, CLS).","tags":["performance","optimization","claude","skills","rampstackco","agent-skills","anthropic","awesome-claude-code","awesome-claude-prompts","awesome-claude-skills","claude-code","claude-skills"],"capabilities":["skill","source-rampstackco","skill-performance-optimization","topic-agent-skills","topic-anthropic","topic-awesome-claude-code","topic-awesome-claude-prompts","topic-awesome-claude-skills","topic-claude","topic-claude-code","topic-claude-skills","topic-good-first-issue","topic-mcp","topic-product-management","topic-seo"],"categories":["claude-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/rampstackco/claude-skills/performance-optimization","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add rampstackco/claude-skills","source_repo":"https://github.com/rampstackco/claude-skills","install_from":"skills.sh"}},"qualityScore":"0.540","qualityRationale":"deterministic score 0.54 from registry signals: · indexed on github topic:agent-skills · 181 github stars · SKILL.md body (9,432 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:55:18.562Z","embedding":null,"createdAt":"2026-04-30T01:01:29.410Z","updatedAt":"2026-05-18T18:55:18.562Z","lastSeenAt":"2026-05-18T18:55:18.562Z","tsv":"'+1':599 '0.1':473,476 '0.25':478,481 '0.4':1179 '1':944,1296 '100kb':669,1225 '10ms':1173 '1500':438 '170kb':659 '2':962,1299 '2.5':240,244 '200':365 '200ms':362 '3':977,1305 '4':997,1315 '4.0':246,250 '4000px':816 '5':1011,1250,1322 '50':932 '500kb':1232 '500ms':367,370 '6':1024,1331 '60':774 '7':1041,1338 '8':1342 '80':776 '800ms':263,587 '800px':819 '9':1346 'access':192 'across':1207 'actual':991,1130 'ad':491,537,889 'agnost':59 'altern':928 'alway':521,1142,1195 'analysi':1080,1359 'analyt':888,1269 'analyz':758 'anchor':60 'anim':446 'annual':131 'around':461 'aspect':528 'aspect-ratio':527 'asset':19,42,117 'audit':174,741,896,1351,1375 'avail':197 'avif':332,788 'avoid':426,554,845 'bad':579,1154 'baselin':947,1140 'below-the-fold':736,803 'best':781,839 'beyond':566 'bloat':675,761 'block':123,266,318,380,849,1224 'break':404 'browser':67,189,654,689,980,1074 'budget':895,1212,1344 'bug':161 'build':755,1210 'build-tim':754 'built':1063 'bundl':17,44,110,648,685,757,1234,1237,1247,1259,1358 'byte':573,1218 'cach':603,616 'cacheabl':625 'captur':957 'carri':210 'caus':253,372,483,505,590,673,837,992 'cdn':610,621 'chang':1006,1368 'chat':890 'check':77,134,1037,1196,1215 'checklist':1383 'chrome':1065,1086 'chunk':408,667 'ci':1214 'client':286,303,707 'client-sid':285,302,706 'cls':16,103,449,486,810,838,970,1177,1405 'code':157,164,694,729,1365 'code-review-web':163 'code-split':728 'codebas':1209 'cold':611 'come':937 'common':252,293,371,402,482,519,589,672,930,1385,1398 'complaint':177 'complex':1350 'compon':740 'compress':660,670 'comput':414 'condit':1162,1194,1302 'configur':1073 'consol':1109 'content':223,233,499,502,556,627,647 'core':11,38,62,98,182,205,567,959,1110,1308,1318,1399 'coverag':987 'crawl':152 'creep':1205 'critic':323,564,630,851,861,1316 'critical-path':629 'crux':1090 'css':269,324,442,511 'cumul':450 'current':958,1306 'custom':188,1106 'data':195,202,518,956,1085,1092,1198,1314 'databas':592,617 'datadog':1103 'date':749 'date-fn':748 'debounc':415 'deep':1077 'deeper':73 'default':1287 'defer':320,907,1231 'delay':282,833 'demand':1061 'depend':513,698,742 'deploy':142 'dev':190,692,981 'dev-on':691 'devtool':1066 'diagnos':4,48,104,978 'diagnosi':1119 'differ':795 'dimens':335,490,808 'display':546,551,820,856 'distanc':606 'dom':398,430,435 'domain':1278 'domin':893 'driven':1187 'duplic':697 'dynam':497,626,646,762 'e.g':746 'easier':1020 'edg':640 'effici':25 'effort':1010 'element':234,276,292,300,439 'els':583 'emb':492,539 'entir':677 'equal':1220 'establish':945 'estim':1007 'etc':713,1107 'event':385,395,421 'everi':1217 'everyth':582 'everywher':786 'excess':387 'execut':1241,1297 'exist':501 'expens':400,413 'experi':218,1088,1131 'explicit':489,807 'export':1357 'eye':1282 'fail':973,1330 'failur':996,1132,1321 'fallback':878 'fast':922,1262 'featur':768 'fid':353 'field':1081,1120,1197 'file':1370 'finish':235 'first':572,976,1144,1184 'fix':6,37,97,118,294,403,520,615,714,999,1014,1031,1055,1180,1394 'flame':1078 'flash':507 'fn':720 'fns':750 'focus':974 'foit/fout':506 'fold':559,739,806 'font':114,280,504,545,550,565,828,831,844,852,855,862,864,871,877 'font-display':544,549,854 'format':311,330,784,1286 'framework':204 'frequenc':420 'full':1373 'function':641,682 'further-than-requir':1333 'general':139,160 'geograph':605 'glyph':868 'goal':93 'goe':72 'good':238,360,471 'graph':1079 'great':1150 'handler':386,396,422,433 'health':133 'heavi':384,744 'height':525 'high':419 'high-frequ':418 'host':843 'hurt':468 'ideal':440,588,1193 'identifi':963,989,1001 'ifram':493 'ignor':1263 'imag':113,272,309,329,334,487,531,769,771,792,817,822 'impact':1008,1023 'implement':1012 'import':676,718,719,724,763,1323 'improv':34,243,364,475 'includ':10,149,690,1352 'index':150 'initi':561,656 'inject':498,555 'inp':15,102,340,375,968,1404 'input':168,425 'insight':1068 'interact':341,351,357,906 'intl':753 'invisible/unstyled':509 'isr':639 'issu':9,51,936,1002,1317,1324 'iter':1042 'jank':125 'javascript':109,267,379,650 'js':326,444,516,657 'js-load':515 'jump':460 'lab':201,1057,1114 'larg':270,397,705 'larger':1258 'largest':222,231 'late':278,496 'late-load':277 'latenc':645 'launch':128 'layout':119,338,401,451,466 'lazi':665,734,798,801,826 'lazy-load':664,733,825 'lcp':14,101,221,256,275,291,299,308,821,967,1403 'lib':722,725,727 'librari':678,704 'lighter':926 'lighter-weight':925 'lighthous':186,948,1035,1062,1151,1186,1190,1311,1356 'lighthouse-driven':1185 'load':107,279,464,495,517,542,666,735,799,800,827,829,903 'long':377,405 'long-run':376 'low':644 'low-lat':643 'main':382,915 'major':1030 'make':581 'match':881,1165 'matter':1239,1243 'mean':1159 'measur':227,347,455,1022,1027,1136,1143 'memoiz':412 'methodolog':1300 'metric':181,209,358,995,1141,1148,1158 'miss':602 'modern':328,688,783 'moment.js':747 'monitor':194,200,955,1040,1053,1098,1347 'mousemov':424 'much':457 'multipl':699 'n':598 'nativ':752 'need':242,363,474 'network':985,1361 'never':824 'new':1104 'next':343 'non':322,860 'non-crit':321,859 'obsess':1236 'offend':966,1183 'often':832,892 'one':681,745,1013,1048 'ongo':1052 'onlin':1069,1071 'oper':393,431 'optim':3,20,41,47,112,306,628,770,1134,1145,1169,1188,1202,1327,1386 'option':547 'output':1285,1288,1360 'over-optim':1167 'page':35,106,172,459,663,779,905,1201,1304,1355 'pagespe':1067 'paint':224,344 'pars':1253 'parti':848,884,887,920,941,1265,1274 'pass':339,1049 'path':597,631 'pattern':69,601,931,1133 'per':731,1000,1354 'per-pag':1353 'percent':777,933 'perform':2,8,22,46,50,68,76,89,129,132,176,193,894,935,983,1043,1075,1137,1203,1211,1291,1343,1374 'performance-audit.md':1294 'performance-optim':1 'plan':56,998,1003,1050,1348 'playbook':1395 'polish':1332 'polyfil':686 'poor':248,255,368,374,479,485 'possibl':448,637,873,1019 'practic':782,840 'pre':127,634 'pre-launch':126 'pre-rend':633 'preload':314,563,823,850 'prevent':809 'prioriti':1388 'problem':1402 'produc':53 'product':696 'provid':874 'public':1091 'qa':80,140,145 'qa-test':79,144 'queri':593,600,618,632 'quick':1381 'quick-refer':1380 'rare':766,1045 'rarely-us':765 'ratio':529 're':390,1026,1033 're-measur':1025 're-rend':389 're-run':1032 'react/framework':388 'real':198,953,1038,1083,1096,1156 'real-us':1155 'recommend':1345 'reduc':43,108,315,434 'redux':710 'refer':1369,1382 'references/audit-template.md':1371,1372 'references/optimization-checklist.md':1378,1379 'references/optimization-playbook.md':1389,1390 'regress':1204 'relic':1105 'remedi':55,1339 'remov':866 'render':21,122,236,265,284,288,297,305,317,391,562,635,835,1223 'render-block':121,264,316,1222 'replac':352,743 'report':1089,1113,1292,1376 'request':596 'requir':167,900,1336 'reserv':534 'resourc':124,319 'respons':259,348,577,791 'review':158,165 'right':310,312,811 'roadmap':1340 'rout':732 'rum':1099,1313 'run':378,910,951,1034,1059,1191,1261,1275 'runtim':24 'sampl':1303 'scan':949 'scheduler.yield':409 'score':187,1152,1312 'screenshot':1363 'script':885,942,1226,1233 'scroll':423 'search':1108 'second':241,247,251,1251 'self':842 'self-host':841 'seo':84,148,155,220 'seo-techn':83,154 'sequenc':1341 'server':258,296,576,604 'server-rend':295 'serverless':614 'settimeout':411 'shake':717 'shave':1172 'shift':120,452,467 'ship':651,815 'side':287,304,708 'singl':1200 'single-pag':1199 'site':170,1095 'size':18,45,111,313,436,649,797,812,1235,1238 'skill':28,71 'skill-performance-optimization' 'skip':337 'slow':105,257,591 'small':1246 'snapshot':712 'snippet':1366 'solv':1046 'sourc':1124 'source-rampstackco' 'space':535 'specif':175,979,1005,1364 'specifi':333,522 'speed':36 'spend':1170 'split':730 'spot':760 'srcset':793 'ssg':638 'stack':58 'stack-agnost':57 'standard':66,356 'start':612 'state':709,1307 'static':623 'storag':428 'store':711 'structur':1295 'sub':1326 'sub-optim':1325 'subset':863 'summari':1298 'support':787,790 'swap':552,857 'symptom':1392 'symptom-to-fix':1391 'synchron':392,427 'system':876 'system-font':875 'tab':984,986,988,1076 'tag':1270 'take':1249 'target':180,237,359,470,585,655 'task':406 'technic':85,147,156 'templat':1377 'test':81,146,1161 'text':283,510,834 'theater':1138 'third':847,883,886,919,940,1264,1273 'third-parti':846,882,939 'thought':553 'thread':383,916 'three':208 'threshold':185 'throttl':417 'time':228,260,570,578,756,1017,1242 'tool':191,982,1056,1058,1082,1115,1121,1301 'topic-agent-skills' 'topic-anthropic' 'topic-awesome-claude-code' 'topic-awesome-claude-prompts' 'topic-awesome-claude-skills' 'topic-claude' 'topic-claude-code' 'topic-claude-skills' 'topic-good-first-issue' 'topic-mcp' 'topic-product-management' 'topic-seo' 'treat':1216 'tree':716 'tree-shak':715 'truth':1126 'ttfb':261,574,580,1175 'typic':662,773 'unexpect':465 'unoptim':271 'unus':867 'us':1272 'usabl':469 'use':26,86,96,138,143,153,162,327,441,543,619,684,767,853,869,1117 'user':31,199,217,350,608,954,1039,1084,1087,1097,1102,1129,1157,1166,1281 'variabl':870 'verif':130 'version':700 'video':533 'viewport':796 'visibl':232 'visual':880 'vital':13,40,64,100,184,207,569,961,1112,1310,1320,1401 'want':32 'waterfal':1362 'web':7,12,39,49,63,99,166,183,206,503,568,830,960,1111,1309,1319,1400 'webp':331,785 'webpagetest':950,1070 'week':1171 'weight':214,780,927 'whenev':29 'widget':891 'width':523 'win':1337 'without':488,1135,1139 'worker':913 'workflow':943 'wors':584,1228,1255 'worst':965,1182 'wrong':1147","prices":[{"id":"777c479a-5424-4392-9f7a-fa2c068436c5","listingId":"4b45f7a4-2ec0-41b1-8880-5c61b91621b4","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"rampstackco","category":"claude-skills","install_from":"skills.sh"},"createdAt":"2026-04-30T01:01:29.410Z"}],"sources":[{"listingId":"4b45f7a4-2ec0-41b1-8880-5c61b91621b4","source":"github","sourceId":"rampstackco/claude-skills/performance-optimization","sourceUrl":"https://github.com/rampstackco/claude-skills/tree/main/skills/performance-optimization","isPrimary":false,"firstSeenAt":"2026-04-30T01:01:29.410Z","lastSeenAt":"2026-05-18T18:55:18.562Z"}],"details":{"listingId":"4b45f7a4-2ec0-41b1-8880-5c61b91621b4","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"rampstackco","slug":"performance-optimization","github":{"repo":"rampstackco/claude-skills","stars":181,"topics":["agent-skills","anthropic","awesome-claude-code","awesome-claude-prompts","awesome-claude-skills","claude","claude-code","claude-skills","good-first-issue","mcp","product-management","seo","show-hn","showcase","showdev","web-design","web-development"],"license":"mit","html_url":"https://github.com/rampstackco/claude-skills","pushed_at":"2026-05-10T22:40:22Z","description":"Stack-agnostic Claude Skills covering the full website lifecycle: brand, design, content, SEO, dev, ops, growth, and research. Build, ship, audit, optimize.","skill_md_sha":"1bac7fbd80a84e26f83c6bff3d21aa00e93a9f37","skill_md_path":"skills/performance-optimization/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/rampstackco/claude-skills/tree/main/skills/performance-optimization"},"layout":"multi","source":"github","category":"claude-skills","frontmatter":{"name":"performance-optimization","description":"Diagnose and fix web performance issues including Core Web Vitals (LCP, INP, CLS), bundle size, asset optimization, render performance, and runtime efficiency. Use this skill whenever the user wants to improve page speed, fix Core Web Vitals, optimize assets, reduce bundle size, debug slow renders, or systematically improve a site's performance. Triggers on performance, page speed, Core Web Vitals, LCP, INP, CLS, FID, TTFB, bundle size, code splitting, image optimization, lazy loading, render blocking, slow page, performance audit, Lighthouse score. Also triggers when traffic or conversion is dropping due to perceived slowness."},"skills_sh_url":"https://skills.sh/rampstackco/claude-skills/performance-optimization"},"updatedAt":"2026-05-18T18:55:18.562Z"}}