What are Core Vitals and how do they impact WordPress websites?

There are lots of factors that dictate where your web pages will rank organically, within the SERPs (Search Engine Results Pages). The old adage of ‘content is king’ remains true. A well written, well visited web page that focuses on a single topic counts for an awful lot in the eyes of the Google algorithm, particularly when it comes to Core Vitals.

In August 2021 Google added a new ranking factor, Core Vitals. Core Vitals measure the quality of the UX (User Experience) of a web page. They cover three key areas – loading, interactivity and visual stability. Each of these ranks as ‘Good’, ‘Needs improving’ or ‘Poor’. Core Vitals use both lab data (interpreted artificially using a controlled set of variables) and field data (interpreted from real users interacting with your site).

A brief overview of the Core Vitals

LCP – Largest Contentful Paint (Loading)

LCP is the largest single element on the web page that the browser displays (or ‘paints’) when the page loads. The LCP on a web page can vary across devices/screen widths. On a desktop computer the LCP element could be a page’s featured image. On a mobile device it could be the page’s main (H1) heading, as the featured image is scaled down by good, responsive, web design.

A page needs to be fully loaded in 2.5 seconds or less for this Core Vital metric to be classed as ‘Good’.

FID – First Input Delay (Interactivity)

This is the time it takes for a web element to respond to a user’s input. For example, the time between someone tapping a hamburger icon and the navigation menu appearing. These tasks can easily be delayed if other page processes are running in the background, using up the browser’s processing ability. Delays like this make users frustrated.

Google requires a page’s FID score to be 100 milliseconds or less to be classed as ‘Good’.

CLS – Cumulative Layout Shift (Visual Stability)

This is a rather general measurement of how significant elements on a web page move about as the page loads. Factors that affect the CLS score include images changing size as CSS rules are applied to them, typography changing from browser defaults to site-specific fonts and layouts shifting as adverts and other dynamic content loads. As well as being disorienting to users, shifting layouts can cause bigger problems, eg if a user clicks a button at the same time as the layout shifts, moving another button into its place (see an example here web.dev CLS overview page).

Google requires a page’s CLS score to be 0.1 or less to be classed as ‘Good’.

How Core Vitals impacts WordPress based Websites

We mostly build WordPress websites, so we’ve been following the Core Vitals initiative and testing our sites using tools such as Pagespeed Insights and Lighthouse (now integrated into Chrome).

Our sites didn’t score particularly well – not terrible, but definitely room for improvement. We found that, like other plugin-based CMSs, the WordPress ‘ecosystem’ was the biggest culprit for the average results. As discussed in our post Why to avoid third party WordPress themes, third party plugins are never aware of what other themes and plugins will be installed alongside them. Therefore, they have no concern for any code other than their own and prioritise themselves to ensure that they run correctly – even if this is to the detriment of other code.

Plugins often add code to a site and set it to execute as early as possible so that its features and functionality are available to the user as early as possible. However, while this code is loading it’s delaying the load of the LCP element and causing a lengthy FID.

The worst examples of this are plugins that create or monitor user journeys and traffic flow – dare we even say the word…trackers. These scripts insist on loading as early as possible to give themselves the most accurate data. However, while they are loading and running, they are delaying the rest of the page load (Core Vitals regards these types of scripts as render blocking resources).

Quite often these types of plugins and scripts are added after a site has been built to avoid skewing visitor data with traffic from developers, QA testers and other stakeholders.

How Core Vitals impacts websites more generally

The following impacts largely affect older websites:

Serving images in next generation formats.

The most common image formats in use on websites today are still those from the 80s and 90s, ie GIF and JPG files. Although these formats use compression to reduce their file size they can still be quite large, resulting in increased load time and page load stalling.

While image compression has come a long way since then, browser manufacturers haven’t readily adopted the newer formats. However, Chrome’s ascension as the world’s most widely used browser has allowed Google to implement its own image format, designed specifically for use on the internet – webp. Webp images offer high levels of compression as well as support for animation (similar to GIFs) and transparency layers (similar to PNGs).

It’s no surprise that a web page grading tool developed by Google will give your pages extra points for using webp, the shiny new image format developed by Google!

Sarcasm aside there are lots of benefits from using webp images on your web pages. We include them on all the sites that Fellowship builds. There are tools out there, such as those provided by Cloudflare, Smush and Imagify, that will create webp versions of any images already on your site. The few browsers that don’t support the webp format will always fall back and use the original JPG, GIF or PNG images anyway.

Reducing unused Javascript and CSS

Not long ago web server technology was limited to the number of requests that it could make concurrently. These requests included CSS and Javascript files as well as images and fonts. While it made sense to combine CSS and Javascript code into as few files as possible, they often include code that was not directly used by the page it was loaded on.

Web servers can now serve many, many more requests concurrently, meaning that smaller CSS and Javascript files – that only include code that is actually in use on a page – are preferable.

Reduce server response time for Core Vitals

The faster the server that’s hosting your site, the quicker its response times will be. However, there are some other factors that will affect this.

Optimised database tables and queries

If your website uses a database (as WordPress does) optimising its tables and queries will help to reduce the overall server response time. Web page content is being drawn from a database, so the quicker the server is able to retrieve this data the quicker it can render it on a page.

Efficient caching

Websites are usually composed from a number of shared elements such as the header, navigation, main content area and footer. The server compiles these elements which can take a reasonable amount of processing power, depending on the complexity of the page. It makes sense to cache this compilation so that the next time the page is requested it doesn’t have to be repeated.

DNS

DNS (Domain Name System) is the method used to query a vast database that correlates a domain name to a specific web server. It allows a user to reach a website via an easy to remember domain name, as opposed to the web server’s actual address. When a user enters a domain name into their browser a lookup then finds the server’s actual address. The speed of these lookups is determined by a number of factors. The most significant is the company providing DNS for your domain name. Better providers of DNS services tend to have faster lookups. They also provide CDNs (Content Delivery Networks) which allow their lookups and your web page content to be distributed throughout the world. This means users can connect to the services closest to them. Yes, even in the digital age, the nearer you are physically located to something, the faster you’ll get it!

Conclusion

Although the introduction of Core Vitals can be seen as a frustration, we believe that its intentions are noble. We want our websites to be easy to use and Core Vitals is all about user experience. Website design is more akin to product design than it is to graphic design. A good website should always emphasise usability over aesthetics. Core Vitals provides some very good pointers on how to make your site more usable. That’s to be commended.

While Core Vitals is now a ranking factor within Google’s search algorithm, it still ranks well below good quality content as a contributing factor.

Core Vitals highlights some deficiencies in plugin-based CMSs including WordPress. These can be alleviated by embracing the webp image format, reducing your site’s reliance on third-party code, and fully considering each and every plugin or script that you add to your site. Core Vitals also highlights the importance of choosing your web partners wisely. Good quality web hosting and DNS providers play a significant part in achieving a ‘Good’ Core Vitals score.

Finally, the implementation of Core Vitals is another example of how the internet landscape is constantly changing and evolving. We mentioned earlier how website build practices, from only a few years ago, are now completely obsolete. Even though your website may not have changed, the environment around it has and will continue to do so. The most successful websites will be the ones that embrace these changes for the benefit of their users.

Want to improve your existing WordPress website’s Core Vitals score?
Or build a new site with ‘Good’ Core Vitals scores baked in?
Call Matt Johnson on 01284 830888, or email [email protected]