Page Speed Optimization: How to Make Pages Load Faster
Short answer: measure first with real-user data (PageSpeed Insights field data or Search Console’s Core Web Vitals report), then fix what’s slow, in this order: a fast server response, right-sized modern images, the main image loading early, fewer render-blocking styles and scripts, less JavaScript work on clicks, and space reserved for anything that loads late. Aim for Google’s Core Web Vitals targets: LCP within 2.5 s, INP within 200 ms and CLS of 0.1 or less for at least 75% of visits.
Step 1: measure the right thing
PageSpeed Insights shows two kinds of data, and they answer different questions:
| Field data | Lab data (the score) | |
|---|---|---|
| Source | Real Chrome users (CrUX) | Lighthouse in a simulated environment |
| Period | Previous 28 days, 75th percentile | One test run |
| Use it to | Know whether visitors have a problem; this decides the Core Web Vitals assessment | Find causes and test fixes before release |
The page passes the Core Web Vitals assessment when the 75th percentile of LCP, INP and CLS are all “Good” (or LCP and CLS, if there isn’t enough INP data). A lab score of 90 or more is “good”, but chasing 100 rarely pays off once real users pass. Tools compared: website speed test tools.
Step 2: speed up the server response
Every other step waits for the first byte of HTML. Cache full pages where you can, use a CDN close to your visitors, avoid redirect hops on the landing URL, and fix slow database queries or plugins on dynamic pages. Lab tools show this as Time to First Byte (TTFB).
Step 3: fix images
- Use modern formats. Google says lossy WebP images are 25–34% smaller than comparable JPEGs, and lossless WebP is 26% smaller than PNG. AVIF is another option.
- Serve the right size with
srcsetandsizes, so phones don’t download desktop images. - Add width and height to every
<img>so the browser reserves space and the layout doesn’t jump. - Lazy-load only below the first screen. Never lazy-load the main (LCP) image; give it
fetchpriority="high"instead.
<!-- main image, visible on load --> <img src="hero.webp" width="1200" height="600" fetchpriority="high" alt="..."> <!-- further down the page --> <img src="chart.webp" width="800" height="450" loading="lazy" alt="...">
Step 4: unblock rendering
- Load scripts that aren’t needed for the first view with
defer(orasyncfor independent scripts like some analytics). - Keep CSS small; remove unused styles and avoid loading a whole framework for one page.
- Make the main content available in the HTML, rather than built later by JavaScript.
- Limit web fonts to the weights you use and preload the one used above the fold.
Details for the main image: Largest Contentful Paint.
Step 5: make clicks respond fast (INP)
web.dev splits each interaction into three parts: input delay (waiting for the main thread), processing (your event handlers running) and presentation delay (drawing the next frame). The fixes:
- Break long tasks up and yield to the main thread, so the page can respond between chunks of work.
- Do only the visual update right away in click handlers; defer the rest.
- Ship less JavaScript: remove unused third-party tags, widgets and polyfills.
More: INP optimization.
Step 6: stop layout shifts (CLS)
Reserve space for images, videos, ads and embeds; don’t insert banners above existing content after load; and load fonts in a way that doesn’t reflow text. See Cumulative Layout Shift.
Check your work
- Re-run the lab test to confirm each fix helps.
- Wait for field data to update; it covers the previous 28 days, so improvements show gradually.
- In Search Console’s Core Web Vitals report, use “Validate fix” for each fixed issue group.
Speed matters only for pages Google can index. The free sitemap checker tests 30 sitemap URLs for errors, redirects, noindex and canonical problems.
Frequently asked questions
What is a good page load speed?
Use Google’s Core Web Vitals as the target: Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint within 200 ms and Cumulative Layout Shift of 0.1 or less, for at least 75% of real visits.
Does page speed affect SEO?
Yes, as part of page experience: Google says Core Web Vitals are used by its ranking systems. But it also says it shows the most relevant content even when page experience is weak, so speed helps most when your content is already competitive.
Why is my PageSpeed Insights score different every time?
The score comes from a lab test (Lighthouse) in a simulated environment, which varies between runs. The field data section, from real Chrome users over the previous 28 days, is the more reliable picture.
How do I make my page load faster quickly?
The quickest wins are usually images: resize them, serve WebP or AVIF, add width and height, and lazy-load only images below the first screen. Then defer scripts you don’t need right away.
Should I lazy-load all images?
No. web.dev warns not to lazy-load images that are likely visible when the page loads, especially the LCP image. Use loading="lazy" only for images outside the first screen.