performance

Name: performance
Author: addyosmani

24kinstalls231forks

How to install performance?

addyosmani/web-quality-skills/performance

$npx -y skills add addyosmani/web-quality-skills --skill performance

Installs into the current project.

Summary

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".

Files · 1

View on GitHub

SKILL.md

1	# Performance optimization
2
3	Deep performance optimization based on Lighthouse performance audits. Focuses on loading speed, runtime efficiency, and resource optimization.
4
5	## How it works
6
7	1. Identify performance bottlenecks in code and assets
8	2. Prioritize by impact on Core Web Vitals
9	3. Provide specific optimizations with code examples
10	4. Measure improvement with before/after metrics
11
12	## Performance budget
13
14	\| Resource \| Budget \| Rationale \|
15	\|----------\|--------\|-----------\|
16	\| Total page weight \| < 1.5 MB \| 3G loads in ~4s \|
17	\| JavaScript (compressed) \| < 300 KB \| Parsing + execution time \|
18	\| CSS (compressed) \| < 100 KB \| Render blocking \|
19	\| Images (above-fold) \| < 500 KB \| LCP impact \|
20	\| Fonts \| < 100 KB \| FOIT/FOUT prevention \|
21	\| Third-party \| < 200 KB \| Uncontrolled latency \|
22
23	## Critical rendering path
24
25	### Server response
26	* TTFB < 800ms. Time to First Byte should be fast. Use CDN, caching, and efficient backends.
27	* Enable compression. Gzip or Brotli for text assets. Brotli preferred (15-20% smaller).
28	* HTTP/2 or HTTP/3. Multiplexing reduces connection overhead.
29	* Edge caching. Cache HTML at CDN edge when possible.
30	* 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: </hero.webp>; 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.
31
32	### Resource loading
33
34	Preconnect to required origins:
35	```html
36	<link rel="preconnect" href="https://fonts.googleapis.com">
37	<link rel="preconnect" href="https://cdn.example.com" crossorigin>
38	```
39
40	Preload critical resources:
41	```html
42	<!-- LCP image -->
43	<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
44
45	<!-- Critical font -->
46	<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>
47	```
48
49	Prerender likely-next navigations with the [Speculation Rules API](https://developer.chrome.com/docs/web-platform/prerender-pages):
50	```html
51	<script type="speculationrules">
52	{
53	"prerender": [{
54	"where": { "href_matches": "/*" },
55	"eagerness": "moderate"
56	}]
57	}
58	</script>
59	```
60	`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.
61
62	Defer non-critical CSS:
63	```html
64	<!-- Critical CSS inlined -->
65	<style>/* Above-fold styles */</style>
66
67	<!-- Non-critical CSS -->
68	<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
69	<noscript><link rel="stylesheet" href="/styles.css"></noscript>
70	```
71
72	### JavaScript optimization
73
74	Defer non-essential scripts:
75	```html
76	<!-- Parser-blocking (avoid) -->
77	<script src="/critical.js"></script>
78
79	<!-- Deferred (preferred) -->
80	<script defer src="/app.js"></script>
81
82	<!-- Async (for independent scripts) -->
83	<script async src="/analytics.js"></script>
84
85	<!-- Module (deferred by default) -->
86	<script type="module" src="/app.mjs"></script>
87	```
88
89	Code splitting patterns:
90	```javascript
91	// Route-based splitting
92	const Dashboard = lazy(() => import('./Dashboard'));
93
94	// Component-based splitting
95	const HeavyChart = lazy(() => import('./HeavyChart'));
96
97	// Feature-based splitting
98	if (user.isPremium) {
99	const PremiumFeatures = await import('./PremiumFeatures');
100	}
101	```
102
103	Tree shaking best practices:
104	```javascript
105	// ❌ Imports entire library
106	import _ from 'lodash';
107	_.debounce(fn, 300);
108
109	// ✅ Imports only what's needed
110	import debounce from 'lodash/debounce';
111	debounce(fn, 300);
112	```
113
114	## Image optimization
115
116	### Format selection
117	\| Format \| Use case \| Browser support \|
118	\|--------\|----------\|-----------------\|
119	\| AVIF \| Photos, best compression \| 92%+ \|
120	\| WebP \| Photos, good fallback \| 97%+ \|
121	\| PNG \| Graphics with transparency \| Universal \|
122	\| SVG \| Icons, logos, illustrations \| Universal \|
123
124	### Responsive images
125	```html
126	<picture>
127	<!-- AVIF for modern browsers -->
128	<source
129	type="image/avif"
130	srcset="hero-400.avif 400w,
131	hero-800.avif 800w,
132	hero-1200.avif 1200w"
133	sizes="(max-width: 600px) 100vw, 50vw">

People who liked this also viewed

6 picks

Type

performance

24kinstalls231forks

View on GitHub

How to install performance?

addyosmani/web-quality-skills/performance

$npx -y skills add addyosmani/web-quality-skills --skill performance

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Performance optimization
2
3	Deep performance optimization based on Lighthouse performance audits. Focuses on loading speed, runtime efficiency, and resource optimization.
4
5	## How it works
6
7	1. Identify performance bottlenecks in code and assets
8	2. Prioritize by impact on Core Web Vitals
9	3. Provide specific optimizations with code examples
10	4. Measure improvement with before/after metrics
11
12	## Performance budget
13
14	\| Resource \| Budget \| Rationale \|
15	\|----------\|--------\|-----------\|
16	\| Total page weight \| < 1.5 MB \| 3G loads in ~4s \|
17	\| JavaScript (compressed) \| < 300 KB \| Parsing + execution time \|
18	\| CSS (compressed) \| < 100 KB \| Render blocking \|
19	\| Images (above-fold) \| < 500 KB \| LCP impact \|
20	\| Fonts \| < 100 KB \| FOIT/FOUT prevention \|
21	\| Third-party \| < 200 KB \| Uncontrolled latency \|
22
23	## Critical rendering path
24
25	### Server response
26	* TTFB < 800ms. Time to First Byte should be fast. Use CDN, caching, and efficient backends.
27	* Enable compression. Gzip or Brotli for text assets. Brotli preferred (15-20% smaller).
28	* HTTP/2 or HTTP/3. Multiplexing reduces connection overhead.
29	* Edge caching. Cache HTML at CDN edge when possible.
30	* 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: </hero.webp>; 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.
31
32	### Resource loading
33
34	Preconnect to required origins:
35	```html
36	<link rel="preconnect" href="https://fonts.googleapis.com">
37	<link rel="preconnect" href="https://cdn.example.com" crossorigin>
38	```
39
40	Preload critical resources:
41	```html
42	<!-- LCP image -->
43	<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
44
45	<!-- Critical font -->
46	<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>
47	```
48
49	Prerender likely-next navigations with the [Speculation Rules API](https://developer.chrome.com/docs/web-platform/prerender-pages):
50	```html
51	<script type="speculationrules">
52	{
53	"prerender": [{
54	"where": { "href_matches": "/*" },
55	"eagerness": "moderate"
56	}]
57	}
58	</script>
59	```
60	`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.
61
62	Defer non-critical CSS:
63	```html
64	<!-- Critical CSS inlined -->
65	<style>/* Above-fold styles */</style>
66
67	<!-- Non-critical CSS -->
68	<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
69	<noscript><link rel="stylesheet" href="/styles.css"></noscript>
70	```
71
72	### JavaScript optimization
73
74	Defer non-essential scripts:
75	```html
76	<!-- Parser-blocking (avoid) -->
77	<script src="/critical.js"></script>
78
79	<!-- Deferred (preferred) -->
80	<script defer src="/app.js"></script>
81
82	<!-- Async (for independent scripts) -->
83	<script async src="/analytics.js"></script>
84
85	<!-- Module (deferred by default) -->
86	<script type="module" src="/app.mjs"></script>
87	```
88
89	Code splitting patterns:
90	```javascript
91	// Route-based splitting
92	const Dashboard = lazy(() => import('./Dashboard'));
93
94	// Component-based splitting
95	const HeavyChart = lazy(() => import('./HeavyChart'));
96
97	// Feature-based splitting
98	if (user.isPremium) {
99	const PremiumFeatures = await import('./PremiumFeatures');
100	}
101	```
102
103	Tree shaking best practices:
104	```javascript
105	// ❌ Imports entire library
106	import _ from 'lodash';
107	_.debounce(fn, 300);
108
109	// ✅ Imports only what's needed
110	import debounce from 'lodash/debounce';
111	debounce(fn, 300);
112	```
113
114	## Image optimization
115
116	### Format selection
117	\| Format \| Use case \| Browser support \|
118	\|--------\|----------\|-----------------\|
119	\| AVIF \| Photos, best compression \| 92%+ \|
120	\| WebP \| Photos, good fallback \| 97%+ \|
121	\| PNG \| Graphics with transparency \| Universal \|
122	\| SVG \| Icons, logos, illustrations \| Universal \|
123
124	### Responsive images
125	```html
126	<picture>
127	<!-- AVIF for modern browsers -->
128	<source
129	type="image/avif"
130	srcset="hero-400.avif 400w,
131	hero-800.avif 800w,
132	hero-1200.avif 1200w"
133	sizes="(max-width: 600px) 100vw, 50vw">

People who liked this also viewed

6 picks

Type