Skip to main content
Documentation

PageSpeed Insights

PageSpeed Insights uses Google Lighthouse to measure your page's real-world performance. These metrics directly affect Core Web Vitals — a confirmed Google ranking signal — and user experience. ContentVitals runs the mobile test by default, since Google uses mobile-first indexing.

Performance Score

What it measures

An overall score from 0-100 calculated by Lighthouse, Google's automated auditing tool. It combines all Core Web Vitals and other performance metrics into a single number.

Thresholds

90-100 is good (green), 50-89 needs improvement (amber), below 50 is poor (red).

How to improve

  • Optimize images — use modern formats (WebP, AVIF), proper sizing, and lazy loading for below-the-fold images.
  • Minimize render-blocking resources — defer non-critical CSS and JavaScript.
  • Enable compression (gzip/brotli) and caching headers for static assets.
  • Use a CDN to serve content closer to your users.

Largest Contentful Paint (LCP)

What it measures

Measures the time until the largest visible element (hero image, heading block, or video) finishes rendering. This is what users perceive as the page "loading".

Thresholds

Good: ≤2.5s. Needs improvement: 2.5-4s. Poor: >4s.

How to improve

  • Preload your LCP element — if it's an image, use <link rel="preload"> or the fetchpriority="high" attribute.
  • Avoid lazy-loading above-the-fold images — they should load immediately.
  • Reduce server response time (TTFB) with caching, CDN, or server-side optimizations.
  • Avoid large layout shifts that delay when the largest element becomes visible.

Cumulative Layout Shift (CLS)

What it measures

Measures visual stability — how much the page layout unexpectedly shifts during loading. High CLS means elements jump around, which frustrates users (e.g., clicking the wrong button because content shifted).

Thresholds

Good: ≤0.1. Needs improvement: 0.1-0.25. Poor: >0.25.

How to improve

  • Always set explicit width and height attributes on images and videos.
  • Reserve space for ads, embeds, and iframes with fixed-size containers.
  • Avoid inserting content above existing content after page load (e.g., cookie banners that push content down).
  • Use CSS contain or aspect-ratio to prevent reflows.

First Contentful Paint (FCP)

What it measures

Measures the time from navigation until the browser renders the first piece of DOM content — any text, image, or canvas element. This is the user's first visual feedback that the page is loading.

Thresholds

Good: ≤1.8s. Needs improvement: 1.8-3s. Poor: >3s.

How to improve

  • Reduce server response time — optimize backend, use caching, consider edge rendering (SSR at the CDN).
  • Eliminate render-blocking resources — inline critical CSS, defer non-essential scripts.
  • Minimize DOM size — large DOM trees slow down parsing and rendering.
  • Use font-display: swap or preload critical fonts to avoid invisible text during loading.

Total Blocking Time (TBT)

What it measures

Measures the total time the main thread was blocked by long tasks (>50ms) between FCP and Time to Interactive. During these blocks, the page can't respond to user input — clicks, taps, and scrolls feel unresponsive.

Thresholds

Good: ≤200ms. Needs improvement: 200-600ms. Poor: >600ms.

How to improve

  • Break up long JavaScript tasks into smaller, asynchronous chunks.
  • Remove or defer unused JavaScript — audit with Chrome DevTools Coverage tab.
  • Avoid large synchronous computation on the main thread — offload to Web Workers if needed.
  • Reduce third-party script impact — defer analytics, chat widgets, and ad scripts.

Further Reading