ITMay 26, 2026

Website Speed Optimization 2026 — How to Achieve Core Web Vitals 90+

Complete 2026 guide to Google Core Web Vitals optimization. Covers LCP, INP, and CLS measurement and improvement: image optimization (WebP/AVIF), font preloading, JavaScript bundle splitting, CDN configuration. Includes a 30-item checklist for achieving Lighthouse 90+ with code examples for Next.js.

> **Key Summary** Google Core Web Vitals in 2026: LCP (Largest Contentful Paint) < 2.5s, INP (Interaction to Next Paint) < 200ms, and CLS (Cumulative Layout Shift) < 0.1. These three metrics directly affect Google search rankings. The highest-impact fixes are: ① Convert images to WebP/AVIF ② Preload fonts ③ Split JavaScript bundles ④ Deploy through a CDN edge network. With the right default setup, Next.js sites can reach Lighthouse scores of 90+. ## What Are Core Web Vitals? Core Web Vitals are Google's three main user experience metrics. They have been part of SEO ranking signals since 2021. ### The Three Core Metrics | Metric | Full Name | What It Measures | Good | Needs Work | Poor |

|---|---|---|---|---|---|

| **LCP** | Largest Contentful Paint | Time to render largest image or text | < 2.5s | 2.5–4s | > 4s |

| **INP** | Interaction to Next Paint | Time from user click to visual response | < 200ms | 200–500ms | > 500ms |

| **CLS** | Cumulative Layout Shift | Unexpected layout movement during load | < 0.1 | 0.1–0.25 | > 0.25 | Note: FID (First Input Delay) was replaced by INP in 2024. ### Why Core Web Vitals Matter - **Direct SEO impact**: They are part of Google's ranking algorithm; when content quality is comparable, the faster site has the edge

**Bounce rate**: LCP > 3s increases mobile bounce rate by 53% (Google research)

**Ad revenue**: AdSense RPM is tied to time on page, so a faster site can support higher RPM

**Conversion rate**: A 1-second delay can reduce conversions by 7% (Akamai research) ## LCP Optimization LCP is usually determined by how quickly the hero image or largest text block loads. ### Image Optimization (Highest Impact) **Format comparison:** | Format | Size reduction | Browser support |

|---|---|---|

| JPEG | Baseline | 100% |

| WebP | 25–35% smaller | 98%+ |

| AVIF | 40–50% smaller | 90%+ (2026) | ```html

</picture>

``` **Next.js Image component:**

```typescript

import Image from 'next/image' // LCP images must have priority prop

<Image src="/hero.jpg" alt="Hero image" width={1200} height={628} priority // critical — eliminates LCP delay quality={85}

``` ### Resource Preloading ```html

``` ### Server Response Time (TTFB) | Method | Impact | Implementation |

|---|---|---|

| CDN | Global edge caching | Cloudflare, Vercel Edge |

| Cache headers | Instant for returning visitors | Cache-Control: max-age=31536000 |

| SSG/ISR | Pre-rendered HTML | Next.js generateStaticParams | ## INP Optimization INP measures the time between a user interaction (click, tap, or keyboard input) and the browser's next rendered frame. ### Reduce Main Thread Blocking ```javascript

// Bad: heavy sync computation blocks click response

button.addEventListener('click', () => { const result = heavyComputation(data) // blocks main thread updateUI(result)

}) // Good: offload to Web Worker

const worker = new Worker('heavy-worker.js')

button.addEventListener('click', () => { worker.postMessage(data) // runs in separate thread

})

worker.onmessage = (e) => updateUI(e.data)

``` ### Code Splitting (Next.js) ```typescript

import dynamic from 'next/dynamic' // Defer components not visible on first load

const HeavyChart = dynamic(() => import('./HeavyChart'), { loading: () => <div>Loading chart...</div>, ssr: false

})

``` ### Tree Shaking ```javascript

// Bad: imports entire lodash (70KB+)

import _ from 'lodash' // Good: imports only what you need (1KB)

import chunk from 'lodash/chunk'

``` ## CLS Optimization CLS happens when ads, images, or dynamic content shift position while the page is loading. ### Always Specify Image Dimensions ```html

``` ### Reserve Ad Space ```css.ad-container { min-height: 250px; /* pre-reserve ad space */ display: flex; align-items: center; justify-content: center;

}

``` ### Font Loading ```css

@font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'); font-display: swap; /* show system font immediately, swap when loaded */

}

