"People say our website is slow, but we don't know where to begin." This is a frequent concern among web managers at SMBs. Google quantifies user experience with three metrics known as Core Web Vitals, and following the March 2026 Core Update, their impact on search rankings has become even more pronounced.
This article breaks down everything from the fundamentals and measurement of Core Web Vitals to practical optimization steps that SMB websites can readily implement.
What are Core Web Vitals?
Core Web Vitals are three metrics defined by Google to measure the quality of user experience. Rather than relying on lab data (simulations), they are assessed using behavioral field data from actual Chrome users visiting the site (CrUX). Google uses the 75th percentile for each metric—the level met by 75% of visits—as its benchmark threshold.
LCP (Largest Contentful Paint) — Loading speed
Measures the time it takes to render the largest visible element within the viewport (such as a hero image or main heading).
| Assessment | Threshold |
|---|---|
| Good | Within 2.5 seconds |
| Needs Improvement | 2.5 to 4.0 seconds |
| Poor | Over 4.0 seconds |
The leading cause of slow LCP is unoptimized images, followed by slow server response times and render-blocking CSS or JavaScript.
INP (Interaction to Next Paint) — Responsiveness
Measures the latency between a user interaction (clicks, taps, or key presses) and when the browser presents the next visual frame update. INP replaced FID (First Input Delay) in March 2024. Because it evaluates the 98th percentile of all user interactions, even an occasional heavy script execution will degrade your score.
| Assessment | Threshold |
|---|---|
| Good | Within 200 ms |
| Needs Improvement | 200〜500ms |
| Poor | Over 500 ms |
As of 2026, 43% of websites fail to meet the INP threshold, making it the Core Web Vital with the highest failure rate.
CLS (Cumulative Layout Shift) — Visual stability
Measures unexpected layout shifts (visual jumping) that occur during page load. Common causes include images without defined dimensions, dynamically injected ads, and late-loading web fonts.
| Assessment | Threshold |
|---|---|
| Good | 0.1 or less |
| Needs Improvement | 0.1〜0.25 |
| Poor | Over 0.25 |
Start by measuring your current performance
Before attempting optimizations, first understand your site's baseline scores.
PageSpeed Insights
Simply entering your URL into PageSpeed Insights displays both real-user field data (from CrUX) and lab measurements for LCP, INP, and CLS for free. The "Field Data" section reveals the real user experience, while the "Diagnostics" section highlights concrete opportunities for improvement.
Google Search Console
The "Core Web Vitals" report in Google Search Console lists failing URLs across your entire domain. Because pages are grouped by similarity, you can easily pinpoint which templates require attention.
Chrome DevTools / Lighthouse
The "Lighthouse" panel in Chrome DevTools is great for local testing. Simulating network throttling and device constraints lets you identify and fix mobile-specific performance issues in advance.
Specific steps for LCP optimization
1. Optimize hero images
Above-the-fold hero images are the most common LCP elements. Address them in the following order:
Convert formats to WebP or AVIF
Compared to JPEG, WebP reduces file sizes by 25–35%, and AVIF cuts them by roughly another 20%. WordPress sites can automate conversions using plugins like EWWW Image Optimizer.
Add fetchpriority="high"
<img src="hero.webp" fetchpriority="high" alt="..." width="1200" height="630">Adding fetchpriority="high" to your LCP image instructs the browser to prioritize its download, speeding up rendering.
Avoid using loading="lazy" on above-the-fold images
While below-the-fold images should use loading="lazy", applying it mistakenly to your LCP image produces the opposite effect.
2. Reduce server response time (TTFB)
If LCP is delayed, slow server Time to First Byte (TTFB) may be the underlying culprit.
- Enable caching: On WordPress, use plugins like W3 Total Cache or WP Super Cache to serve pre-rendered HTML
- Implement a CDN: Routing DNS through Cloudflare (which offers a free plan) serves static assets from global edge servers, dramatically lowering TTFB
- Check server region: Hosting on servers physically distant from your primary audience slows down responses
3. Eliminate render-blocking resources
When CSS or JavaScript blocks HTML parsing, LCP is deferred. If PageSpeed Insights flags "Eliminate render-blocking resources," action is required.
- Load non-critical CSS (styles below the fold) asynchronously
- Defer non-essential JavaScript using
deferorasyncattributes
Specific steps for INP optimization
INP issues almost always stem from heavy JavaScript execution.
1. Break up long tasks
Tasks that monopolize the browser's main thread for 50 ms or longer are considered "long tasks." While a long task runs, the browser cannot respond to user input, causing INP to deteriorate.
Profile interactions using Chrome DevTools' "Performance" tab to isolate long tasks flagged in red. Breaking them into smaller chunks using setTimeout or scheduler.yield() yields main thread execution back to user interactions.
2. Audit third-party scripts
Chat widgets, ad tags, and marketing analytics scripts are major contributors to poor INP. Inventory all loaded scripts, removing rarely used ones or delaying their initialization.
3. Reduce JavaScript bundle size
Bloated libraries and unused functions increase parsing, compiling, and execution overhead. Use the Tree Shaking capabilities built into bundlers like Webpack and Vite to prune unused code from production builds.
Specific steps for CLS optimization
1. Specify explicit width and height on images and videos
<!-- NG: サイズ未指定 -->
<img src="photo.jpg" alt="...">
<!-- OK: widthとheightを明示 -->
<img src="photo.jpg" alt="..." width="800" height="450">Images without defined dimensions disrupt page layout suddenly once loaded. Specifying width and height attributes allows the browser to allocate the required space upfront.
2. Prevent web font layout shifts
Layout shifts occur when text dimensions change before and after web fonts load. Combining CSS font-display: swap with properties like size-adjust to approximate fallback font sizing minimizes shift distance.
3. Reserve space for dynamic content in advance
For banner ads, social media embeds, or asynchronously loaded content, set fixed container heights via CSS (such as min-height) before injection to eliminate sudden jumping.
Impact on SEO and conversions
Optimizing Core Web Vitals delivers tangible business results alongside SEO gains.
- Google data indicates that every 1-second delay in page load time causes conversions to drop by 7%
- Since the March 2026 Core Update, websites passing Core Web Vitals are concentrated near top Google positions, widening ranking gaps against non-passing competitors
- Studies by Amazon and Walmart show that a 100 ms (0.1s) improvement in speed boosts revenue by over 1%
For more on content strategies aligned with SEO, see AI Overviews and SEO Strategy — Navigating the Shift in Search. Furthermore, technical considerations for building performance-focused sites are detailed in Next.js vs Astro — Which Should You Choose for Building Static Sites? (2026 Edition).
Summary — Tackling improvements by priority
Attempting to tackle all Core Web Vitals issues at once can quickly become overwhelming. Addressing them in this prioritized sequence maximizes efficiency:
- Check LCP, INP, and CLS in PageSpeed Insights — You cannot fix what you have not measured
- Convert LCP images to WebP and add
fetchpriority="high"— Delivers the highest ROI for your effort - Implement a CDN and caching — Easily done via Cloudflare without deep technical expertise
- Remove unnecessary third-party scripts — Directly improves INP
- Assign width and height attributes to images — Highly effective immediate fix for CLS
Without deep technical experience, web performance optimization often leaves teams guessing about root causes. If your PageSpeed Insights scores are stalled or you aren't sure where to begin, please feel free to consult with GleamHub. From baseline diagnostics to formulating and implementing targeted fixes, we provide tailored support matching your website's exact needs.
