Web Performance

HTML and browser techniques for prioritizing or deferring work.

Term / Syntax	Name	Description	Example
defer	Deferred script	Downloads a classic external script without blocking parsing and executes after parsing.	<script src="app.js" defer></script>
type=module	JavaScript module	Module scripts are deferred by default and use module loading semantics.	<script type="module" src="app.js"></script>
preload	High-priority resource hint	Tells the browser a resource will be needed soon by the current page.	<link rel="preload" href="font.woff2" as="font" crossorigin>
preconnect	Connection hint	Starts connection setup early for an important origin.	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
loading="lazy"	Lazy loading	Defers loading eligible off-screen images or iframes.	<img src="photo.jpg" loading="lazy" alt="">

Techniques for reducing media transfer size and avoiding unstable rendering.

Term / Syntax	Name	Description	Example
width + height	Image dimensions	Intrinsic dimensions help browsers reserve space before images load.	<img src="photo.jpg" width="800" height="600" alt="...">
srcset	Responsive sources	Allows the browser to choose an appropriately sized image candidate.	<img srcset="small.jpg 480w, large.jpg 1200w" ...>
font-display	Font rendering strategy	Controls how text renders while a web font loads.	font-display: swap;
subset fonts	Smaller font payload	Serving only needed glyphs/weights can reduce font downloads.	Use only required font weights and character sets.

Patterns that reduce unnecessary rendering and main-thread work.

Term / Syntax	Name	Description	Example
transform	Composite-friendly motion	Transforms can often animate without triggering layout.	transform: translateY(-4px);
opacity	Composite-friendly fade	Opacity changes can often be handled efficiently by the compositor.	opacity: .8;
passive listener	Scroll listener hint	Tells the browser a listener will not cancel the event.	addEventListener("scroll", update, { passive: true });
IntersectionObserver	Visibility observation	Efficiently observes visibility changes without continuous geometry polling.	new IntersectionObserver(handleEntries);
debounce	Limit repeated work	Delays expensive work until rapid events settle.	const debounced = debounce(search, 200);

Common user-experience metrics and diagnostic concepts.

Term / Syntax	Name	Description	Example
LCP	Largest Contentful Paint	Measures loading performance for the largest visible content element.	Aim to keep primary content loading quickly.
INP	Interaction to Next Paint	Measures responsiveness across user interactions.	Keep interaction handlers and main-thread work short.
CLS	Cumulative Layout Shift	Measures unexpected visual instability.	Reserve media/ad space and avoid inserting content above existing content.
DevTools Performance	Browser profiling	Records main-thread, rendering, scripting, and frame activity.	Chrome DevTools → Performance
Lighthouse	Automated audit	Provides automated performance and quality diagnostics; use with manual measurement.	Run Lighthouse in browser DevTools.