Google’s Website Speed Test Cheat Sheet – How can you get High Scores?

If you are not already familiar with the importance of website speed, then here are 5 key reasons as to why it is necessary:

1. Search Engine Optimisation (SEO)
2. First impression on users
3. User expectations
4. User experience (UX)
5. Conversions

Google uses a great test, called the Google Lighthouse test, that analyses your website in 4 different categories:

1. Performance
2. Accessibility
3. Best Practices
4. SEO

This article will highlight why it is important to have a fast and high-performing website and provide invaluable insights into what you can do to increase your score on each of the 4 categories. Additionally, we will show you how you can test your website using the Google Lighthouse test, so you can work on improving your scores. Note that this test does not only test for speed but other factors such as best practices, accessibility for handicapped users and your SEO.

Why is it Important to have a Fast Website?

SEO

Google is constantly changing and updating its algorithm of how websites can rank on the first page and outperform competitor websites. A relatively new focus, especially for 2021, is the speed and performance of a website. Google will give better ranks to websites that provide a better UX by being fast and interactive to users for a better experience. If your website is still lagging behind competitors and showing slow scores you can lose your good positions on Google. Therefore, a fast website means you will have better SEO.

First Impressions

As the saying goes, “you only get one chance to make a first impression”, this strongly applies to your website, as a reflection of your company. If you provide your users with a slow-performing website, it can create frustrations and, most of the time, abandonment to a competitor’s website. Therefore, you must give your customers and potential customers a great first impression with a fast-loading website. Did you know that 79% of users said they would not return to a website if there was trouble with load speed?

User Expectations

Just like everything else in this world, people have higher expectations every year. Speed is of the essence, and this also applies to your company’s website. The world is moving quicker, faster and more efficiently than ever, therefore, if your website does not meet these standards, then users will be left with a bad experience.

User Experience (UX)

Your website’s UX is one of the most important factors to consider. It considers the whole experience that your user undergoes on your website. From the moment someone enters your website to the second they leave; you want to provide a great experience. Just like customer service in a restaurant, your website needs to provide a great experience, otherwise, you are unlikely to get return customers. There are a few ways to track, analyse and measure your website’s UX. You can check your analytics (assuming you have website analytics integrated), look for:

1. Bounce rate,
2. Page sessions,
3. Duration,
4. Page exits (if these pages have any issues),
5. Return users,

Conversions

On estimate, 40% of users are likely to abandon your website if it takes longer than 3 seconds to load. Therefore, if your website loads slowly, whether that may be e-commerce, B2B, informative or anything else, you are likely to lose out on a lot of potential conversions you may otherwise have. Companies such as Amazon have seen a major increase in conversions just by speeding up their website.

How to Score High on Google’s Speed Test?

We have analysed Google’s Lighthouse test and put together all the components that make up the test across all 4 categories. The following tips will help you increase your scores across each section and meet the ultimate objective of giving your users a better experience on your website.

You can also download our FREE Google Speed Test Cheat Sheet to have a direct copy of how to increase your website’s scores in performance, accessibility, best practices and SEO.

1. How to Improve the Performance Category on Google’s Speed Test?

The performance section is the most important category for improving your website’s speed and increasing your UX. This section can be further categorised into the following sections:

• Images
• Files
• Text
• 3^rd Party
• Hosting

Images

Images are one of the biggest killers for a slow-loading website, therefore, by having them fully optimised, you can be sure to increase your page speeds. Here are some things to follow:

• Defer off-screen images using Lazy Loading

When a user enters your website, they can only see a certain section of it. This means you do not have to load everything, every image across the entire page at once, you can load the images as the user scrolls to that particular area. By deferring off-screen images using Lazy Loading you make sure to only load images that your user can currently see on their screen.

• Small file sizes

Images look great on websites and are a necessity, however, you need to make sure the file sizes are not too big, which is what will slow down your webpage and cause a bad experience. I try to keep my images at a maximum size of 150kb-200kb, but most of the time below < 100kb to make sure they load fast. It is also important not to comprise the image quality.

• Next-gen image formatting

Next-gen images are images that use a newer format, these formats are JPEG 200, JPEG XR and WebP. They offer better compression than the standard PNG and JPEG images, which means they download faster and consume less data.

• Properly sized images

If your website uses an image in a small space, let’s say the space is 400px x 400px, then you should size your image to fit those dimensions, instead of using a huge image that would be overkill.

Files

Every website consists of multiple file types, such as CSS and JS, these files can be optimised to provide a quicker and higher-performing webpage. So, how can you optimise your website’s files?

• Minify CSS

This is the process of compressing your CSS files together to lighten the load and have a smaller file size. There are many free CSS file compressions online.

• Minify JS

This process is the same as the CSS minification, however, I recommend testing your website if you minify the JS files in case it causes any conflict or errors.

• Remove unwanted code

If you are using big plugins or standard programming frameworks such as Bootstrap and JQuery then you are likely to have a lot of excess code that your website does not actually need. You’ll need to comb through your website to remove any of the code that you do not need or use.

• Eliminate render-blocking resources

Any code you have that is not needed when a user loads the page can be deferred and loaded later, after your website page has loaded. The only code you need immediately is the code that is required to show the above-the-fold section, the section in the user’s view.

• Deliver small JS payloads

Instead of having massive files of JS, you can split them up into smaller files and use attributes such as ‘async’ and ‘defer’ to call those files when you need them.

Text

• Visible text on load

