Have you ever been frustrated by a site that took too long to load? You’re not alone. According to a study, 40% of visitors click away from a website that takes more than 3 seconds to load. Google says that performance was the most important factor for user satisfaction; so important, it ranked 3x higher than site aesthetics! These studies have found a direct correlation between site load time and conversions. Meaning if you have a slow site, you’re losing sales because of it.
Making matters worse, the majority of users today are browsing the web from a mobile device. Poor network connections and lower processing capabilities compound the problem, making mobile performance the most important item for any web developer.
Google created Core Web Vitals as a way to measure site performance across desktop and mobile browsers. In May 2021, these metrics will be incorporated into Google’s page ranking algorithm. So, aside from the numerous benefits of having a fast website, it will also affect how your website ranks in Google search.
Core Web Vitals go a step beyond page load speed to assess your website's performance on three key metrics:
Largest Contentful Paint measures how long it takes for the site to become visible to the user. Google accomplishes this by measuring the time it takes for the largest item to load. Most often, this is the largest image on the page. A time of 2.5 seconds or better is considered good. Keeping images small and serving them from CDN is the best way to improve this score.
First Input Delay is the amount of time it takes for your site to become interactive. This metric is important because the time it takes for a site to become interactive can negatively impact your user’s first impressions. Reducing the amount of Javascript and CSS your site loads can improve FID.
Cumulative Layout Shift measures how much elements on the webpage move as assets are loaded. Have you ever visited a website and tried to click on a button, but the button moved as an ad loaded and you accidentally clicked on the ad instead?
The frustration visitors feel as elements move around is what makes CLS undesirable. Reserving space for ads and images will drastically improve your CLS score. Inlining critical CSS can also help.
Google provides several tools to measure Core Web Vitals. The most used is the on-demand tool, Lighthouse. The others focus on real world metrics to give you an indication of how real people experience your site.
Google Lighthouse is a free tool that measures site performance in a simulated “lab” environment, where variables such as network speed and processing power are controlled. It can simulate both mobile and desktop environments. The easiest way to use Lighthouse is through the online tool, but more serious developers may use the command-line tool or Lighthouse built into Google Chrome dev tools.
Lighthouse is a powerful tool that goes beyond measuring performance; it measures four important categories: Performance, Accessibility, Best Practices, and SEO. Lighthouse scores each category out of 100 points (100 being a perfect score). Anything above a score of 90 is considered good. If there is an issue affecting your score, Lighthouse will tell you what it is and give recommendations on how to fix it.
When using Lighthouse, it is important to test as many pages as possible to ensure that your entire site is performing well--not just the home page. The online tool and Chrome dev tool only test one page at a time. This is ok for quick one page tests or smaller sites. If you have a larger site, the command-line tool can test multiple URLs at once, which makes testing much more efficient.
There can be some variability from test-to-test, depending on numerous factors. Because of this, we test each page at least three times and take the highest score. Once we’ve established a base-line score, we address each of the recommendations and then test again. Testing, making the appropriate changes, and then testing again ensures that each change is resulting in an improvement, not regression, in performance. Lighthouse is an integral part of our Kaizen, or continuous improvement, model for website development.
Spoiler alert: Lighthouse rewards a perfect score across the board with motivating fireworks!!
While Lighthouse is a great tool, it doesn’t capture real world data on site performance. What really matters is what your visitors are actually experiencing; it’s something a lab test can’t determine. To measure real-world performance, Google uses the [Chrome User Experience Report CrUX.
Google collects data from their Chrome web browser from mobile (android) and desktop users. This data is then used to profile the performance of your website over time. As of May 2021, CrUX data is factored into the Google Search algorithm, making Core Web Vitals a variable in your Google Search page ranking.
The easiest way to see a page’s CrUX data, is to test the URL in Google’s Page Speed Insights. If there is enough data, Page Speed Insights will display the real world Core Web Vitals under Field Data. A page passes Core Web Vitals if the 75th percentile of all three metrics is good.
Google Search Console is a great place to see how your CrUX data changes over time. Within Google Search Console, you can see the general trend of your website’s performance.
With all of the attention Google has been given to measuring website performance, it has become even more imperative that businesses give more attention to it. Having a website with good Core Web Vitals, can positively impact your brand--through improved customer experience, sales, and higher search ranking.
Mobile users are at a great disadvantage when it comes to network speeds and processing power. A fast desktop site doesn’t necessarily translate to a great mobile experience. Prioritizing mobile performance can have the largest impact on the success of your website.
At Vibe, we prioritized site performance from the beginning. By choosing to focus on static websites, we have an inherent advantage when it comes to Core Web Vitals. Sites built with WordPress, and other traditional CMS, are difficult to optimize for Core Web Vitals.
Look out for our upcoming post on how we achieved 100’s across the board on Lighthouse. If you’re interested in seeing what we can do for your small business’s web design, check out our Website Design Services.