``` ## Lighthouse 90+ Checklist (30 items) **LCP (10 items)**

[ ] Identify LCP element (DevTools → Performance tab)

[ ] Add priority or preload to LCP image

[ ] Convert hero image to WebP/AVIF

[ ] Use next/image for automatic optimization

[ ] Provide responsive images via srcset

[ ] Use CDN (Cloudflare Pages, Vercel Edge)

[ ] Verify TTFB < 600ms

[ ] Use SSG/ISR where possible

[ ] Remove unnecessary redirects

[ ] Defer all third-party scripts **INP (10 items)**

[ ] Check INP score in Lighthouse

[ ] Remove Long Tasks (50ms+) — DevTools Performance tab

[ ] Move heavy computation to Web Workers

[ ] JavaScript bundle < 200KB (compressed)

[ ] Remove unnecessary polyfills

[ ] Apply useMemo/useCallback in React

[ ] Debounce/throttle event handlers

[ ] Use CSS transitions instead of JS animations

[ ] Add async/defer to third-party script tags

[ ] Optimize JS execution order for LCP element **CLS (10 items)**

[ ] Set width/height on all images and videos

[ ] Reserve minimum height for ad containers

[ ] Place dynamically injected content at the bottom

[ ] Apply font-display: swap to @font-face rules

[ ] Add font preload link tags

[ ] Animate only transform/opacity (no layout-changing properties)

[ ] Use skeleton loaders to pre-reserve content space

[ ] Verify sticky/fixed elements don't push content

[ ] Maintain scroll position during infinite scroll insertion

[ ] Fix tab-switching animation height with overflow: hidden ## Measurement Tools | Tool | Purpose | URL |

|---|---|---|

| PageSpeed Insights | Real user LCP/INP/CLS data | pagespeed.web.dev |

| Lighthouse | Lab-based performance score | Chrome DevTools → Lighthouse |

| WebPageTest | Global location testing | webpagetest.org |

| Chrome DevTools | Detailed profiling | F12 → Performance tab |

| Core Web Vitals Report | CrUX field data for SEO | Search Console | ## FAQ **Q1. How much do Core Web Vitals affect Google rankings?** A. Google describes CWV as a "tiebreaker signal": when content quality is equal, the faster site wins. Mobile Page Experience uses CWV as a ranking component. The exact weighting is not public, but real-world tests consistently show ranking differences between sites with LCP > 4s and sites with LCP < 2s. **Q2. Is Lighthouse 90+ the same as passing Core Web Vitals?** A. No. Lighthouse is based on lab simulation, while Core Web Vitals use real user data (CrUX / Field Data). A perfect Lighthouse 100 score does not guarantee strong field CWV. Check the Core Web Vitals report in Google Search Console for the data that actually affects SEO rankings. **Q3. Does Next.js automatically give good performance?** A. Partly. Next.js includes image optimization (next/image), font optimization (next/font), code splitting, and SSG/ISR out of the box. Developers still need to use priority attributes correctly, remove unnecessary third-party scripts, and specify image dimensions. With proper implementation, Lighthouse 85–95+ is achievable. **Q4. Does converting to WebP reduce image quality?** A. At quality=80–90, the difference is generally invisible to the human eye. WebP delivers 25–35% smaller files than JPEG at the same visual quality. AVIF compresses even more efficiently. Tools such as Squoosh, Cloudinary, and next/image can handle conversion automatically. **Q5. How do I find which element is causing CLS?** A. In Chrome DevTools → Performance tab, record a page load and look for "Layout Shift" markers. PageSpeed Insights also reports "Avoid large layout shifts" and identifies the specific elements causing movement. Common causes include unsized images, ads that push content down, font swaps (FOUT), and dynamically injected content. **Q6. How much do third-party scripts (GA, Hotjar) hurt performance?** A. They can have a major impact. Third-party scripts often reduce Lighthouse scores by 10–20 points. GA4 is relatively lightweight when loaded asynchronously, while heavier tools such as Hotjar or Intercom can noticeably hurt INP. Use next/script with strategy="afterInteractive" or "lazyOnload" to defer these scripts until after the main page is interactive. **Q7. Mobile LCP is always slower than desktop — how do I improve it?** A. Mobile devices have slower networks and CPUs, so mobile LCP is naturally harder to optimize. Key fixes: ① Serve smaller hero images through srcset for mobile ② Hide non-essential images on mobile ③ Inline critical CSS ④ Cache HTML at the CDN edge. The goal is LCP < 2.5s even on mobile. **Q8. Does using Cloudflare automatically improve Core Web Vitals?** A. Partially, yes. Cloudflare CDN reduces TTFB through edge caching, which directly improves LCP, especially for international visitors. Enable Cloudflare's auto minification (JS/CSS/HTML), Rocket Loader (JS deferral), and Polish (image compression) for additional performance gains. --- *This post contains affiliate marketing and commissions may be earned.*