Google site speed tool

Understand the ranking metrics used by Google Site Speed tool, to make your site faster and tastier to google.

This is an overview of a great conversation between Kate Toon and Peter Makinkovic, on Kate’s Recipe for SEO Success podcast. Hear the full discussion here:

Why is site speed important?

In May 2021 Google will deliver another major algorithm update. Prioritising page experience, it has been announced that speed will be an important element of this change. Speed has a large impact on page experience – both from your customers point of view (who wants to wait around for a page to load as though it’s 1994?) and from google indexing – the longer it takes for google bots to index your site, the lower your rating will be.

The Google site speed tool is a tough nut to crack. You can run the same site through other tools such as GT Metrix and Pingdom and get a far kinder score for your site’s performance, but, using the tools Google provides is SEO best practice. The first step, though, is knowing how to balance all of the metrics involved in Googles site speed tool – which are mission critical and which can be treated a little more lightly.

It’s good to keep in mind that Google’s bar is set very high. Your site is ranked as though it’s operating through the least powerful device, so don’t be surprised that an initial score may be really low. It is declaring that they expect your site to deliver a fast experience for the least powerful devices.

It is the most accurate of site speed tools, however.

Understanding what the metrics means can help you balance your site speed, or at least have a conversation with your developer and know a little about the changes they will advise be made. The tools metrics are measured by 6 main items:

1. FCP: First Contentful paint – the time when the first image of graphic appears. 15% of score 

If you have a large file (home page sliders anyone?) or jquery element, this tells google you’re prioritising this design element over user experience and the users valuable time. Think about the first thing that will load for users, and make this as small as possible. Caching can help here – if the item that is first to load is a static element that can show through the site cache, it reduces the load on the server delivery

2. Speed index: SI. 15% of score.

This measures how long it takes to load your page, visually, from top to bottom. A combination of elements will assist this – reducing jqueries, reducing image size, load order. As you attend to the other elements in the tool, your SI will improve.

3. LCP: Largest Contentful Paint – 25 % of the score

This is the time taken for largest part of website to load – If you’ve got large images / large banners, large images make them as small as poss and theearliest to load. Removing that image, or the slider can have a big impact – small change can improve speed

4. TTI – time to interactive = how long until the page is fully rendered and useable. 15% of score

This measures what is taking longest to load, and what is causing any blockages. Are there 3rd party scripts that have to load information from an external site? complicated animated banners? social media feeds? or other feeds gathering content from elsewhere before loading on your site? This is often useful, bright, colourful and changing content, but its load is contingent on that other site and how well that pathway is operating.

If possible, keep this simple: reduce update times for loading social media feeds, keep these on footers that are global, so not loading for each page, or remove entirely.

5. TBT total blocking time = the time between First Contentful Paint and TTI and is measuring how much time it takes to get beyond the blocking.

6. First Input Delay : how long for someone to interact with site. this is measuring the first interaction, not total site load.

7. Cumulative layout shift. 5% of the total score: is there any visible movement of the page elements: eg, products shifting around as you navigate through page or site.

Ways to improve your ranking:

1. Eliminate Render Blocking Resources – remove whatever is stopping resources load on the page – remove images, scripts, whatever is stopping the page looking the way it is supposed to (blocking the way the page renders). It’s usually a big file that is getting in the way of smaller files what is slowing the page down. If you can’t remove it, you could set the file to load later.
   Eg, if there is JavaScript used in the checkout, set this to load later by giving it a special class.
2. Preload key requests – when google looks at assets, they fetch, download and add them to page in the order they’re written on site. So, place any important assets, eg the main header image – in header doc. this preloads asset to get loaded ahead of time.
   This is a delicate mechanism, however, and should be restricted to no more than 3 assets within the header.
3. Remove unused JS and CSS.
   Sometimes old plugins will leave unused JS or CSS, that may be set to load on every page – use a tool such as SiteBulb to crawl the site and identify unused JS and CSS, and other issues such as mixed content errors.
4. Use Next-gen formats for images: use WebP image files or run images through a parsing tool such as cloudinary. Or, use other tools such as smush to limit file size. Always optimise and alt tag imges prior to uploading to any site.
5. Minify CSS: compress and remove duplication of code.
6. Reduce impact of 3rd party code: Youtube and tracking elements such as google analytics impact TTI and TTP. Choose a lightweight version of YouTube embeds by adding a link to an image that represents your youtube video, rather than embedding it.
7. Mimise main thread work: if your site has multiple js files and libraries – jquery etc – this creates a chain of dependencies, as one relies on another to work first before loading. This can cause a very complex dependency network, making execution slow on-site.
   A simple example of this is if the products in your site have many layers of categories, so the products your loading are contingent on parent categories first, this weighs down load time. Google favours a fast ecommerce site. Time is money.
8. Serve static assets:
   When an asset is being accessed by browser, there is code in header telling browser to keep something for (eg) 3 days. Setting this duration for far longer, for assets that you know will rarely if ever change, saves server fetching time.
9. Avoid excessive DOM size: also know as, keep your web page small. Do this by keeping the markup as clean as possible – don’t use numerous divs or a theme that has massive intorduced code, such as X Theme (blergh!). In an ecommerce site, keep your prodcuts as simple in their document tree as possibe, don’t excessively nest them within other categories.
10. Avoid changing critical requests – Keep dependencies as low as possible. Not dissimilar to #7 – if you need jquery to load a library, in order to lad another element on the page, this dependency slows things down – don’t float your page elements in a sea of dependencies or, simply, don’t add another plugin with all of the environment this brings with it, just to make something look cute.
11. Avoid main thread tasks: Similar to #10, Google is reminding us here, not to use non-critical JS to load interactions – eg a theme has these by default, so keep extraneous elements out. Anything not use in main js thread adds to page execution time.

Hosting:

Hosting has a large impact on site speed – use the best hosting you can. Cheap shared hosting has impacts for security AND for site load speed. Love communications prefers to use WPEngine specialist wordpress hosting, which has site speed and security at its core.

Tools for site speed:

Using a CDN also helps with site speed. On a very simple level, a CDN keeps a static version of items that don’t change on your site. these are all instantly available, leaving your hosting server to load the non-static elements that give depth and interest to the site and your services. Cloudflare APO: automative platform optimisation makes WordPress very fast.

Reduce file size using Smush or another image optimiser. Use lazyload to manage the order of loading large files. Implement critical CSS to render only what is needed on page first – helps with FCP as it renders styling first before anything else.

Site speed will become more critical to the way Google preferences your site after May 2021, so be ready with a site that loads quickly, answers your customers queries, shows them the products and services they’re seeking instantly and easily.

Many thanks to Kate Toon for the wonderful podcast and to Peter Macinkovic for his simplified explanations and immense knowledge.

Listen to the full podcast here:

Love Communications specialises in site optimisation. Contact us if you’re serious about delivering the best site experience for your customers and getting some google loving while you’re at it.