When your browser loads your website you want to make sure that your text is immediately visible. If you have custom fonts, such as Google fonts, then you can set a fallback font and swap the fonts while your custom font loads. By using a simple line of code “font-display:swap;” you can make sure that your webpage shows a standard web font while it loads your custom font.

• GZIP text compression

You can server text-based resourced with compression, by zipping them, this dramatically reduces the file size.

• Preload key requests

Key files, such as fonts, that you know need to be loaded immediately, can be prioritised and fetched quicker.

3^rd Party

• Minimise usage

Minimise the amount of 3^rd party scripts and files you have, these could be analytics and other frameworks.

• Defer/Async files

Make sure to attribute your 3^rd party files with either defer or async to call on them with priority order.

Hosting

• Server speed

Make sure you are using a server that is fast, most likely a VPS server, rather than shared hosting. Also, if you local to a single country, then it is better to have your website hosted in a server near that location.

• Runs HTTP/2

Some servers can run on the newly formed HTTP/2 which transfers resources a lot quicker than the traditional HTTP/1.1

• Avoid multiple redirects

Too many redirects will cause your pages to load slower.

Do you want a FREE Google Speed Test Cheat Sheet? Instantly download it here to get instant tips on improving your website’s scores.

2. How to Improve the Accessibility Category on Google’s Website Test?

Accessibility defines how accessible your website is for users that may have certain handicaps, it is incredibly important to make your website accessible to all users. Here are some things you can do to improve your website’s accessibility:

• Accessible button names

Label your buttons with relevant and descriptive text so users who use screen readers can understand what that button does and where it takes you. Instead of the default name ‘button’ which is unhelpful.

• Title elements

A title tag helps screen readers better define and understand your webpage. It also is used by Google to show relevant pages to users.

• Unique ARIA ID attributes

These attributes need to be unique to prevent other instances from being overlooked by assistive technologies.

• Structured headers in sequential order

Using the correct header tag structure helps users navigate efficiently through your page according to relevance, especially if they are using assistive technologies.

• Lang attribute on your HTML tag

Defining your webpage’s language helps screen readers understand the language, otherwise it will have to assume.

• ALT attributes on images

ALT text helps screen readers define images to the user, with short and descriptive text. If the image is purely decorative, the ALT tag attribute does not need to be filled.

• Discernible link names

Unique and descriptive link text provides a better navigation and experience of users using screen readers.

• Sufficient contrast ratios

You need to meet a certain standard of contrasting ratio, from the text on background colours and elements, in order for people to better read your webpage.

3. How to Improve the Best Practices Category on Google’s Website Test?

The best practices category on the Google website test provides indicators and guidelines that you should follow for the best practices of a website. They are as follows:

• Use HTTPS

Using HTTPS is a must these days as it prevents intruders from tampering with or listening to communications between your website and your users. It is especially important if your website holds sensitive data.

• Safe cross-origin destinations

When you have external or outgoing links to pages other than your domain, you need to include a tag, either “noopener” or “noreferrer” as they prevent vulnerabilities that come from the destination link.

• Correct image aspect ratios

Images should not be distorted by manually changing their widths and heights to different aspect ratios to their naturally uploaded sizes.

• Use DOCTYPE tag

This tag prevents the browser from automatically switching to quirks-mode.

• Define charset

This defines the character encoding and is required.

• No browser errors logged

Errors indicate unresolved issues with your website, therefore, it is best practice to resolve them in order to have a fully functional website.

Instantly download your FREE Google Website Test cheat sheet here.

4. How to Improve the SEO Category on Google’s Website Test?

Search engine optimisation (SEO) is, of course, extremely important and helps you to be found on the first pages of search engines such as Google. The Google test outlines some requirements that can increase your SEO rankings. These factors are:

• Viewport meta tag

This tag allows your website to be optimised for mobile.

• Title tag

Using a Title tag helps search engines determine what your page is about and when to show it to users depending on their searches.

• Descriptive link text

Descriptive link text allows search engines to better read and understand your links and content, therefore ranking it accordingly.

• Meta descriptions

These are also included in search engine results pages (SERP) to provide a brief description for users, summarising what your webpage is about.

• Crawlable links

This allows crawlers to find more pages on your website, helping more of it become discovered.

• Allow indexing

If you do not have permission for your website to be found, Google, Yahoo, Bing and all search engines will not be able to show them.

• Alt tags for images

This provides relevant text about the image and can help your images be found in image searches.

• Valid canonical tags

These suggest to search engines what URL should be found and shown in search results.

• Valid robot.txt file (if required)

This can be used to exclude certain files, therefore, if it is malformed, it can prevent crawlers from finding your website and your webpage will not be found.

• 301 redirects

All pages should be set with permanent redirects from HTTP to HTTPS for security reasons. 301 redirects are the permeant form of redirecting.

How can you Test your Website on Google’s Test?

You can run the Google Lighthouse test either as a browser extension that you download or by inspecting your website in Chrome DevTools.

If you choose the latter, you can:

1. Open Chrome on the website you wish to test.
2. Open the Chrome menu in the top right corner.
3. Select More Tools.
4. Select Developer Tools.

Another way to access it is via a shortcode:

1. Windows/Linux: Shift + CTRL + J
2. macOS: Option + ⌘ + J

Alternatively:

1. You can click F12

This will open up a new section and it will display a menu bar that shows:

1. Elements
2. Console
3. Sources
4. Lighthouse

You may need to click the right arrow to find the Lighthouse tab if it does not show.

You can download our Google Website Test Cheat Sheet to get all these tips and more and increase your website’s scores today!