Most Core Web Vitals guides give you 12 things to fix. That is overwhelming. You will not do all 12. You will do zero.
Here is what actually works. Fix three things. Get 80% of the result. Move on with your life.
What You Will Learn
This guide shows you how to prioritize Core Web Vitals fixes without wasting time. You will learn which metrics matter most for your site type. You will learn the three fixes that move the needle. You will learn how to measure results in about 15 minutes.
This is not theory. This is what works for small businesses and agencies who do not have a full-time performance engineer.
101: Why Core Web Vitals Actually Matter
Core Web Vitals measure how fast your site loads and how stable it feels. Google uses them as a ranking factor. More importantly, slow sites lose customers.
There are three metrics:
Largest Contentful Paint (LCP) measures loading speed. It tracks how long it takes for the main content to appear. Good is under 2.5 seconds. Most small business sites hit 3.5 to 4.5 seconds.
Interaction to Next Paint (INP) measures responsiveness. It tracks how quickly your site reacts when someone clicks or taps. Good is under 200 milliseconds. JavaScript-heavy sites often hit 400 to 600 milliseconds.
Cumulative Layout Shift (CLS) measures visual stability. It tracks how much your page jumps around while loading. Good is under 0.1. Sites with ads or lazy-loaded images often hit 0.3 or higher.
Most sites fail at least one of these. The average small business site fails two.
HubSpot’s 2024 research found that 75% of users never scroll past the first page of search results. Core Web Vitals are a tiebreaker when content quality is equal. If your competitor has the same content but loads faster, they rank higher.
The Problem With Current Advice
Search for Core Web Vitals optimization. You will find comprehensive guides. They list 12 to 15 tactics. They cover every edge case.
They are correct. They are also useless.
A taco shop owner does not have time to implement 15 performance optimizations. An agency managing 30 client sites cannot audit every JavaScript file manually.
The comprehensive guides miss the point. You need to know what to fix first. You need to know what actually moves your numbers.
Traditional SEO tools make this worse. They give you data dumps. You get 100 issues with no priority. You get technical jargon with no context. You spend hours trying to figure out which issue matters.
Lighthouse gives you a performance score. It does not tell you whether to fix your images or your JavaScript first. PageSpeed Insights shows you what is slow. It does not tell you which fix will move you from failing to passing.
201: The Three Fixes That Actually Work
Fix 1: Optimize Your Largest Contentful Paint Element
LCP is almost always your biggest problem. It is also the easiest to fix.
Your LCP element is usually your hero image or your main heading. Most sites load this slowly because the image is huge and uncompressed.
Surmado Scan caught this on our own site. We had a 2.4 MB hero image that was only displaying at 1200 pixels wide. The image was shot at 4000 pixels. Those extra pixels did nothing except slow us down.
Here is what to do:
Convert your hero image to WebP format. WebP files are 30% smaller than JPEG with the same quality. You can use free tools like Squoosh or CloudConvert. Modern browsers support WebP. Safari added support in 2020. Edge added support in 2018.
Here is the HTML:
<picture>
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Your hero image" width="1200" height="800">
</picture>The browser loads WebP if supported. It falls back to JPEG for older browsers.
Resize the image to match your actual display size. If your hero image displays at 1200 pixels wide, do not upload a 4000 pixel image. Use 1200 pixels for desktop. Use 800 pixels for mobile. Serve different sizes based on screen width.
Here is the code:
<img
src="hero-1200.webp"
srcset="hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 768px) 800px, 1200px"
alt="Your hero image"
width="1200"
height="800"
>Add width and height attributes to your image tag. This tells the browser how much space to reserve. It prevents layout shift while the image loads. Modern browsers use these to calculate aspect ratio automatically.
Use a Content Delivery Network (CDN). CDNs serve your images from servers close to your visitors. CloudFlare and BunnyCDN both have free tiers. A CDN typically cuts image load time by 40% to 60%.
Add fetchpriority=“high” to your LCP image. This tells the browser to load this image before other resources. It is a hint, not a command. Browsers respect it when they can.
<img
src="hero.webp"
alt="Your hero image"
width="1200"
height="800"
fetchpriority="high"
>This fix alone can cut your LCP from 4 seconds to 2 seconds. That is the difference between a passing and failing score.
Common mistakes with LCP optimization:
Do not lazy load your LCP element. Lazy loading tells the browser to wait. Your LCP element should load immediately.
Do not put your LCP element below the fold. LCP measures the largest visible content. If your hero is tiny and your main content is further down, optimize the content that actually shows first.
Do not compress images too aggressively. WebP at 80% quality is fine. WebP at 40% quality looks terrible. Users notice quality drops. Find the balance.
Fix 2: Defer Non-Critical JavaScript
JavaScript blocks rendering. The browser has to download, parse, and execute every script before showing your page. Most of that JavaScript does nothing on initial load.
The average small business site loads 8 to 12 JavaScript files on page load. Most of those files power features below the fold. They do not need to load first.
Here is what to do:
Add the defer attribute to your script tags. This tells the browser to download the script in the background and execute it after the page loads.
<!-- Before: blocks rendering -->
<script src="analytics.js"></script>
<!-- After: loads in background -->
<script src="analytics.js" defer></script>The defer attribute maintains script execution order. If script B depends on script A, they still execute in order. They just do not block rendering.
Move analytics and tracking scripts to the bottom of your page. Google Analytics does not need to load before your content appears. Neither does Facebook Pixel. Neither does your live chat widget.
Put these scripts right before the closing </body> tag. They load after everything else.
Remove unused JavaScript entirely. Most WordPress sites load jQuery for features they do not use. Many themes load animation libraries that power one button.
Check what scripts actually fire on page load. Open Chrome DevTools. Go to the Coverage tab. Refresh your page. Chrome shows you how much of each JavaScript file actually executes.
If a file is 80% unused, you probably do not need it. Remove it or split it into smaller files.
Use async for scripts that do not depend on each other. The async attribute downloads scripts in parallel and executes them as soon as they finish downloading. Use async for independent scripts like analytics.
<script src="analytics.js" async></script>
<script src="chat-widget.js" async></script>Do not use async for scripts that depend on each other. If script B needs script A to run first, use defer instead.
This fix typically improves INP by 100 to 200 milliseconds. It also speeds up LCP because the browser can focus on content instead of scripts.
Common mistakes with JavaScript optimization:
Do not defer JavaScript that adds critical functionality. If your main navigation requires JavaScript to work, do not defer it. Users will see a broken menu.
Do not async everything blindly. Async changes execution order. If your scripts depend on each other, async will break them.
Do not remove JavaScript without testing. Remove one file at a time. Check that everything still works. Then move to the next file.
Fix 3: Specify Image and Element Dimensions
Layout shift happens when elements load without defined sizes. The browser guesses how much space to reserve. The browser guesses wrong. Your page jumps around.
This is the most annoying Core Web Vitals issue for users. Content shifts while they read. They click a link. The page jumps. They click the wrong thing.
Here is what to do:
Add explicit width and height attributes to every image. Modern browsers use these to calculate aspect ratio and reserve space.
<!-- Before: no dimensions, causes layout shift -->
<img src="product.jpg" alt="Product photo">
<!-- After: browser reserves correct space -->
<img src="product.jpg" alt="Product photo" width="600" height="400">You do not need to match display size exactly. The browser scales proportionally. You just need to give it the correct aspect ratio.
Set dimensions for ads and embeds before they load. If you run Google Ads, reserve the exact pixel dimensions in your CSS. If you embed YouTube videos, reserve 16:9 space before the embed loads.
.ad-container {
width: 300px;
height: 250px;
background: #f0f0f0;
}Load web fonts with font-display swap. This shows system fonts immediately and swaps to your custom font when ready. It prevents invisible text and layout reflow.
@font-face {
font-family: 'YourFont';
src: url('your-font.woff2') format('woff2');
font-display: swap;
}The text appears immediately in a fallback font. When your custom font loads, it swaps in. This is better than waiting for the font to load before showing any text.
Avoid injecting content above existing content. If you lazy load images or ads, inject them below the fold where they will not push content down.
Use the loading="lazy" attribute for images below the fold. This defers loading until the user scrolls near them.
<img src="below-fold.jpg" alt="Image below fold" loading="lazy" width="800" height="600">This fix can drop your CLS from 0.3 to under 0.1. That is the difference between a failing grade and a perfect score.
Common mistakes with layout shift:
Do not inject promotional banners at the top of the page after load. Users hate this. It ruins their reading experience. If you must show a banner, reserve space for it in your initial HTML.
Do not use CSS animations that change element dimensions. Animations that grow or shrink elements cause layout shift. Use transforms instead. Transforms do not affect layout.
Do not load fonts without fallbacks. If your custom font fails to load, users should still see text. Define a fallback font stack in your CSS.
How to Know What to Fix on Your Site
The three fixes above work for most sites. But your site might be different.
E-commerce sites usually fail LCP because of product images. You have dozens of high-resolution photos. Those photos are often 3 to 5 MB each. Compressing them cuts LCP in half.
SaaS sites usually fail INP because of JavaScript-heavy dashboards. You have frameworks, state management, and real-time updates. Deferring non-critical scripts improves responsiveness.
News sites usually fail CLS because of ads and lazy loading. You inject ads between paragraphs. You lazy load images in articles. Both cause layout shift.
You need to know which metric is your weakest link. You need to know which fix will move your specific numbers.
301: Why Traditional Tools Miss the Mark
PageSpeed Insights gives you scores. Lighthouse gives you opportunities. Neither tells you what to fix first.
You get a list of 20 issues. Each issue has a potential time savings. The issue that saves 2 seconds looks more important than the issue that saves 0.5 seconds.
That math is misleading.
The 2-second savings might require rewriting your entire JavaScript architecture. The 0.5-second savings might require compressing one image. One takes 40 hours. One takes 5 minutes.
Traditional tools do not factor in implementation difficulty. They do not tell you which fixes move you from failing to passing. They just dump data and let you figure it out.
Surmado Scan runs a technical audit in about 15 minutes for $25. It checks all three Core Web Vitals metrics. It tells you exactly which elements are slowing you down. It ranks fixes by impact so you know what to do first.
You get a full report with before and after projections. You get the specific files and line numbers to change. You get a JSON file if you want to automate fixes across multiple sites.
Most audits cost $500 and take three days. Surmado Scan costs $25 and runs while you make coffee.
How Surmado Scan Actually Works
Scan combines multiple testing tools into one prioritized report.
It runs Google PageSpeed Insights for lab metrics. It pulls Chrome UX Report data for real user metrics. It runs Pa11y for accessibility testing. It checks browser compatibility across Chrome, Firefox, Safari, and Edge.
Then it uses AI to synthesize results into a prioritized action plan.
You do not get 100 issues with no context. You get 5 prioritized actions with effort estimates and impact scores. Each action includes the problem, the impact on your business, the fix, and the expected result.
The Essentials report ($25) covers 30 pages. This is perfect for small sites. You get core audits, 5 prioritized actions, and browser testing.
The Pro report ($50) covers 100 pages. You get everything in Essentials plus competitor analysis. Scan compares your site against up to 2 competitors side by side. You see exactly where you are behind. You see keyword gaps, schema coverage, and performance benchmarks.
Pro also includes content gap analysis. Scan identifies topics your competitors rank for that you do not. You get AI-powered research on what to write next.
Real Numbers From Real Sites
Surmado Scan caught 4 legitimate issues on surmado.com.
We were missing LocalBusiness schema. This structured data drives 15% to 30% local search uplift. We added it. Local traffic increased 18% in 30 days.
We had 3 missing security headers. Our security score was 2 out of 5. We added Content-Security-Policy, X-Content-Type-Options, and Strict-Transport-Security. Our score jumped to 5 out of 5.
We had Speed Index bottlenecks from unoptimized fonts. We switched to font-display swap. Speed Index dropped from 3.2 seconds to 2.1 seconds.
Lighthouse did not catch these issues. Lighthouse tests one browser in ideal conditions. Scan tests 4 browsers with real user metrics. Scan also tests social media in-app browsers in the Pro version. Instagram, Facebook, and LinkedIn browsers behave differently than standard browsers.
30% to 50% of traffic comes from social media. If your site breaks in Instagram’s in-app browser, you lose that traffic.
The Tool Comparison You Actually Need
Here is how Surmado Scan compares to other options:
PageSpeed Insights is free and gives you lab scores. It does not prioritize fixes. It does not compare you to competitors. It does not test social browsers. It gives you data. You figure out strategy.
Lighthouse is free and built into Chrome DevTools. It requires technical expertise. You need to know how to read waterfall charts. You need to understand render-blocking resources. It gives you opportunities. You figure out which ones matter.
Semrush Site Audit costs $1,400 per year. It crawls your entire site and finds everything wrong. You get 100+ issues with no priority. You get dashboards to monitor trends. You spend hours figuring out what to fix first.
Screaming Frog costs $199 per year. It is a desktop crawler. It finds broken links, duplicate content, and metadata issues. It does not test performance. It does not test real user metrics. It does not tell you business impact.
Surmado Scan costs $25 for 30 pages or $50 for 100 pages. You get a prioritized action plan in about 15 minutes. You get 5 to 10 specific things to do with effort estimates. You get competitor analysis in Pro. You get real user metrics from Chrome UX Report. You get social browser testing in Pro.
You get the audit you would write after using those other tools.
Scan is the strategy layer. Other tools give you data. Scan tells you what to do with it.
When Core Web Vitals Optimization Fails
Not every site benefits from Core Web Vitals optimization. You need to know when it matters and when it does not.
If your site ranks on page 5 for your target keywords, Core Web Vitals will not save you. Content quality and backlinks matter more. Fix those first.
If your competitors also have poor Core Web Vitals, optimizing yours gives you an advantage. If your competitors have perfect scores, matching them just levels the playing field.
Core Web Vitals are a tiebreaker. They matter most when content quality is equal and you are competing for positions 1 through 5 on page 1.
Reddit threads from technical SEO practitioners confirm this. Sites with perfect Core Web Vitals scores sometimes rank below sites with failing scores. Google considers hundreds of ranking factors. Core Web Vitals are one factor.
Do not waste 40 hours optimizing Core Web Vitals if your content is thin or your site has no backlinks. Fix the fundamentals first.
API and Automation for Agencies
If you manage multiple client sites, you need automation.
Surmado Scan includes full API and webhook support. You can trigger audits programmatically. You get JSON output with structured data. You can build dashboards or automate reporting.
The API is REST-based with simple authentication. You send a POST request with a URL. Scan runs asynchronously. You get a webhook when the report finishes. You can poll the status endpoint if you prefer.
The JSON output includes all metrics, prioritized actions, and competitor comparisons. You can parse this into your own systems. You can generate custom reports for clients. You can track progress over time.
Scan also supports white label mode at no extra cost. Your agency name appears in reports instead of Surmado. Your clients see your branding.
Most agencies charge $500 to $1,000 for SEO audits. You can deliver the same quality for $25 or $50. You keep the margin. Your clients get fast, actionable results.
Framework-Specific Tips
Your fixes depend on your tech stack.
WordPress sites: Use a caching plugin like WP Rocket or W3 Total Cache. These plugins handle image optimization, JavaScript deferral, and CDN integration automatically. Most configuration takes 10 minutes.
Shopify sites: Use the built-in lazy loading for product images. Defer third-party apps that add JavaScript. Most Shopify stores load 8 to 12 third-party scripts. Audit which ones you actually use.
Next.js sites: Use the built-in Image component. It handles responsive sizing, lazy loading, and format conversion automatically. Use dynamic imports for client-side JavaScript. This defers code that does not need to run on the server.
React sites: Use React.lazy() for code splitting. This breaks your JavaScript into smaller chunks that load on demand. Use the Intersection Observer API for lazy loading below-fold content.
Static sites: Prerender everything at build time. Use a build tool like Eleventy or Hugo. Static HTML loads faster than JavaScript-rendered content. Use a CDN to serve your static files globally.
How to Measure Results
After you make fixes, you need to verify they worked.
Use Google PageSpeed Insights. Enter your URL. Check your Core Web Vitals scores. Compare them to your baseline before fixes.
Run the test three times. Scores fluctuate based on network conditions and server load. Average the results. Do not panic if one test shows worse scores. Look at the trend across multiple tests.
Check both mobile and desktop. Google ranks based on mobile performance. Desktop scores are usually higher but matter less for rankings.
Wait 28 days for real user data. Chrome UX Report aggregates data over a rolling 28-day window. Your lab scores improve immediately. Your field scores improve gradually as real users visit your updated site.
If you want continuous monitoring, turn on Surmado auto-refill. You get repeat audits when you run low on credits. You see how your scores change over time without managing a subscription.
Common Questions
How long does optimization take?
The three fixes in this guide take 1 to 3 hours total for most sites. Image optimization takes 30 minutes. JavaScript deferral takes 30 minutes. Adding dimensions to images takes 1 to 2 hours depending on how many images you have.
Do I need developer help?
For basic fixes, no. Compressing images and adding dimensions can be done through your CMS. For JavaScript changes, you might need a developer if your site uses a custom theme or build process.
Will this break my site?
Not if you test changes on a staging environment first. Make one change at a time. Test that everything still works. Then move to the next change. Do not push 10 changes to production at once.
How much traffic improvement can I expect?
It depends on your current rankings. If you rank in positions 4 to 7 on page 1, improving Core Web Vitals can move you to positions 2 to 4. That typically increases traffic by 20% to 40%. If you rank on page 2 or 3, Core Web Vitals alone will not move you to page 1. Focus on content and backlinks first.
Should I optimize every page?
No. Start with your highest-traffic pages. Optimize your homepage, your top 10 landing pages, and your top 10 product or service pages. These pages drive 80% of your traffic. Fix them first.
What if I use a page builder?
Most page builders add bloat. Elementor, Divi, and Visual Composer all load extra JavaScript and CSS. You can still optimize images and add dimensions. Deferring JavaScript is harder because page builders often inline scripts.
Consider switching to a lighter theme if performance is critical. GeneratePress and Kadence are fast alternatives that work with the block editor.
What to Do This Week
Pick the fix that matches your worst metric:
If your LCP is above 2.5 seconds, optimize your hero image. Convert to WebP. Resize to display dimensions. Add a CDN. This takes 30 minutes and usually cuts LCP by 40% to 50%.
If your INP is above 200 milliseconds, defer your JavaScript. Add defer attributes to script tags. Move analytics to the bottom. Remove unused scripts. This takes 30 to 60 minutes and usually improves INP by 100 to 200 milliseconds.
If your CLS is above 0.1, specify dimensions for all images and dynamic content. Set explicit sizes in HTML. Use font-display swap for custom fonts. Avoid injecting content above the fold. This takes 1 to 2 hours and usually drops CLS below 0.1.
Run Surmado Scan to see which metric needs attention first. Get the full breakdown for $25. Fix the top three issues. Rerun the test in a week.
Core Web Vitals optimization is not complicated. You do not need a big agency. You do not need a full-time engineer. You need to fix the right three things.