Google’s Core Web Vitals and what it means for your website

Share This Post:

Share on facebook
Share on linkedin
Share on twitter
Share on email
Core Web Vitals

You may have seen Google and SEO (Search Engine Optimisation) companies talking about Core Web Vitals over the past few months. Well with good reason. It’s sounding like Google are going to make this a big part of how they rank websites in future, so lets take a look at what it is so you have a better understanding of how to improve your website.

Google’s Core Web Vitals

Google is now using its Core Web Vitals much more prominently to assess your website.

We already know that Google segments and shows different search results for mobile and desktop. If you are searching via Google on your phone then you’ll see search results for websites more suited to viewing on your phone and the same for Desktop.

The Core Web Vitals are set to play a bigger part from now onwards with Google interpreting your site speed as part of its results.

You can find out your website’s PageSpeed Insights by analysing the URL of your website here – click here.

One of the things that has a huge impact on page speed is your hosting platform. We would highly recommend Krystal Hostingclick here to see further details.

This will give you a rough idea (and remember the first score you see is for mobile only!) but often Google’s interpretation of your website speed may not be bang on the money. There can be a lot of variation for example if you try running the analysis on different days and at different times.

If you want to know what goes into Google’s PageSpeed Insights score here’s a behind the scenes look at how it’s made up – click here.

The terms used by Google (First Contentful Paint, Cumulative Layout Shift, Total Blocking Time) may also seem like double Dutch to most people so for a more in depth but easier to understand analysis try using Pingdom at https://tools.pingdom.com. Here you’ll be able to see your website’s performance grade, page size, load time and requests which will give you a much more useable idea of what to change to increase your score.

Analysing Your Website and fixing issues with Core Web Vitals

Let’s dive into a bit of what Pingdom can tell you:

Performance Grade

Performance Grade factors in a number of different things so we’ll skip this for brevity. As a marker we want to be aiming for a C (pass) or above, a passing grade at the least.

Think of this as being an approximation of the Core Web Vitals heading Speed Index.

Page Size

Page Size is important however and should realistically be no more than 1.5MB in total unless you’re using an advanced hosting platform that can serve your website quickly and efficiently. Pingdom provide a handy breakdown of which elements are the biggest by size further down the analysis, just check the table marked “Content size by content type”.

Images are likely to take up the most size in total combined (you’ll see them listed as Video if they’re hosted on your site or as XHR if you have embedded video from YouTube/Vimeo etc) but any video files are also likely to take up the top spot for size. If things like your Font files or CSS are over 500KB then there’s a problem there also with too many effects. Think about toning things down and using a more standard font (or less styles – stick to two typefaces max).

Like in real life size is an important. The bigger the page size the longer it will take to load. There are actions you can take such as using an image optimisation plugin such as Imagify, which will squash your file size and also display them in what’s called a next generation format like Webp (smaller file sizes again), or an efficient caching plugin like LiteSpeed or WP Rocket which can lazy load the images speeding up your page. LiteSpeed can also optimise your images and convert them to Webp.

By default WordPress makes a number of copies of your images at different sizes (you can check this and customise in Settings) which allows you to display images at different sizes. If you’re using Elementor think about displaying smaller images at Medium or Medium-Large size instead of Full or Large. This will bring down the size of the page also.

Server Requests

Requests, in short, are the amount of elements on your web page. The more requests the more things like images and video content are required to load the page.

Every website and web page is made up of html (the basic layout or grid, columns, rows, sections etc), CSS (the way things look and are styled, colours, sizes etc), JavaScript or JS (this is the clever bit that makes the magic work) and other resources like your images, videos and animations. Each image is a server request, each CSS style is a server request and so on.

Try to aim for under 50 if you can for efficiency. Longer pages and bigger sites are going to have a problem here which is where efficient caching is going to help. Object Cache and Browser Cache will save those images/elements for a set duration which will speed up the load time of your web page the next time someone visits but you may still want to think about taking out unnecessary images or images from backgrounds.

Pingdom also provide a table of requests below the initial analysis. Requests by content type shows you how many images you have on the page, font files and scripts. Efficient caching can combine your CSS and JavaScript (marked as Script) files to reduce the amount of requests, you can also combine your html files using caching.

Requests by domain shows you which items are being requested from where. For example the domain of your website should be at the top of this list as you are probably hosting things like your images within your website. Typekits from Adobe will be listed if you’re using any custom fonts, as will any Google fonts. Other resources such as video will be listed from sources like YouTube/Vimeo and any chat functions you may be running or Instagram feeds.

Back to the Core Web Vitals for a moment and one of the headings is Total Blocking Time and it is a big part of Google’s score. This stat is effected by requests for third party links like pulling in videos from YouTube/Vimeo. As the files are stored elsewhere it can take time to find them and pull them into your page which may then “block” the loading of the rest of your page, hence Total Blocking Time. Third Party links such as video will be effected by how big (or how long) the video file is so factor this in when you’re designing your site.

You can further optimise your site by deferring the loading of things like Google Fonts (again a Third Party resource which will contribute to Total Blocking Time) but you ideally should also think about reducing those custom typefaces.

Basically you want to reduce the amount of external resources you have on your site as these result in more requests. You’ll also see a warning about something called “Add Expires Headers”. This is data for those links/resources which your web browser is sent so it knows when to request the latest version, or when the resource expires. When you set an expires header for a resource your web browser will store those resources in its cache to improve the loading time of the page. If your browser can’t find the expires header it will continue to find and download that resource which is inefficient.

Page Load Time

Load Time is then what it says on the tin. How long, in seconds, does it take to load the page. In the real World this stat is effected by a number of things. Your own internet connection is one, if you have a slow connection of course it’s going to take longer. If you’re on a phone with 3G a web page will seem to take forever versus a phone with a 4G or 5G connection.

The Load Time Pingdom calculates is from their own servers and you can set the location. To begin with use a location to test from that is in the same country as the server your website is located in. If your customers are in the same country that will give you a better idea and there’s no point worrying too much if your site doesn’t load for people on the other side of the planet.

Stepping back to the Core Web Vitals again and the heading Largest Contentful Paint (another of the biggest factors in Google’s score). LCP can be used to determine when the main content of your web page has finished rendering (loading) on the screen. So it’s effectively linked to Page Load Time and also brought down by the Total Block Time as everything needs to have loaded on the page.

The main things that Load Time is effected by are the previous stats, Page Size and Requests, but a slow Load Time is also down to how good your web server is. Don’t expect a great response from a server you pay £10 a year for.

Think professional and at look at the stats when picking out a hosting service. Shared cloud hosting can be cost effective and very efficient these days with a good hosting package starting out at around £50 per year. If you run a business site then we would recommend some of the larger hosting packages from Krystal Hosting (which are all UK based and 100% powered by Green Energy!) and their Onyx service is second to none if you’re using WordPress.

Conclusions

Effective web design is all about a trade off between Google, loading speeds, user experience, technology and hardware. You need the right eye and design to capture the interest of your web visitors but and understanding of how the web works is also essential.

Find out more by taking a look through our Useful Tools section which has links to a lot of the resources mentioned such as Imagify, Elementor and Krystal Hosting.

More on similar topics...

Mobile First Indexing

Mobile First Indexing

As mobile usage continues to surge it is changing the way Google is indexing websites and ranking search engine results. They are shifting focus to

Read More