Long cache headers
Give versioned assets a long max-age so repeat visits skip the download.
Web Performance Optimization
Speed affects how users feel about a product and how search engines rank it. These changes give the biggest wins.
Performance work has a reputation for being complicated, but most real gains come from a handful of habits. The trick is to measure first, fix the biggest problem, then measure again.
Measure before you optimise
Every browser ships developer tools with a Network panel and a Performance panel. Load your page with the panel open and watch what takes the longest. Optimising something you never measured is guesswork.
The Core Web Vitals are three user-focused metrics worth knowing in plain words. Largest Contentful Paint is how long until the main content appears. Interaction to Next Paint is how quickly the page responds when tapped. Cumulative Layout Shift is how much the page jumps around while loading.
Compress and correctly size images
Images are usually the heaviest resources on a page. Serving a 3000-pixel photo into a 400-pixel slot wastes bandwidth and slows the load. Resize images to roughly the size they are displayed, then compress them.
<img src="/hero-800.jpg"
srcset="/hero-400.jpg 400w,
/hero-800.jpg 800w,
/hero-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="800" height="450"
alt="Product dashboard overview">The srcset and sizes attributes let the browser pick the smallest suitable file. Modern formats such as WebP and AVIF are smaller than older ones at the same quality.
Lazy load offscreen images
Images far down the page do not need to load immediately. The native loading attribute defers them until the user scrolls near, which speeds up the initial render.
<img src="/gallery-1.jpg" loading="lazy" width="600" height="400" alt="Gallery item">Keep the above-the-fold hero eager and reserve space with width and height so the layout does not shift when the image arrives.
Reduce JavaScript and render-blocking resources
JavaScript is expensive because it must be downloaded, parsed and executed. Every extra library adds delay. Audit your bundle, remove what is unused and split large scripts so the page can render before all of them arrive.
<script src="/app.js" defer></script>The defer attribute downloads the script without pausing the HTML parser and runs it after the document is ready. Inline critical CSS or load non-critical stylesheets without blocking the first paint.
Cache static assets and use a CDN
Content hashing
Name files with a hash like app.4f2c.js so a change produces a new URL.
Content delivery network
Serve assets from a location near the user to cut network latency.
Cache headers and content hashing work together: files can be cached almost forever because a new version always has a new name.
A short checklist
- Resize and compress every image, and use a modern format.
- Lazy load images and iframes that are below the fold.
- Trim unused JavaScript and defer the rest.
- Set long cache headers on fingerprinted assets.
- Serve static files through a CDN.
- Re-measure after each change so you know it helped.
Do these consistently and most sites feel noticeably faster without any exotic techniques.