Web Performance + Assets Cheatsheet

Images and Media

Use WebP or AVIF

Modern formats cut file size with little quality loss.

Export at 1x and 2x

Keep high-DPI screens crisp without oversizing.

loading="lazy" decoding="async"

Defer below-the-fold images and decode off the main thread.

fetchpriority="high"

Prioritize hero images or key visuals.

Responsive Images

srcset="image-640.webp 640w, image-1280.webp 1280w"

Let the browser pick the right image size.

sizes="(max-width: 768px) 100vw, 50vw"

Describe the rendered size so it can choose correctly.

<picture> with source types

Fallback to PNG or JPG when needed.

Fonts

font-display: swap;

Avoid invisible text while fonts load.

Subset to needed glyphs

Ship only the characters you use.

Preload critical fonts

Load body and headline fonts earlier.

CSS and JavaScript Loading

defer

Load scripts after HTML parsing.

async

Load independent scripts without blocking.

Inline critical CSS

Render above-the-fold content faster.

Layout Stability

width and height attributes

Reserve space to avoid layout shift.

aspect-ratio: 4 / 3;

Keep consistent media boxes without hardcoded heights.

Skeletons or placeholders

Show structure while content loads.

Caching and Delivery

Cache static assets aggressively

Use hashed file names for long cache lifetimes.

Use a CDN for images

Serve assets from locations closer to users.

Compress with Brotli or gzip

Reduce transfer size for HTML, CSS, and JS.

Quick Audit Checklist

Run Lighthouse performance audit

Track LCP, CLS, and overall score.

Check network waterfall

Spot heavy assets and slow third parties.

Budget: 200-300KB per page

Set a target to keep pages lean.

Need other references? Visit the Cheatsheets index or open Accessibility and Design Handoff.