Become a Skillthrive author!

Tools to boost your web performance scores (Core Web Vitals)

By Hanson on November 16, 2022

The digital world has exploded over the past few years. Digital commerce, social media, and online marketing have created a new customer-centric landscape. Websites are now more than just portals that provide users with the information and content they need. They're an extension of your brand, with the power to increase awareness, drive traffic and build a lasting relationship with your target audience. To succeed in this new digital world, you must demonstrate high performance across all digital channels to handle the rapid changes that come along every second. 

You've spent countless hours perfecting your website and building a high-performing site that loads quickly, performs well, and looks great. However, if your site isn't performing better than you had hoped, it can waste time and effort. 

The average user has two minutes to find what they are looking for on the internet before they give up and go elsewhere. If you have poor performance scores in Google Chrome or Firefox, or you're struggling with mobile browsing performance, your users will give up on you faster than if you had a fast-loading site. 

It's essential to keep improving all aspects of your website's performance to ensure that your site is always performing at its best. The good news is that there are many small things that you can do to boost your Core Web Performance Vitals. This blog post focuses on some essential web performance tools that every website needs to stay top-notch and rank top for related Google searches.

What is Core Web Vitals?

Core Web Vitals are a set of standardized metrics from Google necessary for the overall user experience of a webpage. Core Web Vitals are three measurements of page speed and user interaction: largest contentful paint, first input delay, and cumulative layout shift.

https://axcfyibnfbkmqbvnrcoa.supabase.co/storage/v1/object/public/images/aa36cd21-901c-423f-8f31-f7fa8034d8b6.jpg

In short, Core Web Vitals are a subset of factors in Google's "page experience" score (basically, Google's way of assessing the overall UX of your page). Your site's Core Web Vitals data are in the "Experience" section of your Google Search Console account.

How do Core Web Vitals affect web performance?

It's important to consider the Core Web Vitals to create a high-performing website. These include:

  • Mobile-friendliness

  • Lack of interstitial popups

  • "Safe-browsing" (basically, not having malware on your page)

  • HTTPS

A good Core Web Vitals status for your site will increase the overall page experience of your site. While it is an aspect of a website that should be set at maximum levels, more than good Core Web Vitals will be necessary to magically push your site up the first page of Google search results. In fact, it's just one of approximately 200 factors Google uses to rank search results.

How to Measure Core Web Vitals

One of the most critical tasks for any web developer is measuring their website's performance. Measuring Core Web Vitals is very easy. The metrics can be found in the "Experience" section of your Google Search Console account.

There are also other tools to measure and optimize the Core Web Vitals of your site. We will look at some of these tools later in the post, so keep reading.

Best Core Web Vitals Tools To Boost Your Web Performance Scores

PageSpeed Compare

https://axcfyibnfbkmqbvnrcoa.supabase.co/storage/v1/object/public/images/b8395fb9-7c4a-4f33-b7bf-1e7c21516500.jpg

PageSpeed Compare is a groundbreaking tool for evaluating and benchmarking page speed. It uses Google PageSpeed Insights to assess the web performance of a single page. It can also compare the performance of multiple pages on your website or your competitors' websites. 

It assesses a website's lab metrics, field metrics, page resources, DOM size, CPU time, and potential savings. PageSpeed Compare uses land and field data to calculate vitals such as FCP, LCP, FID, CLS, and others.

Pagespeed Compare lets you compare your website to your competitors in the form of film stripes. This tool will help you improve your website's performance and speed by providing valuable suggestions on making your website faster and even ranking your website for keywords. 

It generates a report that lists the resources loaded by a page under consideration, the total size for each resource type, and the number of requests made for each type. It also looks at how many third-party requests and resources a page makes. It examines the page's load on the server CPU, considering time spent on different tasks, Javascript execution time, and CPU blocking. 

Furthermore, it identifies unused Javascript and lists cached resources. PageSpeed Compare examines the page's DOM and breaks it down by complexity, size, and children. It can also detect unused images and layout changes in a graph.

PageSpeed Compare will tell you optimized your website is for search engine ranking, what parts of your website need to be optimized, and where potential opportunities for optimization lie. For example, it could suggest removing unused code, like CSS and JavaScript.

It has a well-presented Dashboard that makes it easy to understand the results of a compare query, showing what and how to take action.

Treo

https://axcfyibnfbkmqbvnrcoa.supabase.co/storage/v1/object/public/images/314063a9-457b-477d-9417-50eb948fad7c.jpg

Treo is a more advanced tool for audits of Core Web Vitals because it uses information from the Chrome UX Report, Lighthouse, and PageSpeed Insights. 

