Improve your website's performance and score 100 on Google PageSpeed Insights
Roughly a 7 minute read by Jamie Wright
Pinpointing speed bottlenecks is the first step you should be taking when trying to improve the performance of your website.
Fortunately, Google provides a handy tool called PageSpeed Insight which will measure the performance of a page on both desktop and mobile and generate a report of the findings. The report comes in the form of a performance score, alongside suggestions or “opportunities” on how you could potentially improve it.
Performance scores: Putting them into context
At the top of the report, PageSpeed Insights will present you with an overall score for the page’s performance. Google classifies a score of 0–49 as “slow”, 50–89 as “average” and 90–100 as “good”.
Before you panic, what Google considers to be an “average” score might actually be a “good” score for you; not all websites have the same purpose. A “brochure” website needs to impress and can be forgiven for having extra ‘gloss’, but if your website needs to sell then getting your pages loading as fast as possible should still be your primary focus.
“53% of users abandoned a mobile site if it took more than 3 seconds to load.”
According to research by Google
It’s also important to mention that not all the suggestions from the report will be feasible. Significant investment can be required with only minimal reward in terms of score change, but more on that later.
If your page has scored below 80 there will definitely be some worthwhile improvements you can make, but keep in mind how quantifiable the effects of these changes will be to your audience before you dedicate time and money to them.
Analysing the data
After your score is calculated you are then presented with six top-level performance metrics under the title of ‘Lab data’. Let’s run though each of these metrics:
- First Contentful Paint
This is the time when the first text or image is painted (visible). See screenshot. - First Meaningful Paint
Similar to the above but this measures when the main content elements of your page are visible. - Speed Index
Speed Index shows how quickly the contents of a page are visibly populated. - First CPU Idle
This is the first point in time when the page has loaded enough for you to be able to use inputs / interact with the page. - Time to interactive
This is the amount of time it takes for the page to become fully interactive - Max Potential First Input Delay
The maximum potential First Input Delay that your users could experience is the duration, in milliseconds, of the longest task.
Assess your opportunities
The next section of the report shows the results of various performance tests. These will pass or fail. All failures are presented to you first, in a list of “opportunities” as per the screenshot below:
The tests your website has passed then appear in a collapsed list of “passed audits”. There will still be things that you can improve here, but in Google’s eyes they’re not having a significant enough impact on your users to be considered negatives.
Looking at the screenshot below you can see that the test for ‘Eliminating render-blocking resources” has passed but there is still a potential saving to be made.
We’re here to help
Anyone can use PageSpeed Insights and learn about the performance of their website from it, but remember it’s a ‘developer tool’ so it’s easy to get confused in the jargon or misinterpret the importance of the results.
We collate this information into an actionable document, outlining costs, the effort involved and benefit of completing each point, specifically for your website.
A higher score is better, but it’s all about your users, not your score. Some improvements may not be worthwhile based on the needs of your users.
Make sure you know your users
An example of putting a recommendation into the context of your audience would be using the .webp format for your images (over .jpg and .png). For those unfamiliar with this, it’s a relatively new image format that will bring the file size of your images right down whilst maintaining the quality of the original file.
Whilst this will improve performance for some users, the format’s lack of support in some browsers will mean a subsection of users wouldn’t see these images, the knock-on effect being that you then also need to provide a fallback.
Another handy online tool caniuse.com lets you see the web browser compatibility support of all html/css/js features. See the below screenshot of compatibility for .webp:
Knowing that 4 out of the 6 most popular browser supports .webp can help inform any decision you decide to make, but you can also import your website’s Google Analytics data to see which browsers your users are viewing your website on. From the screenshot below you can see that a huge majority of users are using 2 versions of Google Chrome while the browsers that don’t support .webp is negligible.
If the majority of users arriving on your website are using Safari then they’ll not see any speed benefits from the new image format. Your score will increase on PageSpeed Insights but the tangible benefit to the majority of your users would be negligible.
Score 100
If you want to score 100 then you’re going to need to go through every fail and opportunity systematically. Every performance improvement will have a positive effect, but as I’ve said previously; decide how valuable each opportunity is to your website, and your users.
Page speed audits
Below you can view a real world example of a page speed audit that we collated for an e-commerce client. They came to Engage with a Wordpress site and were wanting to improve the site’s performance.
Whilst I have censored any references to the client, products, and costs I still believe it’s a resource worth sharing so that you can see a real example of putting scores into perspective and focusing on what you can do in real terms to improve the performance of your website.
Performance review – Page speed audit (example)
Drop us a line
If you’re interested in working with us and we can improve the performance of your website together.