HOW TO MEASURE PAGE EXPERIENCES ON YOUR WEBSITE?

As a website owner you would want to know and measure how users experience interaction with web pages. Google’s Core Web Vitals are just the metrics for that. Since 2021 these Core Web Vitals are used as ranking factor, hence part of the Google algorithm. In other words, these metrics will help define how pages will appear in search results. These metrics are:

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)

Largest Contentful Paint measures how fast your page loads (laadsnelheid). It is considered as a good user experience if your page loads within the first 2,5 seconds. Above 4 seconds? Time to up your game! CSS and/or JS rules delay the LCP. Think about a JS function that loads a hero image. Result: the hero image loading time will be delayed.

First Input Delay covers the interactivity of the page (reactievermogen). To ensure good user experience, a page has to have a FID of 100 milliseconds or less. For example, you see a button and you click on it – Nothing happens… That means that the main thread is too busy to actually calculate your click and respond to it. The interaction on the page is delayed. FID’s above 300 milliseconds will make your customer leave the website. Too slow, sorry. A third party code can impact the FID. For example: the visual site of the page has already loaded, user tries to interact but in the meantime the interaction has been blocked.

Cumulative Layout Shift measures the visual stability of the page (visuele stabiliteit van een pagina). A layout shift occurs any time a visible element changes its position from one rendered frame to the next.
Imagine a user who tries to click something on the screen, but screen is empty. A banner pops up and the user unintentionally clicked it. In a perfect world, the best case scenario would be that the banner preserves space for itself so the user does not click this area. If items don’t have dimensions specified, then your browser can’t preserve space for them.

What tools are available?

Google Search Console is one of the tools that you can use to monitor and measure the general state of performance of your website. However, we don’t find it detailed enough. We swear by Google Lighthouse. It’s a free, open-source tool that helps you learn more about your website’s performance and gives you concrete steps to optimize it. One of the ways to run the tool is via Google Chrome extension.

Open the website URL that you want to generate a report of and click the Lighthouse icon in the extension area (next to the URL). Then click ‘Generate report’. Lighthouse will execute multiple page audits and create a report detailing how the page performs. You can then use suggestions from the results to improve your website.

Need help with auditing your WordPress site?

Keep an eye on what is happening on your website(s) by performing audits. It is essential for ensuring a great user experience. BATMAN provides technical analysis reports that help you understand your site’s performance, SEO and accessibility.

(Source: https://developers.google.com/learn/pathways/web-vitals)