Our guide to help you understand your website’s page speed

In-depth website speed optimization guide that demonstrates the significance of having a quick website. DIY instructions and tips for reducing load times.

Our guide to help you understand your website’s page speed

There are a number of free internet tools that can be used to assess your website's page speed. There are various ways to assess your website's page speed depending on where you go. To make matters more complicated, the terms they use to describe your page performance findings will vary from platform to platform. To avoid confusion, it is advisable to stay with a single, constant speed test rather than become bogged down in the many terms used to describe it. If you want to improve your SEO for Google, you should utilize EarlyPing's EP Score. EP Score grades your website's performance based on multiple factors and is based on Google's PageSpeed Insights.

This can help you identify where and how you can make improvements, as well as how fast your visitors are able to go through your website. Are they able to get to the pages they want? What can you do to speed up your website? What can you do to make your website load faster? This post will relate to Google's PageSpeed Insights website speed test, and we'll discuss how you may use Google's website speed test to better understand your site's page speed.

EarlyPing OpsCenter

IT monitoring that keeps your website online and helps you manage incidents seamlessly. Start for free. No CC required.

Start For Free

First, let's understand PageSpeed Insights

Because there are different people using each device and because your website is developed differently, it is necessary to have separate speed scores for the devices listed above. Google's speed test gives your website page a score on both the speed of desktop computers and the speed of mobile devices. Because your user's experience is depending on the device they are using, Google gives two different speed ratings. The findings for each platform may be categorised into the following four primary categories:

  1. Speed Metrics
  2. Key Opportunities
  3. Diagnostics
  4. Passed Audits

Notably, the speed score that you get from PageSpeed Insights is derived from a more comprehensive test that is carried out by Lighthouse, which is another Google service that evaluates more than just the page performance of your website.

1. Speed Metrics

Google's PageSpeed Insights website speed test uses six key speed metrics to display the results of your website's page speed; all of 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: Google's PageSpeed Insights website speed test uses six key speed metrics to display the results of your website's page speed; all of the results are displayed in

  1. First Contentful Paint (FCP)
  2. Speed Index
  3. Largest Contentful Paint (LCP)
  4. Time to Interactive (TTI)
  5. Total Blocking Time (TBT)
  6. Cumulative Layout Shift (CLS)

It is possible to determine your website's performance score directly from the speed measurements listed above. You may do so by visiting Google's performance calculator, which details the importance of each indicator to your total page speed and displays how your metrics perform in the calculator. You have the option of using the calculator to determine the page load time on either a desktop computer or a mobile device.

First Contentful Paint (FCP)

To put it more simply, your FCP will provide you with an estimate of the amount of time it will take to paint the first image or type the first text on your website. Whenever a user navigates to your website, the FCP will track the length of time it takes the browser to render (load) your content, which may be either an image or text and is known to as your Document Object Model (DOM) content in a fully formalised manner. It is possible to give your FCP time a rating in one of these three categories:

  1. 0-2 Seconds / Green Colour Code / FCP Score of 75-100
  2. 2-4 Seconds / Orange Colour Code / FCP Score of 50-74
  3. Over 4 Seconds / Red Colour Code / FCP Score of 0-49

Consider the following scenario: if your website's FCP is 1.5 seconds, your FCP score would be 99.

How to Improve your FCP?

The typefaces on your website are one important issue that might cause your First Contentful Paint to run slowly. You should take precautions to ensure that your text is readable even while the webfont is loading. One way to do this is to add the code font-display:swap; to your custom font. This will cause it to be swapped out for a standard web font while the webfont is loading. However, you should still take these precautions. This is one of the most important factors to consider when trying to enhance your FCP and, as a result, the speed of your website.

Speed Index

In contrast to the FCP, the Speed Index indicates how fast the contents of your webpage are loaded throughout the page load process of your website. The Speed Index measure makes use of a video to record how long it takes for your website to load in the browser and then presents the data as a sequence of still images. This enables PageSpeed Insights to provide a breakdown of the amount of time, in seconds, that it takes for the contents of your website to be presented graphically. Each of the following criteria contributes to your Page Speed index score:

  1. 0-4.3 Seconds / Green Colour Code / Speed Index Score of 75-100
  2. 4.4-5.8 Seconds / Orange Colour Code / Speed Index Score of 50-74
  3. Over 5.8 Seconds / Red Colour Code / Speed Index Score of 0-49