You can quickly identify which of the Core Web Vitals of your website are sub-par and start optimizing them immediately. This tool is handy for sites with more than ten pages loaded through a single URL. That's because it will only check a limited number of elements on each page and then provide suggestions for improvement accordingly. 

Treo Site Speed will scan the entire site to see which areas need improvement and which resources are causing delays in loading time. It will also consider any external resources, such as images being loaded off-site instead of by your website's internal server.

Treo gives you a detailed breakdown of your performance metrics, including geography and experimental metrics like Interaction to Next Paint. 

Audits can be performed on a variety of devices and network conditions. However, Treo allows you to track the performance of all your pages across your sitemap and even set up alerts for performance regressions. You can also get monthly updates on the performance of your website. Treo crawls the entire site for outliers in your Core Web Vitals scores. 

You can also use Treo Site Speed to compare a website to its competitors. Treo generates detailed reports that are segmented by device and geography. They are granular, with options at the domain and page levels. You can export the reports or use an API to access their data. 

The best feature of Treo Site Speed is that it's an easy-to-use yet powerful. Another good thing is that it's compatible with Google Chrome (and all other browsers), meaning you can even use this tool on your smartphone! And lastly, this tool will not interfere with your website's functionality.

WebPageTest

https://axcfyibnfbkmqbvnrcoa.supabase.co/storage/v1/object/public/images/72ed4509-2f16-4cb6-8e05-c7958767f4d5.jpg

WebPageTest is an open-source web performance tool that provides diagnostic data on how a web page performs under various conditions. It provides an online version that enables tests to be run from anywhere in the world, on actual browsers, and under customized network conditions.

WebPageTest gives you an idea of how your website performs across various key areas. It allows you to conduct tests against different browsers and devices, comparing their performance. Beyond that, it can also measure the load time, resource usage, and speed, as well as provide information on how long it will take to load pages, what error rates there are, whether your site is mobile-friendly, and more. 

WebPageTest offers several options for running tests on a web page.

  • Advanced Testing: This test is the default setting. Aside from the location and the browser/mobile phone, you can customize your test by selecting a connection type (cable, xG, etc.), the number of tests, Chromium options, scripting, or custom metrics.

  • Simple Testing: This test only offers a few browser/device/location configuration options.

  • Web Vitals: This test only looks at the core statistics that affect a web page's SEO ranking: Largest Contentful Paint (LCP), Content Layout Shift (CLS), First Input Delay (FID), and Total Blocking Time (TBT). These figures are included in the global report.

  • Visual Contrast: This option allows you to compare the results of testing different web pages.

  • Traceroute. This option displays the route between the selected data center and a website/IP address in milliseconds.

When you click the "Start Test" button, your test is added to the queue and awaits processing.

Its results display dashboard provides a slew of information on the Core Web Vitals tested as a set of grades for the most critical performance optimizations areas. It is easy to understand and navigate and a great starting point for Core Web Vitals assessment.

Cumulative Layout Shift Debugger

https://axcfyibnfbkmqbvnrcoa.supabase.co/storage/v1/object/public/images/8d7209ee-10d0-4959-94e6-01282024bc95.jpg

The Cumulative Layout Shift Debugger is another competent Core Web Vitals tool to measure your site's web performance. It works by visualizing the cumulative layout shifts of any webpage during its initial load, making it easier to identify what needs to be improved.

Cumulative Layout Shift is a Core Web Vital metric that measures content instability by adding shift scores from layout shifts that occur more than 500ms after user input. It considers how much visible content shifted in the viewport and how far the impacted elements shifted.

The Cumulative Layout Shift Debugger detects and measures layout shifts in the period a page starts loading and, when it finishes loading, calculates the cumulative layout shift score. The squares in the image represent where shifts are occurring, and the list of HTML elements assists in identifying the culprits in the code base, which may require fixing depending on the scores.

The CLS consists of two essential parts:

  • Layout Shift 

  • Session Window

Layout Shift 

Layout shifts when visible elements change position from one rendered frame to the next.

Session Window

A session window is a series of layout changes where one or more individual layout shifts occur in rapid succession, with less than one second between each shift and a total window duration of no more than five seconds.

The Cumulative Layout Shift Debugger was developed by an SEO expert and ex-Google engineer, who wrote every line of code for the tool. The Cumulative Layout Shift Debugger is constantly improving and adding more features.

 The following are the most common causes of CLS and potential solutions:

  • Images with no predefined dimensions can be addressed by using responsive images and adding width and height dimensions to all images.

  • In general, dynamically injected content should be avoided unless it is in response to user interaction. 

  • Web fonts that cause a Flash of Invisible Text (FOIT) or a Flash of Unstyled Text (FOUT) can be fixed using font-display and rel=preload.

