Core Web Vitals are the speed and user experience metrics Google has used as a ranking signal since 2021. The thresholds have not changed since then, except that INP replaced FID in March 2024. When several pages are equally relevant, a website that meets these thresholds has an edge in search results. This guide explains how to understand, measure and optimise each Core Web Vitals metric to improve your website speed.
Key points in this article
- Core Web Vitals have been an official Google ranking factor since 2021, and slow websites lose positions in the SERPs
- The three main metrics in 2026: LCP (loading) with a target under 2.5 seconds, INP (interactivity) under 200ms and CLS (visual stability) under 0.1
- Unoptimised images are a common cause of poor LCP. Converting to WebP and lazy loading the images below the first screen make the page lighter
- Render-blocking JavaScript and CSS are the main enemies of Core Web Vitals, so defer/async loading is essential
- WordPress can reach Core Web Vitals scores of 90+ on mobile with a combination of fast hosting, a caching plugin and a CDN
- On-Page SEO Techniques That Still Work in 2026
- What Is SEO? A Complete Beginner's Guide for Indonesian Online Businesses
- How to Set Up Rank Math SEO for Beginners: A Complete 2026 Guide
What are Core Web Vitals?
Core Web Vitals are a set of metrics Google developed to measure real user experience on websites. They look at the speed users actually perceive when they open and interact with your pages, rather than the technical speed measured at the server. In 2026, the three main Core Web Vitals are:
- LCP (Largest Contentful Paint): how quickly the main content (the largest image or block of text) appears on screen
- INP (Interaction to Next Paint): how quickly the page responds to user interactions (clicks, taps, typing). It replaced FID in March 2024
- CLS (Cumulative Layout Shift): how stable the page elements are, in other words whether content shifts around while loading and disrupts the user's experience
Core Web Vitals targets for 2026
Google sorts each metric into three bands: Good, Needs Improvement and Poor. Aim for the “Good” band to gain a competitive edge:
- LCP: Good at 2.5 seconds or less, Needs Improvement from 2.5 to 4.0 seconds, Poor above 4.0 seconds
- INP: Good at 200ms or less, Needs Improvement from 200 to 500ms, Poor above 500ms
- CLS: Good at 0.1 or less, Needs Improvement from 0.1 to 0.25, Poor above 0.25
How to measure Core Web Vitals
Before you optimise anything, you need to measure where you stand. The best measurement tools are:
- PageSpeed Insights (pagespeed.web.dev): gives you field data (real user data from the Chrome User Experience Report) and lab data. It is the easiest to use
- Google Search Console > Core Web Vitals report: field data from your website's real users, broken down by page
- Chrome DevTools > Lighthouse: an in-depth audit with specific recommendations for developers
- Web Vitals Chrome extension: measures Core Web Vitals in real time while you browse your own website
How to optimise LCP (Largest Contentful Paint)
LCP measures how quickly the largest piece of content in the viewport appears, usually a hero image, a large heading or a video. These are the most common causes of slow LCP and how to fix them:
1. Optimise your hero image
A large hero image (over 200KB) is the biggest cause of slow LCP on most websites. The fix:
- Convert images to WebP or AVIF (according to Google, WebP files are on average 25–34% smaller than JPEGs of similar quality, and AVIF is usually smaller still)
- Use responsive images with the
srcsetattribute to serve the right image size for each device - Add the
fetchpriority="high"attribute to your LCP image's img tag so the browser loads it first - Avoid lazy loading images that are above the fold (visible without scrolling)
2. Hosting and server response time
A high TTFB (Time to First Byte) has a direct effect on LCP. Aim for a TTFB under 600ms. The fix:
- Use hosting with servers in Indonesia or Singapore for Indonesian visitors (Hostinger has a data centre in Jakarta)
- Turn on server-level caching: LiteSpeed Cache (included with Hostinger) and Redis Object Cache
- Use a CDN (Cloudflare) to serve content from the server closest to each visitor
3. Remove render-blocking resources
CSS and JavaScript that block rendering slow down the whole page load. Use a plugin such as WP Rocket or LiteSpeed Cache to defer non-critical JavaScript, remove unused CSS and inline critical CSS.
How to optimise INP (Interaction to Next Paint)
INP measures how long the page takes to respond to each user interaction: a button click, a tap on a link, keyboard input. A high INP makes a website feel “laggy” or unresponsive. Causes and fixes:
- Heavy JavaScript: audit and reduce the JavaScript that runs during interactions. Use the Performance panel in Chrome DevTools to find long tasks
- Third-party scripts: too many chat, advertising and analytics plugins are a frequent cause of high INP. Load third-party scripts async, deferred or lazily
- A very large DOM: pages with 1,500+ DOM elements render more slowly. Streamline the HTML structure and virtualise long lists
- Heavy interaction event handlers: keep JavaScript event handlers (click, scroll, input) as light as possible. Move heavy work to Web Workers or use requestAnimationFrame
How to optimise CLS (Cumulative Layout Shift)
CLS measures how much content moves unexpectedly while the page loads. It is that irritating moment when you are about to click a button, the content jumps and you click the wrong thing. The biggest causes of CLS are:
- Images without explicit dimensions: always add
widthandheightattributes to every img element, or use CSS aspect-ratio. The browser needs to know the dimensions before the image loads so it can reserve the space - Ads and embeds without dimensions: reserve space for ads and embeds (YouTube, maps) with placeholders that have explicit dimensions
- Web fonts that cause FOUT/FOIT: use font-display: swap and preload critical fonts. Consider a system font stack for body text if performance is the priority
- Dynamically injected content: cookie banners, notifications or content that appears above existing content all cause layout shifts. Make sure dynamic content appears in space that has already been set aside, not on top of existing content
WordPress plugins for Core Web Vitals optimisation
If you use WordPress without deep technical expertise, these plugins automate many Core Web Vitals optimisations:
- LiteSpeed Cache: free on Hostinger hosting with a LiteSpeed server. It handles caching, minification, lazy loading and critical CSS automatically, and is the best all-in-one option for WordPress on Hostinger
- WP Rocket: a premium caching plugin ($59/year) with user-friendly settings. It improves every Core Web Vitals metric significantly with minimal configuration
- Perfmatters: a lightweight performance plugin ($24.95/year) for disabling unnecessary scripts and optimising the database
- ShortPixel / Imagify: automatic image compression and conversion to WebP/AVIF to improve LCP
- Autoptimize: free, and handles CSS/JS minification and script deferral
A recommended Core Web Vitals optimisation workflow
- Step 1: Measure your baseline. Record your current PageSpeed Insights scores for desktop and mobile
- Step 2: Find the biggest problem. Focus on the metric furthest from the “Good” target
- Step 3: Fix issues one at a time and measure again after each fix
- Step 4: Monitor through Google Search Console at least once a month
- Step 5: Whenever you add a plugin, change your theme or make a significant change, measure its effect on Core Web Vitals again
Optimising Core Web Vitals takes deep technical knowledge and a fair amount of time. The Webzoo team can help through our website development and SEO services, including measuring and fixing your website's Core Web Vitals.
A fast website with optimised Core Web Vitals
Webzoo optimises your website's speed and Core Web Vitals professionally and measurably, with fast LCP, responsive INP and stable CLS to support better Google rankings.
Free website speed audit