How to Improve your Page Speed Index?

You may concentrate on a number of particular diagnostics that will have an unusually strong affect, but, since the Speed Index is an evaluation of speed itself, everything you do that improves the speed at which your website loads will enhance your Speed Index score. You can minimise the work that is done on your main thread, limit the amount of time that is spent executing JavaScript, and, similarly to the enhancement made for FCP, you can make sure that your text is visible even while the page is loading.

Largest Contentful Paint (LCP)

In a nutshell, the period at which the picture or text that is the biggest is painted is indicated by your LCP. When the biggest content element is presented on the user's screen, your LCP score determines when this occurs. As a result of developers and designers not correctly scaling photos for mobile devices, this statistic is one that may be considerably different on mobile compared to desktop. This difference can be fairly significant. Your score for the Largest Contentful Paint is interpreted as follows:0-2.5 Seconds / Green Colour Code

  1. 2.5-4 Seconds / Orange Colour Code
  2. Over 4 Seconds / Red Colour Code

Images, movies, image components included inside an SVG, background images, and block-level elements that contain text nodes are the types of media that are taken into consideration by LCP.

How to Improve your LCP Score?

Your overall score in the Largest Contentful Paint challenge is mostly determined by the following considerations:

  1. Slow server response times,
  2. Render-blocking JavaScript (JS) and CSS files,
  3. Resource load times,
  4. Client-side rendering.

As a result, if you work to improve any of the aforementioned areas, you should notice an increase in your LCP score. If you go through the documentation that Google provides on this page, you will find out more information about LCP.

Time to Interactive (TTI)

The Time to Interactive score for your website provides an indication of the length of time, in seconds, that it takes for your page to become completely interactive. Because websites may be optimised to present material as quickly as possible, but at the price of interaction, which may create aggravation and adversely effect your user experience, this measure is typically a crucial one. Therefore, the TTI determines how long it takes for your website to become completely interactive, where fully interactive refers to the state in which the page may be fully interacted with. Google's meaning is as follows:

  1. Your page displays useful content,
  2. Event handlers are registered,
  3. Your page responds to user interactions (thus it is interactive) within 50 milliseconds.

Your TTI score is categorised as:

  1. 0-3.8 Seconds / Green Colour Code
  2. 3.9-7.3 Seconds / Orange Colour Code
  3. Over 7.3 Seconds / Red Colour Code
How to Improve your TTI Score?

Because JavaScript is often the primary factor that contributes to a decrease in your Time to Interactive score, you may improve your TTI score by eliminating or postponing any unneeded instances of JavaScript. Your JavaScript files may be optimised in a variety of ways, including decreasing payloads by code splitting and optimising third-party JavaScript. These are just two of the numerous possibilities (such as any analytics you have installed).

Total Blocking Time (TBT)

Your TBT score is calculated using your FCP and TTI; it is the total amount of time that elapses between your FCP and TTI for tasks whose durations are more than the threshold of 50 milliseconds (this metric is scored in milliseconds). The length of time that a page is prevented from reacting to user input is the amount that is measured by your Total Blocking Time. This time is determined by the interactivity of your users (ie. clicks, taps, keyboard input). This total is arrived at by adding up the blocking portions of all lengthy tasks that take place between the FCP and the TTI. You may summarise it by saying something like:

  1. Your page loads (FCP),
  2. Time before the page is interactive (Your TBT),
  3. Your webpage is now interactive (TTI).

Your TBT completes the second step by adding up all of the blocking time incurred by all of the lengthy processes that must be completed before your web page can be accessed. The TBT score is divided into the following categories:

  1. 0-300 Milliseconds / Green Colour Code
  2. 300-600 Milliseconds / Orange Colour Code
  3. Over 600 Milliseconds / Red Colour Code
