Website performance dashboard

How to Optimize a Website’s Core Web Vitals and Page Speed Score

houseAnan Aziz Mar 14, 2021

What Are Core Web Vitals?

Google’s Core Web Vitals are a set of performance metrics that measure real-world user experience on your website. These focus on loading speed, interactivity, and visual stability.

The three primary Core Web Vitals are:

  1. Largest Contentful Paint (LCP) – How fast the main content loads (ideal: ≤ 2.5s)
  2. First Input Delay (FID) – How quickly users can interact (ideal: ≤ 100ms)
  3. Cumulative Layout Shift (CLS) – How stable the layout is while loading (ideal: ≤ 0.1)

Improving these metrics boosts both SEO rankings and user satisfaction.

How to Measure Core Web Vitals

You can use the following free tools to assess your site’s performance:

These tools provide actionable suggestions to improve your scores.

Optimization Tips for Each Vital

1. Improve Largest Contentful Paint (LCP)

  • Use a fast web host and CDN (like Cloudflare).
  • Minify CSS, JS, and HTML.
  • Compress images using WebP or AVIF formats.
  • Preload important assets like fonts or hero images.
  • Reduce TTFB (Time to First Byte) by optimizing server response time.

2. Reduce First Input Delay (FID)

  • Minimize heavy JavaScript execution.
  • Split JS into smaller bundles using code-splitting.
  • Use lazy loading for scripts and components.
  • Defer unused third-party code (like analytics or chat widgets).
  • Prioritize critical user interactions (like buttons and menus).

3. Fix Cumulative Layout Shift (CLS)

  • Always set width and height on images and videos.
  • Avoid inserting content above existing elements on load.
  • Preload fonts to prevent late layout changes.
  • Don’t inject ads or banners without reserving space.
  • Animate using transform and opacity, not layout-affecting properties.

Bonus: Boosting Overall Page Speed Score

  • Enable GZIP or Brotli compression.
  • Use server-side rendering (SSR) for dynamic content.
  • Set caching headers correctly (especially for static assets).
  • Remove unused CSS and JavaScript with tools like PurgeCSS.
  • Consider a static site generator for content-heavy pages.

Conclusion