Core Web Vitals 2026 Checklist: LCP, INP, CLS Optimization Guide

Last week a client from the Netherlands called me: "Miraç, our site loads in 2.8 seconds on mobile but we're getting LCP warnings in Google Search Console. What should we do?" This is a question I've heard dozens of times in 2024. Google is increasing Core Web Vitals weight towards 2026 and most sites still aren't ready. Since 2021, I've fixed Core Web Vitals scores for dozens of Turkish sites at FUTIA. While optimizing 79,000 doctor profiles on doktorbul.com, I reduced LCP from 4.2 seconds to 1.8 seconds. After fixing CLS issues on diolivo.com.tr, we saw 340% traffic growth in 6 months. In this post, I'm sharing the updated checklist for 2026 with real cases and technical details. If your site loads above 2.5 seconds on mobile or you're seeing yellow/red warnings in Search Console, this guide is for you.

Why Are Core Web Vitals Critical in 2026?

Google made Core Web Vitals a ranking factor with the Page Experience Update in 2021. In March 2024, it replaced FID with the INP (Interaction to Next Paint) metric. In a document published at the end of 2025, it announced that Core Web Vitals weight will increase in 2026. For now it's a "light" ranking factor, but Google's direction is clear: sites with poor user experience will fall behind.

Working with clients at FUTIA, I've seen this: sites with "good" Core Web Vitals scores get an average of 15-20% more traffic than competitors with the same content quality. The difference is especially noticeable in mobile searches. Mobile user rate in Turkey is above 75%, so not doing Core Web Vitals optimization means risking three-quarters of your traffic.

Google emphasizes three metrics for 2026: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) and CLS (Cumulative Layout Shift). If you can't keep these three at "good" level, your SEO efforts will remain half-effective. In this post, I'll address each metric separately and explain technical solutions step by step.

What Is LCP (Largest Contentful Paint) and How to Optimize It?

LCP measures how long it takes for the largest content element in the page's visible area to load. According to Google, LCP should be below 2.5 seconds. Between 2.5-4 seconds is "needs improvement", above 4 seconds is considered "poor".

While solving the LCP problem on doktorbul.com, I noticed this: the largest content element is usually the hero image or top banner. If this image is above 500 KB and loads with lazy loading, LCP automatically comes out poor. Here's the step-by-step solution:

1. Prioritize the Hero Image

If there's a large image at the top of the page, add a "priority" attribute to it. If you're using WordPress, add fetchpriority="high" to the relevant img tag in theme files. Also disable lazy loading for the hero image: loading="eager". These two changes reduced LCP by 1.2 seconds on doktorbul.com.

2. Convert Images to WebP or AVIF Format

JPEG and PNG images are very heavy. At FUTIA, I recommend WebP to all clients. AVIF provides better compression but browser support is still below 90%. If you're using Cloudflare or Bunny CDN, enable automatic format conversion. On doktorbul.com, we converted the 1.2 MB hero image to WebP and reduced it to 180 KB.

3. Reduce Server Response Time (TTFB)

LCP is directly related to TTFB (Time to First Byte). If your server responds in 800 ms, LCP already exceeds 2.5 seconds. While serving Turkish sites from the Netherlands, I use Cloudflare CDN. On diolivo.com.tr, we reduced TTFB from 650 ms to 220 ms just by optimizing CDN settings.

4. Optimize CSS and JavaScript

Render-blocking resources kill LCP. Add critical CSS inline, load the rest with defer. Use async or defer for JavaScript. While auto-generating 618 recipe pages on italyanmutfagi.com, I added only 8 KB of critical CSS inline on each page. We loaded the remaining 45 KB CSS with defer. LCP dropped from 3.1 seconds to 1.9 seconds.

5. Use Preconnect and DNS-Prefetch

If your page has Google Fonts, Google Analytics or third-party CDN, add preconnect:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

This small change reduced LCP by 0.3 seconds on kamupersonelhaber.com.

What Is INP (Interaction to Next Paint) and How to Fix It?