Polypane Web Vitals

https://axcfyibnfbkmqbvnrcoa.supabase.co/storage/v1/object/public/images/d1a49ee1-788e-4b76-84c5-3091c91e9e95.jpg

If you're looking for a web performance tool with the most comprehensive performance insights, you should turn to Polypane Web Vitals

Web Vitals are a set of metrics that assess your website's user experience. If you score poorly on them, your site will be less valuable than a site with good Core Web Vitals. Google also uses them to determine a page's SEO score. As a result, improving them is critical for any website.

You can use Polypane to monitor the web vitals of your site continuously. With Web Vitals enabled, each pane receives a new label that displays either a green dot for "good," a yellow square for "needs improvement," or a red triangle for a "poor" score. 

If you receive a "needs improvement" or "poor" rating on any of the web vitals, the label displays the Web Vitals that received a "poor" or "needs improvement" rating so that you can optimize them and improve the performance of your site.

If you hover over the label for more information, a popup with a complete overview of your Web Vitals will appear for a more detailed look at the issues.

Calibre's Core Web Vitals Checker

https://axcfyibnfbkmqbvnrcoa.supabase.co/storage/v1/object/public/images/12f889f1-2e56-46aa-b7a6-dee774804c94.jpg

Calibre's Core Web Vitals Checker is a complete website performance analysis tool. It checks your site for an abundance of different factors, then grades them to establish if you failed or passed the test.

Core Web Vitals Checker generates four site speed metrics based on Google Chrome browsing data. Each metric focuses on a different aspect of user experiences, such as loading, interactivity, and visual stability, so you can focus your efforts where they are most effective.

Your summary is based on Google's Chrome User Experience Report (CrUX), a publicly available dataset of real-world user experiences from millions of websites. CrUX only collects data from Chrome browser users who have opted in (excluding iOS).

The Core Web Vitals Assessment section determines whether your page or site meets Google's Core Web Vitals standard and tells you if your site passes or fails the test. It also places your site in a percentile fraction system to tell you how it is doing compared to all other sites. 

For example, the 75th percentile indicates that 75% of recordings were lower than the highlighted Web Vitals values, meaning 75% of page or site visitors had the Largest Contentful Paint of 2.5 seconds or less.

The overall values are classified as "good," "needing improvement," or "poor." You can see the percentage of user experiences and a breakdown of each metric's performance and determine where you should improve.

CrUX Compare

https://axcfyibnfbkmqbvnrcoa.supabase.co/storage/v1/object/public/images/32224739-41df-47c0-9074-2cdb4a67b687.jpg

CrUX is a cloud-based database that collects Real User Measurements (RUM) from live Chrome browser sessions. Suppose you have enabled usage statistics reporting and have opted into syncing browsing history on Google Chrome. Whenever you load a webpage, information about your session is automatically reported to CrUX.

In addition to CrUX Compare, the tool also offers advanced features that enable you to calculate the page load time based on your server's response. It is free to use and offers the functionality to add multiple websites to compare their performance.

Web Vitals JavaScript Library

https://axcfyibnfbkmqbvnrcoa.supabase.co/storage/v1/object/public/images/322eaa86-395d-459f-aa63-62f098639ef5.jpg

Web Vitals JavaScript Library is a small JavaScript-based performance analysis library that helps you track and analyze your website's most important performance metrics. Web Vitals provides several tools to help you better understand how your site's SEO, social media, and mobile functionality affect the way your site performs. The library is free on GitHub and can be easily integrated with web browsers or any server-side code language.

SpeedVitals

https://axcfyibnfbkmqbvnrcoa.supabase.co/storage/v1/object/public/images/07512c24-036f-460a-b101-d97fdb08f392.jpg

SpeedVitals is another web performance testing tool that is easy to use. It measures Web Vitals and provides performance optimization tips to help you pass Core Web Vitals.

SpeedVitals also has a Batch Test Mode for bulk Testing and a TTFB Test for measuring a website's server response time from 35 locations worldwide. Following the tool's recommendations, you can make your website lightning fast and pass Core Web Vitals. Go to the top of the home page, enter your website URL, and click the "forward arrow" button to begin the test. 

Conclusion

Core Web Vitals are a powerful metric. It can help you see how your website measures up to other websites, both within your industry and across the Web, and the analytics tools exist to help you monitor it in real time. Consider these tools to take an honest look at your site's strengths and weaknesses and use that knowledge to help you build high-ranking websites.