Getting ready for Web Vitals 2021

Over the years, Google has provided a number of tools for users to measure their performance, such as Lighthouse in Chrome, Test My Site and other more advanced versions of Lighthouse. While these tools are useful, not all regular users are capable of getting the most out of them, and some find them challenging to keep up with.

Google has introduced Web Vitals with the aim of simplifying the process of measuring performance. Whether you’re an experienced developer or a casual user of the internet, Core Web Vitals will provide clear, unified guidance on the most important statistics.

Usually Google doesn’t always give a lot of notice for updates they introduce, but due to COVID-19, this time there has been plenty of time to prepare. In May 2020, Google announced that Web Vitals would be introduced in May 2021. This gave users over six months to prepare for the updates and get to grips with the essentials.

Having this buffer period of over six months was a very welcome change to web developers and website owners alike. In 2018, it was reported that Google updates its algorithm an average of nine times per day! With many of these updates being small changes, most of them wouldn’t have been announced by Google. Users would have had to simply wait to see what the effects of these algorithm updates were and react to changes as they came along. By informing users of web vitals well in advance, Google has tried to give a bit more of a level playing field and removed the element of surprise they so often like to use.

Before we continue, we thought it might be useful to include a glossary that defines a few of the trickier acronyms that will come up in this guide.

• Time To First Byte (TTFB) – the measure of the first piece of data from the server to your browser
• First Contentful Paint (FCP) – a measure of how users perceive a web page’s loading speed as opposed to a what a page speed tool measures
• First Meaningful Paint (FMP) – the time it takes for a page’s primary content to load on the screen
• Largest Contentful Paint (LCP) – a measure of when the largest content element on a page becomes visible 
• First Input Delay (FID) – the time it takes for a user to interact with your web page
• Cumulative Layout Shift (CLS) – how stable a page is as it loads on a screen 
• Speed Index (SI) – a page load performance metric that shows you how quickly the contents of a page are visibly populated
• Cascading Style Sheets (CSS) – a style sheet language used for describing the presentation of a document written in a markup language such as HTML

In order to improve the Web Vitals performance of your website, we recommend making the following changes. Other websites may have different recommendations, if you are not sure, please get in touch! Many of these apply to your  website regardless of the platform it is built on – WordPress, Magento etc. 

Review website plugins

You should review all plugins on your website and delete those that are no longer necessary. While doing this, you should also look for opportunities to merge plugins where one plugin does the job of multiple plugins. This is not only great to do for performance reasons but also for security. The more plugins you have the more likely the website will take longer to load. Users won’t be able to engage with your website if they’re forced to wait for the content on the page to finish loading. This means that if you have unnecessary plugins slowing down your web pages, you could score poorly in categories such as FID, TTFB and LCP.

Cascading Style Sheets 

Cascading style sheets are what gives your website it’s look and feel. The more ‘styles’ you have the longer it takes to render the page. We would recommend using a technique known as ‘Critical CSS’. This allows you to quickly extract and display the ‘above-the-fold’ content, which means users will experience faster loading times. Depending on your website, this can be achieved in a number of ways.

Page cache

The page cache is similar to your browser cache. A cache is a ‘store’ of something and a page cache is storing a copy of web pages on the server. We would recommend using a cache to prevent any delay and unnecessary stress on the server. When a web page is first requested from your browser, it checks for a cached version. If one does not exist, we create a copy of that page for the next user. This improves the TTFB measure again which in turn increases the responsiveness of your web pages. This technique can be taken a step further by using a ‘cache warmer’ which will automate this process, meaning the user will always be served a cached copy of a web page (assuming the server has automatically generated one at this point).

Compressing files 

Compressing files such as images means that their file size will be smaller but they will still retain their high image quality. This is particularly useful for large images that typically have a long loading time. This could go some way to improving key statistics such as FID, CLS and LCP. Compressing files will drastically improve the experience of using a website on a mobile device, as large and slow-to-load images or content can make the experience unsatisfactory for mobile users. As over 50% of all searches are made on mobile devices, optimising web pages for phones and tablets really is essential. 

Lazy loading images

Lazy loading means that images on your web pages will only load once a user has scrolled down to that part of the page. This means that images aren’t rendered unnecessarily. Lazy loading helps to improve performance and allows for better utilization of the device’s resources and reducing associated costs.

PHP upgrade

PHP is one of the coding languages that WordPress uses that has evolved over recent years. Each version has had a performance improvement of some scale. We would recommend upgrading your PHP to make sure your website will be reaching the highest possible level of performance. 

Database optimisation 

Website databases quickly build up data, particularly on WordPress, and often much of this data is no longer needed. The more data you have in your database, the slower it takes the server to find it. We use plugins to clean and optimise databases and make sure they aren’t storing unnecessary data that is increasing load times.

System fonts

System fonts are fonts that are designed for their respective operating system. This means that when a web page loads, the font doesn’t have to be loaded by the browser. System fonts will allow you to benefit from higher-quality fonts that won’t affect your web page’s loading times. From a user experience point of view, the system font has been designed for the device you are on so the text will be displayed in an optimal way.

CloudFlare

Cloudflare is a free network that provides services to help improve a website’s performance and security. CloudFlare is free to use as long as you are managing a single site. It provides many options for managing a website and delivers effective plugins to boost the security and speed of your website. These improvements will contribute towards optimising your website’s performance and helping it to perform better once Web Vitals has been introduced. 

In addition to CloudFlare’s general handiness in assisting website performance, they have released a feature called Edge. Edge is a server that stores content as close as possible to a device, which reduces latency and improves page load times. This will help with metrics such as FID and CLS as well as overall responsiveness of a website.

We use the following five tools to audit our websites:

1. Web.dev
2. Pagespeed insights
3. Pingdom tools
4. GTMetrix
5. WebPageTest

By using these tools, we gain a broader overview of a website’s performance than we would if we were to only use one or two. We’d recommend doing this to make sure that you have results from more than one source to accurately take measurements about your website’s performance. From the data we see, we can then come up with a clear plan of what is needed.

Even when you think you’ve ticked every box, it’s important to know that a website is never complete. There are always more upgrades and further room for improvement. We can use a number of different tools to perform tests on all pages of a website. This will make sure that the entire contents of your website is up to Google’s new required standards. We mentioned Critical CSS above and how important it is in delivering a fast and seamless experience for users on your website. Our custom-made Lark WordPress theme has Critical CSS built in. Depending on the look and feel that you’re after, we can programmatically tailor all template types to have a different and more relevant CSS style.