INP measures how long it takes for the page to respond visually when a user clicks a button or types in an input field. In March 2024, Google completely removed FID (First Input Delay) and introduced INP. INP should be below 200 ms, between 200-500 ms is "needs improvement", above 500 ms is "poor".

While solving the INP problem on memuratamalari.com, I saw this: the page gets 40,400 monthly organic searches but when users clicked the "Filter" button, there was a 680 ms delay. The problem was synchronous processing of responses from the Claude Haiku API. Here are the solution steps:

1. Break Up Long JavaScript Tasks

The browser marks JavaScript tasks longer than 50 ms as "long task". To reduce INP score, you need to break up long tasks. While processing Claude API responses on memuratamalari.com, we split a single 1200 ms loop into 6 parts. We gave the browser a chance to render by adding setTimeout(() => {}, 0) between each part. INP dropped from 680 ms to 180 ms.

2. Use Debounce and Throttle

If you're making an API call on every keystroke while a user types in an input field, INP explodes. Add debounce: make the API call 300 ms after the user stops typing. After adding debounce to the search bar on diolivo.com.tr, INP dropped 40%.

3. Defer Third-Party Scripts

Third-party scripts like Google Analytics, Facebook Pixel, Hotjar slow down INP. Load them all with defer, or better yet, use a web worker solution like Partytown. At FUTIA, I recommend Cloudflare Zaraz to clients: all third-party scripts run on Cloudflare edge, not blocking the main thread.

4. Optimize Event Handlers

If 10 different functions run when a button is clicked, INP increases. Use event delegation: add an event listener to a single parent element, capture child elements inside with event.target. On doktorbul.com with 79,000 doctor profiles, instead of separate listeners for each profile's "Book Appointment" button, we used a single delegated listener. INP dropped 25%.

What Is CLS (Cumulative Layout Shift) and How to Prevent It?

CLS measures unexpected layout shift during page loading. According to Google, CLS should be below 0.1, between 0.1-0.25 is "needs improvement", above 0.25 is "poor". CLS is the only metric that directly affects user experience: if the page shifts while a user is about to click a button, they click the wrong place.

While solving the CLS problem on diolivo.com.tr, the biggest source was banner ads. Because space wasn't reserved before the ad loaded, the page got a CLS score of 0.18. Here's the solution:

1. Add Width and Height Attributes to Images

If an img tag doesn't contain width and height attributes, the browser doesn't reserve space until the image loads. The page shifts. Add explicit width and height to every img tag:

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

While auto-generating 618 recipe pages on italyanmutfagi.com, we added fixed width/height to each recipe image along with Schema.org Recipe. CLS dropped from 0.14 to 0.03.

2. Reserve Space for Ads and Embeds

If you're using Google Adsense, YouTube embed or Instagram embed, reserve space before they load. Give min-height with CSS:

.ad-container {
  min-height: 250px;
}

We added 280px min-height for banner ads on diolivo.com.tr, CLS dropped from 0.18 to 0.06.

3. Optimize Web Fonts

The text area can shift while web fonts load. Use font-display: swap but be careful: swap creates FOUT (Flash of Unstyled Text) and can increase CLS. Better solution: font-display: optional or preload the font file:

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

We used self-hosted fonts instead of Google Fonts on kamupersonelhaber.com, CLS dropped 30%.

4. Use Placeholders for Dynamic Content

If you're fetching data from an API while the page loads, show a placeholder until the data arrives. Skeleton screen is the best solution. On memuratamalari.com, we show 10 skeleton cards while the listing loads. CLS is close to zero.

Core Web Vitals Checklist for 2026

Here's the step-by-step checklist I use at FUTIA. After completing each item, test with Google PageSpeed Insights or Chrome DevTools:

For LCP:

• Prioritize hero image (fetchpriority="high", loading="eager")
• Convert images to WebP/AVIF
• Use CDN (Cloudflare, Bunny, Fastly)
• Reduce TTFB below 300 ms
• Add critical CSS inline
• Use preconnect and DNS-prefetch
• Disable lazy loading for above-the-fold content

