Core Web Vitals: A Practical Guide to LCP, INP, and CLS

Why Core Web Vitals Decide Your Ranking

Your site is on Google's first page, and you're getting traffic, but your conversion rate is low. Users enter and close the page after a few seconds. You open the PageSpeed Insights report and see three red metrics: LCP at 4.8 seconds, INP at 600 milliseconds, and CLS at 0.35. These numbers are not just a warning; Google has been applying these metrics directly in its mobile ranking algorithm since March 2024. That means right now, your competitor—with a page that's weaker in content but faster technically—is ranking above you.

Core Web Vitals are three metrics that measure the actual user experience, not raw server speed. This difference is crucial. An NVMe server with a 10-gigabit connection can deliver a response in 50 milliseconds, but if JavaScript blocks the browser, the user still sees a blank page.

LCP: When Does the Largest Visible Content Load

LCP, or Largest Contentful Paint, measures the moment when the largest visible element on the page (usually a hero image, main heading, or video) is rendered. Google's passing threshold is 2.5 seconds. Between 2.5 and 4 seconds needs improvement, and above 4 seconds means you've failed.

For accurate measurement, use the following command in Chrome DevTools:

npx lighthouse https://example.com --only-categories=performance --output=json --output-path=report.json

This command generates a complete JSON report whose LCP section shows TTFB times, resource load times, and render delay separately. If you want to see real user data, go to the Core Web Vitals report in Google Search Console and enable the "Mobile" filter.

Why TTFB Goes Up

The most common reason I see in Persian-language sites is slow DNS or a crowded shared server. If your TTFB is above 800 milliseconds, first check DNS. You can measure DNS response time with the following command:

dig +stats example.com | grep "Query time"

If Query time is above 100 milliseconds, the problem is DNS. If DNS is healthy, check the server. A practical solution for WordPress sites is using server-level page caching. Plugins like WP Rocket or LiteSpeed Cache can reduce TTFB from 1.2 seconds to 200 milliseconds.

Images: The Silent LCP Killer

Serve the hero image in WebP or AVIF format. A three-megabyte JPEG image can increase LCP by 2 seconds. The conversion command with ImageMagick:

convert hero.jpg -quality 80 -resize 1920x1080 hero.webp

Also, add the fetchpriority="high" attribute to the LCP image so the browser loads it before other resources. This is a one-line change whose impact you'll see immediately in the report.

Here's where people make mistakes: many only compress the image but put loading="lazy" on the same hero image. The result? The browser waits for the image to enter the viewport and then starts loading it. Your LCP gets 1.5 seconds worse, and nobody understands why. Simple rule: the LCP image should never be lazy.

INP: Page Responsiveness to User Interaction

INP, or Interaction to Next Paint, replaced FID in March 2024. The fundamental difference is that FID only measured the first interaction, but INP records the worst interaction across the entire page lifetime. That means if a user interacts with a button in the third minute and the browser stays blocked for 800 milliseconds, that same number lands in your report.

The passing threshold for INP is below 200 milliseconds. Between 200 and 500 milliseconds needs improvement, and above 500 means failure. To measure it, use the following command:

npx @puppeteer/browsers install chrome@stable

Then write a Node.js script that opens the page with Puppeteer, clicks on several elements, and records INP. A simpler method: install the Web Vitals extension in Chrome and work with the real page.

The Main Culprit of INP: Heavy JavaScript

Every script that runs on the browser's main thread increases INP. Analytics scripts, live chat, sliders, and complex CSS animations all contribute. To diagnose, open the Performance tab in DevTools and record an interaction. If you see a function taking 300 milliseconds, move it to another thread with a Web Worker.

An immediate solution: load non-essential scripts with defer. This attribute tells the browser to execute the script after fully parsing the HTML, not when it reaches it. Changing from the default state to defer usually improves INP by 30 to 40 percent.

There's a real trade-off here: completely removing JavaScript makes INP excellent, but if your site is an online store, the shopping cart and filters won't work without JS. My choice: inline critical scripts, load the rest with defer, and completely remove scripts that play no role in user interaction (like chat bots). If live chat is critical for you, enable it only on the contact page, not on all pages.

CLS: Sudden Shifting of Page Elements

CLS, or Cumulative Layout Shift, measures the amount of unexpected movement of elements during the page's lifetime. The passing threshold is below 0.1. Above 0.25 means failure. This metric is directly related to user trust; when a user clicks a button and an ad banner suddenly shifts its position, a mistaken click occurs.

The biggest cause of CLS in Persian-language sites is images without specified dimensions and web fonts. For images, always specify width and height in the HTML:

<img src="product.jpg" width="800" height="600" alt="Product">

This tells the browser to reserve the necessary space before loading the image. For fonts, use font-display: swap so text displays with the default font and then gets replaced after the web font loads. This simple change can bring CLS from 0.3 down to 0.05.

Here's where they make mistakes: ad banners or sliders that appear after the page loads. If a 300-pixel banner appears above the content after 2 seconds, your CLS goes up by 0.25. Solution: reserve the banner space in advance with an empty div, or move the banner to the bottom of the page.

Optimization Order: Where to Start

If your budget is limited, fix CLS first. Why? Because it's the simplest and fastest improvement. Adding dimensions to images and adjusting font-display usually gets done in one day and has an immediate impact. After that, target LCP; because it usually has one main problem (heavy image or high TTFB). Leave INP for last; because it requires deeper JavaScript analysis.

For continuous monitoring, use free tools. ServerNet's SEO and webmaster tools include PageSpeed Insights and Core Web Vitals reports. If your site is on shared hosting and TTFB won't go below 500 milliseconds, it's time to migrate to a dedicated or cloud server. This is a cost, but if your revenue depends on Google ranking, it's a reasonable investment.

An important note: don't confuse Core Web Vitals with general speed testing tools. Tools like GTmetrix and Pingdom show raw speed, but Google's metrics measure user experience. A site can have excellent TTFB but poor LCP because the hero image is heavy. Always trust data from Google Search Console and PageSpeed Insights, not general tools.

Frequently Asked Questions

Do Core Web Vitals directly affect Google ranking?

Yes, since March 2024 these metrics are part of mobile ranking signals. But an important point: this is just one of hundreds of signals. A site with excellent content and strong links can still rank well with poor Core Web Vitals, but if two sites are equal in content, the one that passes these metrics will rank higher.

Why did INP replace FID?

FID only measured the user's first interaction, and if the user first scrolled the page and then clicked, it showed a good number. INP records the worst interaction across the entire page lifetime, so it provides a more accurate picture of the real user experience. This change has been applied since March 2024.

Do Core Web Vitals apply to desktop as well?

Yes, Google reports these metrics separately for mobile and desktop. But mobile takes priority because most Google traffic comes from mobile devices. If you have a limited budget, optimize mobile first and then desktop.

How long does it take for Core Web Vitals improvements to show in ranking?

Google usually takes between 2 to 4 weeks after applying changes to collect and index new data. If you apply changes today, you'll see the result in the Search Console report about 28 days later. Be patient and check the report weekly.

If you want to continue the optimization path professionally, ServerNet's SEO services include a complete technical analysis of Core Web Vitals and implementation of fixes. But before any action, do one thing today: open your site's PageSpeed Insights report and write down the three numbers—LCP, INP, and CLS. A month later, compare those same numbers. This is the only way to know whether you've truly made progress or not.