What Is Google PageSpeed?
Google PageSpeed Insights (PSI) analyses your page and scores it from 0–100 based on real-world performance data. A score of 90+ is "Good", but many developers aim for a perfect 100 — both for bragging rights and because the underlying metrics directly affect your SEO rankings and user experience.
The score is powered by Lighthouse, an open-source auditing tool built into Chrome DevTools. Understanding what Lighthouse measures is the first step to optimising it.
Lab Data vs Field Data
PSI shows both lab data (simulated, consistent) and field data (real users, 28-day aggregate). Your score is based on lab data. Field data affects the CrUX badge shown in search results.
Core Web Vitals Explained
Google uses three Core Web Vitals as the primary ranking signals. Each has a target threshold and heavily influences your overall score:
Fix Largest Contentful Paint (LCP)
LCP is usually your hero image or the H1 heading. The most common causes of slow LCP are:
- ✕Slow server response (TTFB over 800ms)
- ✕Render-blocking JavaScript and CSS
- ✕Hero image not preloaded or too large
- ✕No CDN — assets served from origin only
Quick Win
Add <link rel="preload" as="image"> for your hero image in the document <head>. This alone can improve LCP by 300–800ms.
Fix Cumulative Layout Shift (CLS)
CLS happens when elements move during page load — usually because images or ads don't have explicit dimensions, or web fonts cause a text reflow.
<!-- ❌ Bad: no dimensions --> <img src="hero.webp" alt="Hero"> <!-- ✅ Good: explicit width/height --> <img src="hero.webp" alt="Hero" width="1200" height="600"> /* CSS: aspect-ratio prevents reflow */ img { aspect-ratio: 16/9; width: 100%; height: auto; }
Fix Interaction to Next Paint (INP)
INP replaced FID in March 2024. It measures the worst interaction latency throughout the entire page visit — not just the first click. The main culprits are long JavaScript tasks blocking the main thread.
Diagnose Long Tasks
Open Chrome DevTools → Performance tab → record a page interaction. Any task over 50ms appears as a red triangle. Break these up using setTimeout or move them to a Web Worker.
Image Optimisation
Images are typically the largest assets on a page. Serve them in next-gen formats and at the right dimensions for each breakpoint.
| Format | Best For | Savings vs JPEG | Browser Support |
|---|---|---|---|
| WebP | Photos, hero images | 25–35% | 96% |
| AVIF | Photos, art-directed | 40–55% | 80% |
| SVG | Icons, logos, patterns | N/A | 100% |
| JPEG | Fallback only | Baseline | 100% |
Caching & CDN
Without a CDN, every visitor downloads assets from your origin server, adding latency based on geographic distance. With a CDN, assets are cached at edge nodes worldwide.
Set long Cache-Control headers for versioned static assets (JS, CSS, images with hash filenames) and short ones for HTML documents. A good default: max-age=31536000, immutable for assets,no-cache for HTML.
How Your Hosting Affects PageSpeed
Even a perfectly optimised page will score poorly if your hosting is slow. TTFB (Time to First Byte) is the first thing Lighthouse measures — and it's entirely determined by your server.
Final Checklist
Run through this list before declaring your page "done". Each item is worth 1–10 points in PageSpeed Insights.