ThisCalculator

Everyday

Improve Core Web Vitals: A Step-by-Step Guide

Updated · Standard formula, shown below

Core Web Vitals are a set of Google-defined metrics that measure how fast your page loads, how quickly it responds to user input, and how stable it is while loading. Improving them directly boosts your site’s user experience and can positively impact search rankings. This guide walks you through practical, code-level fixes for the three main metrics: LCP, INP, and CLS.

What You’ll Need

  • Access to your website’s backend (cPanel, FTP, or a hosting file manager)
  • Ability to edit HTML, CSS, and JavaScript files
  • A free tool to measure Core Web Vitals: Google PageSpeed Insights, Chrome DevTools, or the Web Vitals extension
  • Basic understanding of HTML tags and browser caching

Step-by-Step

  1. Measure your current scores. Go to PageSpeed Insights, enter your URL, and run the test. Note your LCP, INP, and CLS values for both mobile and desktop. Also check the “Diagnostics” section for specific issues like “Reduce initial server response time” or “Avoid enormous network payloads.”
  2. Optimize your Largest Contentful Paint (LCP). The LCP element is usually a hero image, a large heading, or a video poster.
    • Compress and resize images: Use modern formats like WebP or AVIF. Aim for under 200 KB on the LCP image.
    • Add fetchpriority="high" to the LCP image tag so the browser loads it first.
    • Preload the LCP image: Add <link rel="preload" as="image" href="hero.webp"> in the <head>.
    • Upgrade your hosting or enable caching to reduce server response time (TTFB). A CDN like Cloudflare can help.
  3. Improve Interaction to Next Paint (INP). INP measures how quickly the page responds to clicks or taps.
    • Minify and defer JavaScript: Move non-critical scripts to the footer or add defer or async attributes.
    • Break up long tasks: If you have complex scripts, split them into smaller chunks using setTimeout or the requestIdleCallback API.
    • Remove unused JavaScript and CSS: Use Chrome DevTools → Coverage to find dead code and delete it.
    • Use a plugin or tool to lazy-load below-the-fold images and iframes, but never lazy-load the LCP element.
  4. Reduce Cumulative Layout Shift (CLS). CLS is caused by elements shifting after they load.
    • Set explicit width and height attributes on all images and videos. This reserves space before the file loads.
    • For ads or embeds, reserve a fixed-size container (e.g., a div with a set aspect ratio) so they don’t push content down.
    • Use font-display: swap in your @font-face CSS to avoid invisible text, but also set a fallback font with similar metrics to reduce shift.
    • Avoid inserting content above the fold after the page loads, such as banners that appear after a delay.
  5. Enable browser caching. In your .htaccess file (Apache) or nginx config, add cache headers for static assets like images, CSS, and JS. Set an expiration of at least one year for files with version numbers in their URLs.
  6. Use a CDN. A Content Delivery Network serves your files from servers close to the user, drastically reducing latency and improving LCP. Many hosts offer a built-in CDN, or you can use a free one like Cloudflare.
  7. Re-test and iterate. After each change, run PageSpeed Insights again. Focus on the field data (real user experience) if available, but lab data is fine for testing. Aim for LCP under 2.5 seconds, INP under 200 ms, and CLS under 0.1.

Common Mistakes

  • Ignoring mobile. Most traffic is mobile, and Core Web Vitals are evaluated separately for mobile. Always test and optimize for the smallest screen.
  • Over-optimizing images. Compressing too much can make images blurry. Use a balance of quality and size; tools like Squoosh or TinyPNG help.
  • Lazy-loading the LCP image. This delays the largest element and hurts LCP. Never lazy-load the hero image.
  • Using too many plugins. Each plugin adds JavaScript. Audit your plugins and remove any that aren’t essential.
  • Not testing after changes. A fix for one metric can hurt another. Always re-run the full test.

Tips

  • Use a tool like Lighthouse in Chrome DevTools to get a detailed report. It tells you exactly which elements are slow.
  • Consider using a performance plugin if you’re on WordPress, like WP Rocket or Perfmatters, but configure them carefully.
  • For CLS, always include width and height attributes on images, even if you use CSS to make them responsive. This is the single most effective CLS fix.
  • Use srcset to serve different image sizes for different screen widths.
  • Keep your server response time under 200 ms. If it’s higher, consider upgrading your hosting plan or using a faster DNS provider.

Troubleshooting

My LCP is still slow after compressing images. Check if the LCP element is a text block. If so, ensure your fonts are preloaded and use font-display: swap. Also, check if your server is slow—run a TTFB test. If TTFB is over 600 ms, switch to a better host or enable server-side caching.

INP is still high even after minifying JS. You might have a long-running script that blocks the main thread. Use Chrome DevTools → Performance to record a trace and find the “Long Tasks”. Split them up, or move the logic to a Web Worker if possible.

CLS is still bad after setting image dimensions. Look for elements that are inserted dynamically, like ads or cookie banners. Reserve space for them using a fixed-height container or use the content-visibility: auto CSS property to defer rendering off-screen elements.

PageSpeed shows “Reduce JavaScript execution time”. This is often caused by too many libraries. Replace heavy libraries with lighter alternatives, or use the defer attribute to load them after the page is interactive.

Changes don’t show up in PageSpeed. Clear your browser cache and use an incognito window. Also, PageSpeed Insights caches results; click the “Refresh” button or wait a few minutes.

Frequently Asked Questions

What is a good Core Web Vitals score?

Google defines “good” as LCP under 2.5 seconds, INP under 200 milliseconds, and CLS under 0.1. Scores between good and poor are considered “needs improvement”.

Do Core Web Vitals affect SEO?

Yes, they are a ranking factor for Google search results, especially for mobile. However, they are not the only factor; content relevance and backlinks still matter.

How long does it take to see improvements?

Lab tests (like PageSpeed Insights) reflect changes immediately. Field data (from real users) may take a few days to update, as it aggregates data over a 28-day period.

Can I fix Core Web Vitals without coding?

Yes, if you use a website builder or CMS, you can install performance plugins that handle image compression, caching, and lazy loading automatically. But you may still need to manually set image dimensions.

What is the difference between LCP and FCP?

First Contentful Paint (FCP) is when the first text or image appears. Largest Contentful Paint (LCP) is when the largest element (usually the hero) appears. LCP is more important because it indicates when the page is actually usable.

Is it better to use a CDN or a faster host?

Both help, but they solve different problems. A faster host reduces server response time (TTFB). A CDN reduces latency by serving files from a nearby server. Ideally, use both.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.