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 to 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, monitoring updates, seeing where and how you can improve and assessing 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
- Diagnostics
- 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.
Speed Index
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 content 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?
Because the Speed Index is an assessment of speed itself, anything you do that improves your page load speed will improve your Speed Index score, however, you can focus on a series of specific diagnostics that will have an exceptionally big influence. You can minimise your main thread work, reduce JavaScript execution time and, the same as the improvement for FCP, you can ensure that your text remains visible during page load.
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,
- Render-blocking JavaScript (JS) and CSS files,
- 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 quickly 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?
JavaScript is typically the main culprit that slows down your Time to Interactive score, therefore, by removing or deferring unnecessary JavaScript you can increase your TTI score. There are many opportunities to optimise your JavaScript files, such as reducing payloads by code splitting and optimising third-party JavaScript (such as any analytics you have installed).
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?
Anything that delays your users to interact with your web page, after content has loaded, will affect your TBT score. Therefore, common problems are unnecessary JavaScript files or excessive JavaScript statements. By optimising your JavaScript and making it more efficient, you can expect to see a better TBT score. Improvements like your TTI score will also improve your Total Blocking Time.
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 and dependent on devices, so you should expect different results on mobile 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 increase your performance scores. Each opportunity is provided with an estimated savings time (ie. 0.2 seconds), 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 web pages.
3. Diagnostics
The diagnostics section of your website’s speed report provides additional information on 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 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. As a web development company, it is crucial to take the time to follow a webdev checklist and make sure that you have covered all necessary areas. If you are interested in providing better webpage speeds for your users, you can contact us directly at info@absolute-websites.com.
