How to improve page speed: the short answer
Learning how to improve page speed starts with attacking the heaviest bottleneck before anything else. For most sites that means oversized images and render-blocking JavaScript, not exotic micro-optimizations. The ordered playbook is simple: (1) optimize images, (2) lazy-load below-the-fold media, (3) reduce and defer JavaScript, (4) enable caching plus a CDN, and (5) tune font loading. Done in that order, these wins improve the three metrics Google actually grades you on.
Those three metrics are the Core Web Vitals: Largest Contentful Paint (LCP) measures how fast the main content renders, Interaction to Next Paint (INP) measures responsiveness to clicks and taps, and Cumulative Layout Shift (CLS) measures visual stability. Page-speed work that ignores these metrics is guesswork. Page-speed work organized around them is a checklist.
Targets to aim for in 2026: LCP under 2.5 seconds, INP under 200 milliseconds, and CLS under 0.1, measured at the 75th percentile of real visits. Hit those thresholds and you have a fast page by Google's own definition. The table below maps each metric to the single fix that moves it most.
| Metric | What it measures | Good threshold (2026) | Top fix |
|---|---|---|---|
| LCP | Time for main content to render | Under 2.5 s | Optimize the hero image, preload it, never lazy-load it |
| INP | Responsiveness to clicks and taps | Under 200 ms | Reduce and defer JavaScript; audit third-party tags |
| CLS | Visual stability during load | Under 0.1 | Set image dimensions; use font-display: swap |
The rest of this guide walks the optimization order, then answers the questions people actually search.
The optimization order (do these in sequence)
Page-speed fixes are not equal in payoff, and doing them out of order wastes effort. The flowchart below is the sequence that delivers the most improvement per hour of work, because it front-loads the changes that move LCP and CLS — the two vitals most sites fail.
- Optimize imagesConvert to AVIF/WebP, right-size with srcset, and set explicit width/height to fix LCP and CLS.
- Lazy-load below-the-fold mediaAdd loading="lazy" to off-screen images so they stop competing for bandwidth with the hero.
- Reduce and defer JavaScriptCode-split, defer non-critical scripts, and audit third-party tags to fix INP.
- Enable caching + CDNLong-cache hashed assets and serve them from edge servers near the visitor.
- Tune font loadingUse font-display: swap, preload, and self-host to kill invisible text and layout shift.
- Measure in field dataVerify LCP, INP, and CLS in PageSpeed Insights and Search Console, not just Lighthouse.
The logic: images and video are usually the largest bytes on the page, so compressing and right-sizing them shrinks LCP first. Lazy-loading then stops off-screen media from competing for bandwidth. JavaScript is the next-largest cost and the main driver of poor INP, so cutting and deferring it comes third. Caching and a CDN make every subsequent visit fast for free. Fonts come last because they cause CLS and invisible-text flashes that are cheap to fix once the heavy lifting is done.
Resist the urge to chase a perfect Lighthouse score. Lighthouse is a lab simulation; Core Web Vitals are graded on real-user data (CrUX). Optimize for the field, validate in the lab.
Images and lazy loading (your biggest LCP win)
Images are the single biggest page-speed lever for most sites because the LCP element is usually a hero image or banner. Fixing images is the fastest path to a passing LCP score. There are three moves that compound:
- Right-size, don't just compress. A 4000px image displayed at 800px wastes bandwidth. Use
srcsetandsizesso each device downloads only what it needs. - Set explicit `width` and `height`. Dimensions reserve layout space and prevent the content jump that ruins CLS.
Then lazy-load everything below the fold with the native attribute, which is supported everywhere in 2026:
html
<img src="hero.avif" width="1200" height="600" alt="..." fetchpriority="high">
<img src="gallery.avif" loading="lazy" width="800" height="600" alt="...">Note the split: the LCP hero gets fetchpriority="high" so the browser loads it immediately, while gallery images get loading="lazy". Never lazy-load the LCP image — doing so delays the very metric you're trying to fix. For the full image workflow including alt text and compression tooling, see how to optimize images for SEO.
Reduce JavaScript and fix INP
JavaScript is the leading cause of poor Interaction to Next Paint, because every script the browser parses, compiles, and executes blocks the main thread from responding to taps and clicks. Cutting JavaScript is how you fix INP. The audit has three parts: ship less, ship later, and ship smarter.
Rule of thumb: if a script isn't needed to render or interact with the content a visitor sees first, it should not block the first paint.
Concrete tactics that work in 2026:
- Code-split so each route ships only the JavaScript it uses instead of one giant bundle.
- Audit third-party tags. A single heavy tag manager or ad script can dominate INP; remove what you can't justify.
- Avoid hydration bloat. If you're on a framework, prefer static or server rendering for content that doesn't need interactivity.
Third-party scripts are the silent killer here — they run on the main thread but live outside your codebase, so they're easy to forget. Run an audit and list every external <script> before you start trimming your own code.
Caching, CDN, and font loading
Caching and a CDN make repeat visits and far-away visits fast without changing a single line of page code. Caching stores assets so browsers and edge servers don't re-download them. A content delivery network (CDN) serves your files from a server physically near the visitor, cutting latency. Together they're the highest-leverage infrastructure change for page speed.
Set it up like this:
- Put a CDN in front of everything. Cloudflare, Fastly, or your host's edge network all qualify; most have free tiers.
- Enable compression with Brotli (or gzip) for text assets.
Fonts come last because they cause two specific problems — invisible text (FOIT) and layout shift (CLS) — that are quick to fix:
css
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap;
}Add font-display: swap so text shows immediately in a fallback font, <link rel="preload"> your primary font file, and self-host instead of calling a third-party font CDN to remove an extra connection. Compare your before/after numbers as part of a structured SEO audit so you know which metric each change moved.
How to measure and verify your wins
Measuring page speed correctly matters as much as the fixes, because lab scores and real-user scores often disagree. Always confirm improvements in field data, not just a one-off lab test. The free tools that matter:
- Chrome DevTools Performance panel profiles your own visits to find long tasks and layout shifts.
- Search Console's Core Web Vitals report tracks real-user pass/fail across your whole site over time.
Page speed is one slice of a healthy site. For the broader checklist — crawlability, indexing, structured data, and mobile readiness — read what is technical SEO. And when you want a single scan that flags slow-loading signals alongside 40+ SEO and GEO checks, run a free SEO + GEO audit on any URL.