How to Improve your Total Blocking Time Score?

After the information has loaded, your TBT score will be negatively impacted by anything that makes it more difficult for consumers to engage with your website. In order to avoid this, large JavaScript files or JavaScript statements are often seen as difficulties. You may anticipate to notice an improvement in your TBT score once you have optimised your JavaScript code and made it more efficient. Your Total Blocking Time will increase along with other aspects of your game that become better, such as your TTI score.

Cumulative Layout Shift (CLS)

Your CLS is responsible for calculating the distance travelled by visible items inside the viewport of the device. 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, this phenomenon is referred to as the Content Locking Symbol (CLS). This phenomenon can be particularly frustrating because it can cause you to end up in a different location than you intended.

The unexpected relocation of items may take place if resources are loaded asynchronously; if DOM elements (text and pictures) are dynamically inserted over current and existing content; or if a website utilises third-party advertisements that interfere with the user experience. It is essential to do regular monitoring of your CLS in order to guarantee that your users will have a positive experience when navigating your website and that they will not be bothered by any unwanted interruption.

Your website should have a CLS time that is less than 0.1 seconds if you want to get a good score from the CLS. A CLS time that is between 0.1 seconds and 0.25 seconds will result in a moderate score, and a CLS time that is more than 0.25 seconds will result in a sluggish score. Because your CLS score might change depending on the device you use, you should prepare yourself for varied outcomes while using a mobile device as opposed to a desktop computer.

How to Improve your CLS Score?

You may prevent an unexpected layout change while designing websites by following a few simple principles and recommendations that can be found here.

1. You can guarantee that the browser will allot the appropriate amount of space while loading the components if you always specify size attributes on your image and video elements (or if you reserve enough space to meet the needed specifications).

2. Never introduce material above existing information on your website, unless a user is engaging with your website to do so; this will provide a better user experience (UX) and decrease the amount of time you spend on CLS.

3. Stick to transform animations of properties rather than anything else that might cause layout shifts and alterations if you are going to use animations at all.

2. Key Opportunities

Google provides you with a list of options inside the findings of its analysis of the speed of your page. These possibilities may help you improve your performance ratings. There is an estimated amount of time savings associated with each opportunity (for example, 0.2 seconds), a breakdown of where you can save time (for example, on what files and how much time you can save per file), and additional insights into how you can improve your problems that are associated with each opportunity. The opportunities feature is an essential component of Google's speed test. It serves as a signal to users, advising them to improve their scores and retest the sites they've created.

3. Diagnostics

Additional information on the operation of your website may be found in the diagnostics part of the speed report for your website. Although the elements that have been highlighted may not have a direct influence on your website's performance score, they can have an impact on your score. It is excellent practise to address the difficulties raised in the diagnostics section; nevertheless, it is not necessary to devote a significant amount of attention to them in contrast to the opportunities. In addition, if you solve the problems that are described in your opportunities, you should anticipate seeing good improvements in your diagnostics.

4. Passed Audits

At the end of the report, you will get a list of all the audits that your website has successfully completed. The results of this may provide you an overview of what you are doing right, and if you make adjustments, you can expect to see more passed audits, which can serve as an indication that you are improving the performance of your website's loading speed. All of the audits that you have passed will also be colour coded in green, showing that your website satisfies and fulfils the requirements of those criteria.

Concluding your Understanding of a Website’s Page Speed

As was indicated earlier, there are a variety of tests that you can run on your website that will evaluate it based on a variety of metrics and provide you with findings that are graded in a variety of ways, including alphabetical, numerical, and other classifications. Despite this, all website performance tests adhere to a standard set of fundamental components that must be taken into account. This in-depth article can help you monitor your website and, more importantly, help you understand the speed performance scores of your website by diving deep into understanding your website's speed using Google's PageSpeed Insights. This article is comprehensive and dives deep into understanding your website's speed. We hope that by the time you come across terms like FCP, TTI, CLS, and others, this post will have provided you with the skills necessary to comprehend what they mean in relation to the speed reports of your website.

If you are interested automatic performance and uptime monitoring of your website's, then check out EarlyPing.