How to score 100% on Google Pagespeed Insights

Posted July 26, 2021 by Lee

In the digital world, your company’s online presence is an essential part of your success. In fact, a strong web presence could be the difference between your business sticking around for the next 10+ years or fading into obscurity.
The SERP ranking factor of your site and the overall user experience are all part of performance best practices which will help boost your businesses visibility in search results.

Furthermore, the COVID-19 pandemic means that more people than ever have been relying on their online business to keep their business afloat.

However, web design and development isn’t always easy or straightforward – especially if you have little online experience beforehand. Thankfully, there are various tools put in place to help make the process a little easier – ensuring that your website functions appropriately and stands out from the crowd. This includes software such as Google Pagespeed Insights.

What is Google Pagespeed Insights?

Google Pagespeed Insights is a completely free tool provided by the search engine giant that can be used to measure the performance of your website based on the speed at which it works or functions. For example, it assesses the speed at which different components of your web page – from images to text load. 

This provides great insights into potential site improvements benefiting your users including increasing page speed across web pages and increasing site speed through lab data on time to first bite. All of these insights will help you increase your overall page speed and cut down your bounce rates!

Using the pagespeed insights tool is pretty straightforward – you simply need to copy your website’s URL into the search engine. The pagespeed insights report considers both desktop and mobile devices, so when considering your score ensure the correct on is selected.

The software will test your website’s performance and give your site a score out of 100. These scores give a rough outline of the status of your web pages or their page speed. The scores are divided into three sections:

Bad (Red) 0-49

Average (Amber/Orange) 50-89

Good (Green) 90-100.

In addition to letting you know which aspects of your site work well, it will also let you know what steps you can take to improve it. There is a separate software that tests the speed of your website when the user is viewing the site via mobile.

Why does my Google Pagespeed Insights score matter?

Your Google Pagespeed Insight is important as it relates to the way in which your customers will experience your website – and whether or not they stick around or choose to look for their content elsewhere.  For example, customers value immediacy – they are often too busy to wait around while a website struggles to load. Their perception of your company will improve if you enable them to view your content as quickly as possible – especially if they are in a rush.  It also makes your content more accessible.

From a technical standpoint, your Google Pagespeed Insights ranking can also affect your online ranking and SEO – or the frequency at which you appear in searches. As a result, companies with a poor score will struggle to gain any positive engagement or to obtain new customers/viewers. The faster your website, the more search engines will boost your site, and the more your company will grow as a result.

How can I score 100% on Google Pagespeed Insights?

Thankfully, there are various steps that you can take to improve your Google Pagespeed Insights – and this guide will help you get a 100% in no time at all!

Focus on your images.

Sometimes, the images featured on your site will affect the speed at which your site runs – and therefore impact your Google Pagespeed Insight score. However, this does not mean that you have to remove all of the pictures from your website in favour of a text-based design; you can fix this issue by:

Sizing images correctly. If you do not size your images appropriately, they may take a lot longer to appear on-screen than is strictly necessary. There are plenty of guides online that talk you through what size is right for what part of your webpage. However, as a general rule, images on your initial landing page should be around 100 x 100 px, whereas product images on sales-driven pages only need to be around 400 x 400 px.

Using the right formats for your image. You are probably used to saving and downloading images using JPG and PNG formats – however, there are various newer image formats that you can use to improve your Pagespeeds Score. This includes JPEG 2000 and JPEG XR. There are plenty of sites online that allow you to convert your images into these formats completely free of charge – though be sure to ensure that the quality remains intact when doing so.

Deferring offscreen images. Offscreen images refer to the images that may be featured on a page of your website but are not immediately visible until the user scrolls down and comes across them. For example, a sales page for a clothing website may feature upwards of 50 images per page.
Which, as you can imagine, could have a negative effect on the speed at which your web page loads. By deferring the speed at which they load – you are improving your Pagespeed score as the user does not have to wait for 100s of images to load before they can begin browsing through your content. You’re also making it easier for potential customers to access your content, which increases the chances of them making a purchase significantly.

Being smart when using GIFS. Gifs are a great way to add an extra something special to your website, but they could be negatively impacting your loading speed. One way in which you can combat this issue is by saving and uploading them in a video format, as opposed to a gif file. This won’t change the nature of the content, just the way in which browsers approach it.

Take a closer look at your Render-blocking Resources.

Render blocking resources come in many different formats – though you’ll typically encounter them most commonly in the form of CSS and JavaScript files when discussing website development. However, while they help your website look its best – they can also negatively impact your Google Pagespeed Insights.
This is due to the fact that whenever a browser encounters a render-blocking resource, it will immediately stop downloading other resources until it has been processed. This could add several seconds to your loading time – and while this may not seem significant, your site will begin to drop in the ranks. Thankfully, you can reduce the impact that render-blocking resources have on your site by:

Inlining your render-blocking resources. Essentially, this step means that you incorporate your CSS or JavaScript files into your HTML. This step usually only works if you do not have too many files present – as it makes it easier to combine the files.
If you have a lot of inline javascript this option may not be suitable as it increases the number of http requests potentially increasing load-times. This could actually reduce your Pagespeed insights score due to decreased site speed.

Deferring your JavaScript. Deferring your JavaScript means that it will not stand in the way of a website’s loading time. This functions in the same way in which you defer offscreen images.

Removing unnecessary files/render block resources. Pay close attention to your website – and see if any of your codes are not actually useful to the way in which it looks or functions. For example, a code that was once useful may no longer be fit for purchases to software changes. If they are unnecessary – do not let them take up space or negatively impact your Google Pagespeed Insights – simply remove them.

Minify your HTML.

If the above phrase does not make much sense to you – don’t worry. The language used to describe coding can sometimes be a little harder to grasp. However, this step is rather straightforward.
Minimising refers to a process where you minimise code, markup and white space featured on your website in order to reduce loading times. It can also reduce bandwidth usage.

Use Browser Caching.

Browser caching is a system that allows you to create a ‘static’ version of your site so that it does not have to reload the content each time a user visits. To put it simply, it helps browsers remember or recall resources – such as images, footers, headers and text,  that they have displayed previously. This saves time when the website is loading.

Cut down on redirects.

A redirect allows you to send users (and search engines) to a different URL than their original selection. For example, a redirect could take customers from your landing page to your sales page. However, multiple redirects can slow down your loading speed – and, therefore, negatively impact your Google Pagespeed Insights score once again. Cutting down on the number of redirects featured within your site is an easy way to solve this problem.

Don’t panic.

If your Google Pagespeed Insight score is lower than you’d like – it is important that you do not panic and try to implement hundreds of changes all at once. While this could heighten your score, it could negatively impact the way in which the viewer interacts with your website.
Instead, try to keep it natural – take your time to work through the advice listed above, or that advice provided to you by Google Pagespeed Insights itself. Furthermore, you should focus on creating a quality website – that not only serves its purpose but utilises new technologies in order to function appropriately (and quickly).

If you aren’t sure where to get started with this or want to find out more about the importance of high-speed website design, look into fast and reliable UK web hosting services.

Categories: Web Design