When testing your website’s page speed, you will find that there are many free online options to choose from. Depending on where you go to test your website’s page speed, it will be tested on different but similar criteria. Additionally, different platforms will use differing terminology on how they display your page speed results. However, they all boil down to similar components when testing for speed, therefore, it is best not to get caught up in the differing terminologies and just try stick to using a consistent speed test. Absolute Websites uses PageSpeed Insights, which is a Google platform, therefore, for higher speeds according to Google and to better your SEO for Google, this is a good test to use.
Monitoring your website’s page speed is important for tracking changes to your website, to monitor updates, to see where and how you can improve and to assess how your users experience your website, will they be able to access pages quickly? Where can you improve your page speed? How can you improve your page speed? This article will refer to Google’s PageSpeed Insights website speed test and we will explain how you can understand your website’s page speed, using Google’s website speed test.
PageSpeed Insights Breakdown
Google’s speed test scores your website page on both desktop speed and mobile speed, due to the different users on each device and how your website is developed, it is necessary to have separate speed scores for the aforementioned devices. Your user’s experience is device-dependent; therefore, Google provides two separate speed scores. The results on each device are broken down into four core areas:
- Speed Metrics
- Key Opportunities
- Passed Audits
Notably, PageSpeed Insights speed score is based on a greater test that is run by Lighthouse, which is another Google tool that encompasses more than just your website’s page speed.
1. Speed Metrics
Google’s PageSpeed Insights website speed test uses 6 key speed metrics to display the results of your website’s page speed, all the results are displayed in seconds, or milliseconds and the metrics use a visual scoring aid of green (fast), orange (moderate) and red (slow), the speed metrics used are as follows:
- First Contentful Paint (FCP)
- Speed Index
- Largest Contentful Paint (LCP)
- Time to Interactive (TTI)
- Total Blocking Time (TBT)
- Cumulative Layout Shift (CLS)
Your website’s performance score is directly calculated from the above speed metrics, you can check out Google’s performance calculator here, which outlines the weight each metric has on your overall page speed and shows how your metrics fare in the calculator. You can also switch the calculator to assess either desktop page speed or mobile page speed.
First Contentful Paint (FCP)
Simply, your FCP provides the time it takes to paint the first text or image on your page. After a user navigates to your page the FCP will measure how long it takes the browser to render (load) your content, image or text, technically known as, your Document Object Model (DOM) content. Your FCP time is scored in 3 categories:
- 0-2 Seconds / Green Colour Code / FCP Score of 75-100
- 2-4 Seconds / Orange Colour Code / FCP Score of 50-74
- Over 4 Seconds / Red Colour Code / FCP Score of 0-49
For example, if your website’s FCP is 1.5 seconds, then your FCP score would be 99.
How to Improve your FCP?
One key factor that can slow down your First Contentful Paint is your website’s fonts. Most likely, your website will be using some sort of custom font, therefore, this will need to load, however, you need to ensure that your text remains visible during webfont load by adding font-display:swap; to your custom font, which will replace it with a standard web font during the load process. This is one key factor to improve your FCP and, therefore, improve your website’s speed.
The Speed Index, different to FCP, shows how quickly the contents of your webpage are populated during the page load. The Speed Index metric uses a video to capture your page loading in the browser and displays a visual progression of frames. This allows PageSpeed Insights to break down the time (in seconds) it takes for your contents to be visually displayed. Your Page Speed index is scored in the following categories:
- 0-4.3 Seconds / Green Colour Code / Speed Index Score of 75-100
- 4.4-5.8 Seconds / Orange Colour Code / Speed Index Score of 50-74
- Over 5.8 Seconds / Red Colour Code / Speed Index Score of 0-49
How to Improve your Page Speed Index?
Largest Contentful Paint (LCP)
In a nutshell, your LCP provides the time at which the largest image or text is painted. Your LCP score dictates when the largest content element is rendered to the user’s screen. This metric is one that can be quite different on mobile, compared to desktop, due to developers and designers not properly resizing images for mobile devices. Your Largest Contentful Paint score is interpreted by:
- 0-2.5 Seconds / Green Colour Code
- 2.5-4 Seconds / Orange Colour Code
- Over 4 Seconds / Red Colour Code
Elements considered by LCP are images, videos, image elements within an SVG, background images and block-level elements that contain text nodes.
How to Improve your LCP Score?
Your Largest Contentful Paint score is mainly affected by the following factors:
- Slow server response times,
- Resource load times,
- Client-side rendering.
Therefore, by improving any of the above, you should see improvement in your LCP score. You can find out more information about LCP by checking out Google’s documentation here.
Time to Interactive (TTI)
Your website’s Time to Interactive score highlights the amount of time (in seconds) it takes your page to become fully interactive. This metric is often an important one because websites may be optimised to show content as quick as possible, but at the expense of interactivity, which can cause frustration and negatively affect your user experience. Therefore, TTI measures how long it takes your webpage to become fully interactive, by fully interactive Google means that:
- Your page displays useful content,
- Event handlers are registered,
- Your page responds to user interactions (thus it is interactive) within 50 milliseconds.
Your TTI score is categorised as:
- 0-3.8 Seconds / Green Colour Code
- 3.9-7.3 Seconds / Orange Colour Code
- Over 7.3 Seconds / Red Colour Code
How to Improve your TTI Score?
Total Blocking Time (TBT)
Your TBT score is measured by using your FCP and TTI, it is the sum of all time periods between your FCP and TTI, when task lengths exceed the 50ms mark (this metric is scored in milliseconds). Your Total Blocking Time uses the interactivity of your users, measuring the amount of time that a page is blocked from responding to user input (ie. clicks, taps, keyboard input). This sum is calculated by adding the blocking portion of all long tasks between the FCP and TTI. You can break it down as such:
- Your page loads (FCP),
- Time before the page is interactive (Your TBT),
- Your webpage is now interactive (TTI).
Your TBT takes the second step, adding together all the blocking time of all the long tasks before your web page is interactive. The TBT score is categorised as the following:
- 0-300 Milliseconds / Green Colour Code
- 300-600 Milliseconds / Orange Colour Code
- Over 600 Milliseconds / Red Colour Code
How to Improve your Total Blocking Time Score?
Cumulative Layout Shift (CLS)
Your CLS measures the movement of visible elements within the device’s viewport. The CLS refers to when texts or images move, which can be particularly annoying when you are reading an article or placing an order and something moves that changes your outcome and you end up somewhere you did not intend to be.
The unexpected movement of elements can occur because resources are loaded asynchronously or if DOM elements (text/images) are dynamically added above current and existing content or if a website uses third-party ads that interfere. It is important to monitor your CLS to make sure your users have a good experience on your website and that they are not ‘bugged’ by unwanted interference.
For a good CLS score, you want your website to score less than 0.1 seconds, anything between 0.1 seconds and 0.25 seconds would provide a moderate score and a CLS time above 0.25 seconds would result in a slow score. Your CLS score is often versatile dependent on devices, so you should expect different results on mobiles devices in comparison to a desktop.
How to Improve your CLS Score?
When developing websites, there are a few rules and guidelines you can follow that can make sure you avoid an unexpected layout shift.
- Always include size attributes on your image and video elements (or by reserving enough required space) you can ensure that the browser will allocate the correct amount of space when loading the elements.
- Unless a user is interacting with your website, never insert content above existing content, this will ensure a better user experience (UX) and reduce your CLS time.
- Stick to transform animations (if you are using animations) of properties as opposed to anything that can trigger layout shifts and changes.
2. Key Opportunities
In your page speed results, Google outlines a series of opportunities that can guide you to increasing your performance scores. Each opportunity is provided with an estimated savings time (ie. 0.2seconds), a breakdown of where you can save time (ie. on what files and how much time you can save per file) and the opportunities provide more insights into how you can improve your issues. The opportunities feature is an important component of Google’s speed test and acts as an indicator for users to increase their scores and retest their webpages.
The diagnostics section of your website’s speed report provides additional information over the performance of your website. Although the highlighted features do not directly affect your website’s performance score, they can have an impact on your scoring. It is good practice to acknowledge the issues highlighted in the diagnostics section, however, it does not need to be heavily focussed on in comparison to opportunities. Additionally, by fixing issues outlined in your opportunities, you can expect to see positive changes in your diagnostics.
4. Passed Audits
Finally, the PageSpeed Insights report outlines all the audits that your website has passed. This can give you an overview of what you are doing correctly and, if you make changes, you can expect to see more passed audits, this can act as an indicator that you are increasing your website’s speed performance. All the audits that you have passed will also be colour coded using green, indicating that your website meets and passes those factors.
Concluding your Understanding of a Website’s Page Speed
As previously mentioned, there are a series of different tests you can perform that will check your website for different metrics and relay results with different gradings, from alphabetical, to numerical and more. However, all website speed tests do follow suit of key areas that should be acknowledged. This comprehensive article that dives deep into understanding your website’s speed, using Google’s PageSpeed Insights, can help you monitor your website and, importantly, help you to understand your website’s speed performance scores. Next time you see terminology such as FCP, TTI, CLS or more, we hope this article will provide you with the tools to understand your website’s speed reports. If you are interested in providing better webpage speeds for your users, you can contact us directly at email@example.com.