How to Test for and Fix Core Web Vitals
Core Web Vitals have been on people’s radars for a while now. When Google announced back in November that these metrics would become ranking signals in May 2021, webmasters and marketers really started to dive into vitals and what they mean for their website.
Google’s Core Web Vitals is built into the Search Console and is an integral way for site owners to understand user experience better.
When something as simple as a page load time going from 1 to 3 seconds can increase bounce rate by 32%, businesses must begin focusing on their user experience.
Core Web Vitals helps improve user experience through a set of metrics that can be improved upon.
Let’s see how.
What are Core Web Vitals?
Google wants user experience to be paramount to site owners. The search giant has introduced a set of metrics that involve a page’s visual stability, responsiveness and speed.
1. First Contentful Paint (FCP): The time it takes for the first image or text to be painted on the user’s screen. Ideal FCP are between 0 and 2 seconds.
2. Speed Index: The speed index is how fast content is displayed on a page. Ideally, the Speed Index will be 4.3 seconds or less.
3. Largest Contentful Paint (LCP): The time it takes for your largest image or block of text to be painted. Ideal LCP is between 0 and 2.5 seconds.
4. Time to Interactive (TTI): The amount of time, in seconds, for a page to be fully interactive. Ideal speeds are 0 to 3.8 seconds.
5. Total Blocking Time (TBT): TBT is the first metric measured in milliseconds and is the time between FCP and TTI.
6. Cumulative Layout Shift (CLS): Measurement of visible element changes within the user’s viewpoint. This shift occurs when one visible element changes position between rendered frames (i.e. an image shifts position). Ideal CLS speeds are 0.003 seconds.
These are the six main metrics that are part of Core Web Vitals. If you want to improve these metrics, it’s first important to test them to have a benchmark to measure your changes against.
How to Test for Core Web Vitals
Google has put a lot of emphasis on Core Web Vitals, and they’re attempting to make it as easy as possible to test for these metrics. A few of the many ways that you can begin testing for vitals are:
• Lighthouse: Open a page in Google Chrome, right click on the page, and choose “Inspect.” Navigate to the “Lighthouse” tab and generate a report to see your page’s vitals.
• PageSpeed Insights: Analyze your page, and on the report, you’ll find Lab Data, which includes information on your vitals.
• Search Console: Navigate to your Search Console and go to your site’s Core Web Vitals report.
You can also access this information via Chrome DevTools or UX Report, or you can download an extension from the Chrome Web Store.
Once you’ve tested for issues, you’ll need to fix any that exist.
Fixing Issues with Core Web Vitals
When sites meet the thresholds outlined in Core Web Vitals, users are 24% less likely to abandon a page before the content has been painted. A few of the key methods you can use to fix Core Web Vitals issues are:
First Contentful Paint (FCP)
FCP is heavily influenced by the font that you choose. If you load a non-standard font, there will be invisible text on the screen until the font loads, which has a significant impact on FCP. Text needs to remain visible during load, which means that you’ll need to load a standard font that is on the user’s system already.
A few of the ways to improve FCP are:
• Reduce server response time
• Use a CDN to speed up delivery
• Defer your non-critical resources
• Remove or reduce above-the-fold, script-based elements
• Prefetch elements that you’re sure will be used in the future
• Avoid multiple redirects
Focusing heavily on FCP will also help you reduce other Core Web Vitals.
Speed Index
A lot of people argue that the Speed Index is the most important because you want to get text or images on the screen as fast as possible for your user. You can improve speed index by:
• Reducing your JavaScript execution time
• “Lazy-load” any JavaScript that can be deferred
• Use font-display: swap to make sure that there’s always a font on the screen when loading
• Place third-party scripts at the bottom of the page
• Serve images with sizes that make sense for devices (e.g. thumbnails don’t need to be 4K on mobile)
Largest Contentful Paint (LCP)
Reducing your site’s LCP means focusing on the elements that make up LCP, which are: block-level elements, images, videos and elements loaded in the background, such as using CSS gradient.
You can improve LCP in many ways, including:
• Optimizing:
– CSS
– Images
– Fonts
– JavaScript
• Reducing the Critical Rendering Path
• Upgrading to a better host that offers faster response times
• Removing large page elements impacting LCP
• Removing unnecessary third-party scripts
Time to Interactive (TTI)
TTI is often corrected by making changes to other metrics, but a major focus should be put on your JavaScript usage. You’ll want to:
• Focus on and reduce your JavaScript execution time
• Minimize the main thread work
• Use code splitting to reduce JavaScript payloads
• Minify JavaScript coding
• Preload requests
• Reduce request counts
Total Blocking Time (TBT)
Improving TBT is possible by learning what tasks are taking the longest to load. A few of the most common methods to reduce TBT are:
• Remove unnecessary code
• Load third-party code last
• Optimize and refactor slow coding
Cumulative Layout Shift (CLS)
Minimizing your CLS is important, and this can be achieved in numerous ways:
• Always set sizes and dimensions for all of your videos and images. When you set your sizes, the browser will not change the sizes of these elements when the page loads.
• Designate space for any ad elements so that they don’t change the position of your page’s content.
• If new UI elements are added to a page, be sure that this addition occurs below the fold to avoid any unnecessary content shifts.
• Leverage CSS’ transform property to allow for animating elements without forcing layout shifts.
Final Thoughts
Page experience is a ranking signal, and Core Web Vitals is now combined with other user experience signals, such as safe-browsing, HTTPS and mobile-friendliness. By implementing the fixes above, you’ll be able to improve site usability, reduce bounce rate and your bottom line.
SEO is evolving with multiple parts to consider that go well beyond Core Web Vitals. User experience, even if it wasn’t an integral part of Core Web Vitals scores, is one area of your website that you should always be trying to improve.
Optimizing FCP, LCP and CLS – among other metrics – is a good place to start focusing on user experience, page performance and site speed.