For INP:

• Break up JavaScript tasks longer than 50 ms
• Add debounce and throttle
• Defer third-party scripts or use web worker
• Implement event delegation
• Use passive event listeners (especially for scroll and touch events)
• Defer background tasks with RequestIdleCallback

For CLS:

• Add width and height attributes to all images
• Give min-height for ad and embed areas
• Preload web fonts or use font-display: optional
• Add skeleton screen for dynamic content
• Don't use position: absolute or fixed in above-the-fold
• Use transform and opacity in animations (not width, height, top, left)

Real Case: doktorbul.com Core Web Vitals Optimization

doktorbul.com is a healthcare platform hosting 79,000 doctor profiles. When they came to me in early 2023, the mobile Core Web Vitals score was completely red: LCP 4.2 seconds, INP 520 ms, CLS 0.22. In Google Search Console, 68,000 URLs were marked as "poor".

The first thing I did was analyze the slowest page with Chrome DevTools. Problems:

1. Doctor profile photo 1.8 MB, JPEG format 2. Google Maps embed loading without lazy loading 3. 12 different third-party scripts (Google Analytics, Facebook Pixel, Hotjar, etc.) 4. CSS file 180 KB, render-blocking 5. Web font (Poppins) loading in 4 different weights

Solution steps:

• We converted all doctor photos to WebP with Cloudflare Image Resizing, average size dropped from 1.8 MB to 240 KB
• We loaded Google Maps embed with lazy loading, it doesn't load until the user scrolls to the map
• We moved third-party scripts to Cloudflare Zaraz
• We added critical CSS (8 KB) inline, loaded the rest with defer
• We reduced the web font to 2 weights, added preload

Result: 3 weeks later LCP 1.8 seconds, INP 180 ms, CLS 0.04. In Google Search Console, the number of "good" URLs increased from 4,200 to 71,000. Organic traffic increased 28% in 6 months.

Testing and Monitoring Tools

Core Web Vitals optimization is an ongoing job. At FUTIA, I do monthly monitoring for each client. Tools I use:

Google PageSpeed Insights: The most basic tool. Shows lab data (synthetic test) and field data (real users). But note: a single test isn't enough, test 5-10 times and take the average.

Chrome DevTools: Under the Performance tab, simulate real user flow with "Record". You can see LCP, INP and CLS with millisecond precision. I used DevTools every day while optimizing doktorbul.com.

Google Search Console: The Core Web Vitals report shows the status of all your site's URLs. Divided into "poor", "needs improvement" and "good" categories. From here you can see which page types are problematic.

WebPageTest: For more detailed analysis. You can test from different locations, different devices. With the waterfall chart, you see which resource loads in how long.

Lighthouse CI: If you're doing continuous deployment, you can test Core Web Vitals on every commit with Lighthouse CI. At FUTIA, I integrated it with GitHub Actions, automatic tests run on every PR.

Vercel Analytics or Cloudflare Web Analytics: For real user data (RUM - Real User Monitoring). More precise than Google Analytics, records Core Web Vitals metrics on every page load.

Instead of Conclusion: The Next Step

Core Web Vitals optimization is one of the most effective but least done tasks on the technical side of SEO. Since 2021, I've fixed LCP, INP and CLS metrics on dozens of Turkish sites. We saw 28% on doktorbul.com, 340% traffic growth on diolivo.com.tr. In 2026, Google will give more weight to these metrics, you need to act now.

If you don't know your site's Core Web Vitals score, the first step is testing on Google PageSpeed Insights. If your mobile score is below 50 or you're seeing thousands of "poor" URLs in Search Console, get professional support. At FUTIA, I offer site + automation + monthly maintenance service to Turkish brands, Core Web Vitals optimization is included in this package.

If you have questions, you can write on WhatsApp: +90 532 491 17 05. Or send an email directly to info@futia.net. I work from the Netherlands but respond on Turkey time, usually within 2-3 hours.