Google has announced that Core Web Vitals will become a ranking factor starting in mid-2021. This means that websites need to optimize for Core Web Vitals to maintain and improve their search rankings. Core Web Vitals focuses on three key areas:
- Loading Speed - Measures how fast your website loads (Largest Contentful Paint).
- Interactivity - Measures how quickly pages become interactive (First Input Delay).
- Visual Stability - Measures visual stability as content loads (Cumulative Layout Shift).
If your website is slow, choppy, or visually unstable, it will likely perform poorly for Core Web Vitals and may see a decline in search rankings. This ultimate guide covers everything you need to know to measure, understand, and optimize Core Web Vitals for your website.
How Google Measures Core Web Vitals
Google uses real user measurement data from the Chrome User Experience Report (CrUX) to evaluate Core Web Vitals performance. The thresholds for a “good” score are:
| Core Web Vital | Good Threshold |
|---|---|
| Largest Contentful Paint (LCP) | < 2.5 seconds |
| First Input Delay (FID) | < 100 milliseconds |
| Cumulative Layout Shift (CLS) | < 0.1 |
As you can see, the targets are quite strict and require fast loading times and visual stability to achieve.
Google has stated the followingregarding how Core Web Vitals will impact search rankings:
- Pages that do not meet the “good” thresholds for Core Web Vitals are more likely to get lower search rankings.
- Pages that meet or exceed the thresholds have a better chance of getting higher search rankings.
- No single Core Web Vital is weighted more than another in rankings. Optimizing all three is important.
The impact on search rankings will ramp up gradually over time starting in mid-2021. There is still time to optimize your site, but you do not want to wait too long.
How to Measure Core Web Vitals
Measuring Core Web Vitals is essential so you can understand where your website stands today. Then you can set optimization priorities for the months ahead.
There are a few ways to measure Core Web Vitals:
Use Google PageSpeed Insights
The simplest way is to run your website through Google PageSpeed Insights. This free tool provides Core Web Vitals metrics along with performance and best practice recommendations.
Install Chrome Extension
For more detailed Core Web Vitals reporting, you can use the Chrome UX Report extension. It shows a Core Web Vitals overlay on each page while browsing your site.
Insert Analytics Tracking
Finally, you can insert the Core Web Vitals analytics code into your pages. This tracks and reports the data directly in Google Analytics.
No matter which method you choose, make sure you are actively measuring and monitoring Core Web Vitals. Identify poorly scoring pages to prioritize for optimization.
Tips to Improve Core Web Vitals
Now let’s explore optimization tips and best practices to help improve website performance for each Core Web Vital metric:
Optimizations for Largest Contentful Paint
Largest Contentful Paint (LCP) measures when your main page content loads visually. The goal is under 2.5 seconds. Here are some ways to optimize:
- Defer non-critical JavaScript - Leverage code splitting and defer loading JS.
- Asynchronously load third party widgets - Use async tags for analytics, chat widgets, etc.
- Minify HTML/CSS/JavaScript - Reduce code payload size through minification.
- Enable text compression - Gzip compress text-based assets.
- Leverage browser caching - Set cache lifetime for static assets.
- Resize and compress images - Make images smaller through compression/resizing.
- Remove unused CSS/code - Eliminate unused rules, libraries, and general code.
- Lazy load non-critical content - Images, embeds, etc. can lazy load further down the page.
- Optimize webfont loading - Employ font display swap or inline font metadata.
- Improve server response speed - Upgrade to enable faster asset delivery.
By employing these page load optimization tips you can substantially improve your LCP time.
Optimizations for First Input Delay
First Input Delay (FID) measures the time from when a user first interacts with your site (i.e. clicking a link) to when the browser is actually able to respond to that interaction. The goal is under 100 milliseconds. Some key ways to optimize include:
- Implement passive event listeners - For touch and wheel events, this allows scrolling without delay.
- Reduce JavaScript execution time - Minimize parsing and execution time through code splitting, caching, deferred loading.
- Use throttled network emulation - Test with a throttled CPU and network connection locally.
- Optimize your CMS - Select a high performance CMS optimized for speed. Or fine-tune your current platform.
- Monitor and fix layout thrashing - Occurs when layout is triggered too frequently, due to things like images loading in awkward locations.
- Reduce runtime render blocking - Prioritize critical CSS delivery and defer non-critical CSS/JS.
- Precache DNS lookups - Employ preconnect/dns-prefetch to resolve DNS earlier.
Carefully optimizing the loading and execution of assets delivered to the page can significantly improve interactivity and input response delays.
Optimizations for Cumulative Layout Shift
Cumulative Layout Shift (CLS) measures the instability of visually rendered page elements when loading content. This causes users to notice sudden shifts, redraws, and resizing of elements on the page as things load. The goal is under 0.1 CLS score. To help minimize layout shifts:
- Set image dimensions - Include width + height on image elements so the browser allocates space while loading.
- Avoid lazy loading above the fold - Items that load in immediately visible areas can cause layout jumps.
- Include size attributes on templates - Helps reserve space for elements that will load in later.
- Avoid large DOM changes after onload - Adding many nodes after onload can shift layout.
- Reduce dynamically injected content - Advertising networks often add content dynamically causing shifts.
- Fix improperly embedded iframes- Specify width + height, use scroll=“no”, and employ iframe sandboxing.
- Monitor CLS in the field - Watch for real user CLS events and optimize the worst pages.
Carefully crafted page layouts that properly allocate space for loading elements will yield better CLS scores. Continuous monitoring also allows finding and fixing issues seen by real users.
Compare Core Web Vitals Performance
Wondering how your website compares to competitors for Core Web Vitals? Review the table below to see average CrUX percentiles from Chrome User Experience Report data:
| Company | LCP | FID | CLS |
|---|---|---|---|
| YourSite.com | 90 | 50 | 60 |
| Competitor1 | 80 | 65 | 85 |
| Competitor2 | 78 | 80 | 73 |
| Competitor3 | 95 | 90 | 90 |
In this comparison, YourSite.com performs very well for LCP and reasonably well for FID, but quite poorly for CLS. Identifying these weak points compared to rivals allows you to set optimization priorities.
For reference, 75th percentile is generally considered average. The higher the percentile, the better for each metric. By examining your site through tools like PageSpeed Insights and Chrome UX Report you can surface optimization ideas.
FAQ - Core Web Vitals for Websites
Here are answers to some frequently asked questions around Core Web Vitals:
What happens if my site scores poorly for Core Web Vitals?
Sites with poor Core Web Vitals face a substantial risk of declining search rankings when the update rolls out. However, actual ranking impacts depend on your site and niche. Some sites with highly quality content can still rank reasonably well with mediocre speeds. But improving metrics should be a top priority regardless.
How much does page speed matter for SEO rankings?
Google has stated page experience signals now make up about 15% of the overall search ranking score. So while content remains king, page speed and Core Web Vitals matter quite a bit these days. Users expect a seamless website experience.
Does optimizing for Core Web Vitals help with conversions?
Absolutely - research shows sites with faster load speeds, interactivity, and stability enjoy higher user engagement. That translates into improved bounce rates and higher conversions. People find poorly performing websites frustrating. By optimizing Core Web Vitals your users will be happier and convert better.
What tools can help diagnose Core Web Vitals issues?
PageSpeed Insights and Lighthouse are great for testing and getting initial ideas. For detail monitoring over time leverage Chrome UX Report and Core Web Vitals analytics. Also use frontend monitoring tools like Calibre, SpeedCurve and Akamai mPulse.
What’s the best way to measure Core Web Vitals for PWA (Progressive Web Apps)?
The Lighthouse PWA analyzer is purpose built to assess progressive web app optimizations like service workers, manifest files, offline capabilities and performance metrics. For additional detail, insert Core Web Vitals tracking in your PWA code to see metrics directly in Google Analytics.
Summary - Prepare Now for Core Web Vitals Rollout
With Core Web Vitals becoming a Google search ranking factor starting in 2021, websites must take action to measure, monitor, and optimize performance. By following the best practices outlined in this guide you can substantially improve site speed, visual stability, and interactivity.
Use free tools like PageSpeed Insights and Chrome UX Report to benchmark current metrics and diagnose underperforming pages. Focus first on the low hanging fruit opportunities before addressing advanced optimizations. Set quarterly goals to gradually enhance Core Vitals scores across your site.
With some strategic planning you can make great progress on Core Web Vitals prior to mid-2021. By starting early, you will safeguard and likely grow your organic search rankings. Delivering excellent page experience also pays dividends through higher conversions and user satisfaction. Use this guide as a roadmap to prepare your website for the vital shift ahead.
Social Plugin