Core Web Vitals & Google PageSpeed Insights

Core Web Vitals and Google PageSpeed Insights are nothing new when it comes to Google & SEO… However, they’ve become a major focus for most SEO companies since the rollout of Google’s Page Experience update earlier this month.

So for the newbies out there, what are they…?

Google PageSpeed Insights

Google PageSpeed Insights is a free tool provided by Google which allows you to report on how fast or slow your website load time is. They use two tools to measure the load time of your website and provide you with a score using a variety of metrics –

Lighthouse – A tool built-in to Chrome which measures some of the elements.
CRUX – A Chrome user experience report, whereby people using Chrome send field data back to Google.

If you haven’t done so already, try entering your website URL here and check your score on both Desktop and Mobile. But before you do so, take a seat – chances are that your score is low, particularly on mobile. Don’t worry too much – this is typical.

I hear you saying “my website loads quickly on my new smartphone…” Google is actually trying to test how your website will perform using old smart phone and browser technology, with the end goal to ensure that your website will load quickly on just about any device or desktop browser.

Core Web Vitals

Core Web Vitals are one aspect of Google’s Page Experience metrics which can be measured using Google Search Console. They primarily focus on the load time / speed of your website and are measured by 6 main factors:

FCP – First Contentful Paint
LCP – Largest Contentful Paint
TTI – Time to Interactive
TBT – Total Blocking Time or FID – First Input Delay
CLS – Cumulative Layout Shift
Speed Index – SI

What the? Yes I know… As usual, Google has made something that should be relatively simple extremely difficult. Why oh why can’t they just measure how long it takes for your pages to load and provide a score out of 100?

In a nutshell, they are saying that sites should load in less than 3 seconds, although they’ve broken it down into what should load, how it should load, and how will you experience the site on a mobile vs. a desktop?

Fear not, here you will find a detailed break-down of each factor so you can make sure all of your website URL’s have a green tick.

FCP – First Contentful Paint

Importance: 15%

Contentful? What the? If you haven’t heard this term before it’s because it was made up by Google. The FCP is essentially the how long it takes for the first image or text to load on your screen. Paint refers to something being rendered on the screen, so if you see a blank screen for several seconds when you visit a website, it is going to receive a low FCP score.

Tips to Improve FCP

There are two relatively easy things you can do to improve your FCP score:

Make sure your website is hosted on a fast “dedicated” server. Many sites these days are on cheap “shared” hosting platforms and no matter what you do, your site will never load quickly.
Install a caching plugin on your website like Nitropack. Caching essentially stores and loads a version of your website on a local server allowing it to load much faster. Just remember to “purge the cache” whenever you make any major changes to the website, which will update the cached version of your website.

LCP – Largest Contentful Paint

Importance: 25%

It seems that some people confuse this with “Last Contentful Paint”… Instead, Google is measuring how long it takes to load the “largest” item on your web page.

This will typically be a large image, video or slideshow animation, and you need to consider not only how large the asset is, but also where it is positioned on the page. In other words, if you have a large asset located at the bottom of your home page, Google is measuring the time it takes to start loading plus the time it takes to load.

Tips to Improve LCP

Fortunately, this factor is easier to fix:

Reduce the size of your largest assets. If you’re using an animated slideshow at the top of your home page with JavaScript and several slides, consider converting this to a single static image that is less than 1500 pixels wide and 200KB. Similarly, rather than embedding a video on your page, try using a button that loads that video once the button is clicked.
Secondly, try moving your largest assets to the top of the page so they load much quicker.

TTI – Time to Interactive

Importance: 15%

As the name suggests, the TTI refers to how long it takes before your website can be interacted with. Here, Google is typically looking at the interactive parts of your website like JavaScript or JQuery. For newbies, these scripts typically make things move, flash or animate on your web page.

Tips to Improve TTI

Here are some of the actions you can take to increase your TTI score:

Remove unnecessary JavaScript and JQuery on your website. Do you really need that section to be animated or move across the screen? It many cases these elements actually annoy people and just increase your load time.
Remove external resources like Instagram or Facebook feeds that load information from a third party resource.

TBT – Total Blocking Time or FID – First Input Delay

Importance: 25%

This one is not straight forward… The TBT is basically the time it takes for items to block your scripts and execute, which should be less than 15 milliseconds.

People often get confused here because Google Search Console does not refer to this as TBT, instead they call it FID (First Input Delay) and it’s the equivalent in Google PageSpeed Insights is TBT (Total Blocking Time).

In a nutshell, it would appear that Google is measuring how long it takes from someone to first interact with your website.

Tips to Improve TBT

Make sure that your JavaScript and CSS files are minified and not written in-line.

CLS – Cumulative Layout Shift

Importance: 5%

I’m sure we’ve all visited a website before and noticed that some smaller assets load towards the bottom of the page, then as larger assets load towards the top, we see the smaller assets move down the page to make space for the new items. This is something that Google frowns upon, and while it only accounts for 5% of the score, it can be tricky to fix.

Google is measuring both the “amount” of shift and the “impact” of the shift. Google gives your website a score up to 2, and you want to aim for less than 0.25.

Tips to Improve CLS

Make sure your website does not rely on JavaScript to render the layout dynamically and once your page loads it sticks that layout or grid. JavaScript galleries and navigation menus on mobile devices are two common areas that need to be adjusted on your website.

Speed Index (SI)

Importance: 15%

Speed Index basically measures how long it takes for your entire website page to load / render. It actually includes a VERY complicated algorithm, although in simple terms – If you fix all other metrics you will fix your Speed Index.

Tips to Improve SI

Work on each of the metrics listed above.

Where To From Here?

Well done if you’re still with us… This can be overwhelming for most website owners and even some website developers. Fear not… Our team have fixed the Core Web Vitals and load time of many websites and we’ve got it down to a fine art. Contact us today so we can review your current metrics and provide a no fuss solution on how to make your website load in no time.

Core Web Vitals & Google PageSpeed Insights – All You Need to Know