performance

Name: performance
Author: addyosmani

byaddyosmani· 31 skills

Installs

26k

Stars

2.5k

Forks

231

How to install performance?

addyosmani/web-quality-skills/performance

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

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/addyosmani/web-quality-skills" --skill "addyosmani/web-quality-skills/performance"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/addyosmani/web-quality-skills" that are relevant to the current task. Run `npx skills add "https://github.com/addyosmani/web-quality-skills"` and select the relevant skills, then follow their instructions.

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">
134
135	<!-- WebP fallback -->
136	<source
137	type="image/webp"
138	srcset="hero-400.webp 400w,
139	hero-800.webp 800w,
140	hero-1200.webp 1200w"
141	sizes="(max-width: 600px) 100vw, 50vw">
142
143	<!-- JPEG fallback -->
144	<img
145	src="hero-800.jpg"
146	srcset="hero-400.jpg 400w,
147	hero-800.jpg 800w,
148	hero-1200.jpg 1200w"
149	sizes="(max-width: 600px) 100vw, 50vw"
150	width="1200"
151	height="600"
152	alt="Hero image"
153	loading="lazy"
154	decoding="async">
155	</picture>
156	```
157
158	### LCP image priority
159	```html
160	<!-- Above-fold LCP image: eager loading, high priority -->
161	<img
162	src="hero.webp"
163	fetchpriority="high"
164	loading="eager"
165	decoding="sync"
166	alt="Hero">
167
168	<!-- Below-fold images: lazy loading -->
169	<img
170	src="product.webp"
171	loading="lazy"
172	decoding="async"
173	alt="Product">
174	```
175
176	## Font optimization
177
178	### Loading strategy
179	```css
180	/* System font stack as fallback */
181	body {
182	font-family: 'Custom Font', -apple-system, BlinkMacSystemFont,
183	'Segoe UI', Roboto, sans-serif;
184	}
185
186	/* Prevent invisible text */
187	@font-face {
188	font-family: 'Custom Font';
189	src: url('/fonts/custom.woff2') format('woff2');
190	font-display: swap; /* or optional for non-critical */
191	font-weight: 400;
192	font-style: normal;
193	unicode-range: U+0000-00FF; /* Subset to Latin */
194	}
195	```
196
197	### Preloading critical fonts
198	```html
199	<link rel="preload" href="/fonts/heading.woff2" as="font" type="font/woff2" crossorigin>
200	```
201
202	### Variable fonts
203	```css
204	/* One file instead of multiple weights */
205	@font-face {
206	font-family: 'Inter';
207	src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
208	font-weight: 100 900;
209	font-display: swap;
210	}
211	```
212
213	## Caching strategy
214
215	### Cache-Control headers
216	```
217	# HTML (short or no cache)
218	Cache-Control: no-cache, must-revalidate
219
220	# Static assets with hash (immutable)
221	Cache-Control: public, max-age=31536000, immutable
222
223	# Static assets without hash
224	Cache-Control: public, max-age=86400, stale-while-revalidate=604800
225
226	# API responses
227	Cache-Control: private, max-age=0, must-revalidate
228	```
229
230	### Service worker caching
231	```javascript
232	// Cache-first for static assets
233	self.addEventListener('fetch', (event) => {
234	if (event.request.destination === 'image' \|\|
235	event.request.destination === 'style' \|\|
236	event.request.destination === 'script') {
237	event.respondWith(
238	caches.match(event.request).then((cached) => {
239	return cached \|\| fetch(event.request).then((response) => {
240	const clone = response.clone();
241	caches.open('static-v1').then((cache) => cache.put(event.request, clone));
242	return response;
243	});
244	})
245	);
246	}
247	});
248	```
249
250	## Runtime performance
251
252	### Avoid layout thrashing
253	```javascript
254	// ❌ Forces multiple reflows
255	elements.forEach(el => {
256	const height = el.offsetHeight; // Read
257	el.style.height = height + 10 + 'px'; // Write
258	});
259
260	// ✅ Batch reads, then batch writes
261	const heights = elements.map(el => el.offsetHeight); // All reads
262	elements.forEach((el, i) => {
263	el.style.height = heights[i] + 10 + 'px'; // All writes
264	});
265	```
266
267	### Debounce expensive operations
268	```javascript
269	function debounce(fn, delay) {
270	let timeout;
271	return (...args) => {
272	clearTimeout(timeout);
273	timeout = setTimeout(() => fn(...args), delay);
274	};
275	}
276
277	// Debounce scroll/resize handlers
278	window.addEventListener('scroll', debounce(handleScroll, 100));
279	```
280
281	### Use requestAnimationFrame
282	```javascript
283	// ❌ May cause jank
284	setInterval(animate, 16);
285
286	// ✅ Synced with display refresh
287	function animate() {
288	// Animation logic
289	requestAnimationFrame(animate);
290	}
291	requestAnimationFrame(animate);
292	```
293
294	### Virtualize long lists
295	```javascript
296	// For lists > 100 items, render only visible items
297	// Use libraries like react-window, vue-virtual-scroller, or native CSS:
298	.virtual-list {
299	content-visibility: auto;
300	contain-intrinsic-size: 0 50px; /* Estimated item height */
301	}
302	```
303
304	### Smooth navigations with View Transitions
305
306	The [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.
307
308	Same-document (SPA-style) — Baseline 2026:
309	```javascript
310	// Wrap the DOM mutation that swaps the view
311	function navigate(newView) {
312	if (!document.startViewTransition) return swapDOM(newView);
313	document.startViewTransition(() => swapDOM(newView));
314	}
315	```
316
317	Cross-document (MPA-style) — Chromium-stable, progressive enhancement elsewhere:
318	```css
319	/* On both source and destination pages */
320	@view-transition { navigation: auto; }
321	```
322	That'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`:
323	```css
324	.product-thumb[data-id="42"], .product-hero { view-transition-name: product-42; }
325	```
326
327	Pair this with Speculation Rules (above) for instant + animated navigations.
328
329	## Third-party scripts
330
331	### Load strategies
332	```javascript
333	// ❌ Blocks main thread
334	<script src="https://analytics.example.com/script.js"></script>
335
336	// ✅ Async loading
337	<script async src="https://analytics.example.com/script.js"></script>
338
339	// ✅ Delay until interaction
340	<script>
341	document.addEventListener('DOMContentLoaded', () => {
342	const observer = new IntersectionObserver((entries) => {
343	if (entries[0].isIntersecting) {
344	const script = document.createElement('script');
345	script.src = 'https://widget.example.com/embed.js';
346	document.body.appendChild(script);
347	observer.disconnect();
348	}
349	});
350	observer.observe(document.querySelector('#widget-container'));
351	});
352	</script>
353	```
354
355	### Facade pattern
356	```html
357	<!-- Show static placeholder until interaction -->
358	<div class="youtube-facade"
359	data-video-id="abc123"
360	onclick="loadYouTube(this)">
361	<img src="/thumbnails/abc123.jpg" alt="Video title">
362	<button aria-label="Play video">▶</button>
363	</div>
364	```
365
366	## Measurement
367
368	### Key metrics
369	\| Metric \| Target \| Tool \|
370	\|--------\|--------\|------\|
371	\| LCP \| < 2.5s \| Lighthouse, CrUX \|
372	\| FCP \| < 1.8s \| Lighthouse \|
373	\| Speed Index \| < 3.4s \| Lighthouse \|
374	\| TBT \| < 200ms \| Lighthouse \|
375	\| TTI \| < 3.8s \| Lighthouse \|
376
377	### Testing commands
378	```bash
379	# Lighthouse CLI
380	npx lighthouse https://example.com --output html --output-path report.html
381
382	# Web Vitals library
383	import {onLCP, onINP, onCLS} from 'web-vitals';
384	onLCP(console.log);
385	onINP(console.log);
386	onCLS(console.log);
387	```
388
389	## References
390
391	For Core Web Vitals specific optimizations, see [Core Web Vitals](../core-web-vitals/SKILL.md).

6 picks

Type

Run `npx skills use "https://github.com/addyosmani/web-quality-skills" --skill "addyosmani/web-quality-skills/performance"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/addyosmani/web-quality-skills" that are relevant to the current task. Run `npx skills add "https://github.com/addyosmani/web-quality-skills"` and select the relevant skills, then follow their instructions.

performance

How to install performance?

Related

performance

How to install performance?

Related