Web Development
How to improve website performance
Most slow sites have the same handful of problems. This guide shows you how to find yours and fix them in order of impact.
Most advice on website speed is a long list of tips with no sense of priority. This guide takes a different approach: measure first, find your biggest problem and fix it, then move to the next. You can do plenty of it without a rebuild.
Measure the right thing
There are two kinds of performance data, and it’s easy to confuse them.
- Lab data comes from a test run in controlled conditions, like Lighthouse. It’s repeatable and useful for debugging, but it isn’t what your users experience.
- Field data comes from real Chrome users through the Chrome User Experience Report. It’s what Google uses for Core Web Vitals, and it reflects your actual visitors’ devices and connections.
Paste your URL into PageSpeed Insights to see both, and check the Core Web Vitals report in Search Console for a view across your entire site. Field data is a rolling 28-day window, so it takes a while to show improvements. Don’t chase a Lighthouse score of 100. It isn’t a goal in itself, and scores vary between runs.
The three Core Web Vitals
| Metric | Measures | “Good” threshold |
|---|---|---|
| Largest Contentful Paint (LCP) | Loading: when the main content appears | 2.5 seconds or less |
| Interaction to Next Paint (INP) | Responsiveness to clicks and taps | 200 milliseconds or less |
| Cumulative Layout Shift (CLS) | Visual stability, or how much things jump around | 0.1 or less |
These are measured at the 75th percentile of visits, so most of your users need a good experience, not just those on fast connections.
Fixing slow loading (LCP)
LCP is usually a hero image or a large heading. Start here:
- Compress and resize images. A huge image scaled down in the browser is one of the most common problems. Use WebP or AVIF, and serve sizes that suit the device using
srcset. - Don’t lazy-load the hero image. This delays what you most want to see. Lazy-load the images further down the page. Consider
fetchpriority="high"on the main one. - Improve server response. Slow time to first byte holds everything up. Look at page caching, slow database queries and your hosting.
- Remove render-blocking resources. Trim unused CSS, and defer scripts that aren’t essential.
- Handle fonts carefully. Self-host, use
font-display: swap, preload the main font and limit how many weights you load. - Use a CDN for static assets, especially if your visitors are spread out.
Fixing sluggish interaction (INP)
Poor INP generally means too much JavaScript running on the main thread.
- Audit third-party scripts. Chat widgets, tag managers, heatmaps and ad trackers are often the biggest cost. Remove anything that nobody looks at, and delay what’s left until it’s needed.
- Reduce your own JavaScript. Split bundles so that pages only load what they use. Question whether the page needs a heavy framework at all.
- Break up long tasks. Yield to the browser during heavy work, so that it can respond to the user.
- Give instant feedback. Update the interface immediately, then do the slower work afterwards.
Test on a mid-range Android phone, or use the CPU throttling in Chrome DevTools. Your laptop will hide all of this.
Fixing layout shift (CLS)
- Set width and height on images and video, so that the browser can reserve space for them.
- Reserve space for ads, embeds and banners that load late.
- Don’t inject content above what people are already reading.
- Match your fallback font to your web font, to reduce the shift when it loads.
Quick wins, in order
- Turn on compression (Brotli or GZIP) and browser caching.
- Fix your largest images.
- Remove unused plugins and third-party scripts.
- Add page caching, if your platform supports it.
- Fix any missing image dimensions.
- Then look at the code.
How much will it help your rankings?
Be realistic. Google has said that page experience is one of many signals, and that relevant, helpful content can outrank a faster page. A slow site is unlikely to be saved by speed work alone if its content isn’t competitive. The stronger case is for your visitors, since faster pages are simply easier to use, especially on phones. If you’d rather have someone do this for you, our website speed service starts by measuring your real user data.
Keep it fast
Performance gets worse over time as people add scripts, images and features. Set a budget for page weight, check Core Web Vitals every month, and ask “what does this add?” before each new tag goes in. Review your tag manager at least once a year, because it’s often full of things nobody remembers adding.