Is Page Speed Test all you need to improve performance?

👋 Hello folks ~

Imagine this scenario:

The development work for your website has wrapped up, but website performance is not assessed in any way and you don’t have much knowledge on Performance Testing. A quick search online leads you to stumble upon the Page Speed Test tool, which seems like a quick and easy way to analyse and improve the website performance.

Is this tool all you need for your live public website to perform well in this situation? Let’s take a deeper look!

What is Page Speed Test?

Page Speed Test is a test tool that analyses the webpage by loading its URL and gives a performance report based on metrics such as speed index, first contentful paint and time to interactive. Based on the results, most of them also give recommendations to further improve the performance of the scanned webpage. An example of a Page Speed Test tool is Google Lighthouse’s Performance section as mentioned in a previous article. Some other examples are Sematext, Kingdom Speed Test, Uptrends, WebPageTest, and Dareboost — these are usually part of a complete website monitoring suite.

How do I make use of Page Speed Test?

There is no fixed rule on how you want to integrate Page Speed Test into your development process. Page Speed Test can be run anytime on any webpage and the improvements based on the recommendations can be implemented with some effort. For existing websites, periodic tests can be conducted from time to time, or whenever new pages/changes are introduced. For new websites that have not gone live yet, the test can be conducted in the test environment, but do note that the performance may vary if the infrastructure sizing and configurations in the test environment is different from the live one, even though the recommendations could still be useful. Another way to make use of Page Speed Test is to integrate them into your CI/CD pipeline.

What do the Page Speed Test metrics mean?

Different Page Speed Test tools may provide different sets of metrics in their reports, but they are all obtained from the web performance API that retrieves navigation event information when the browser fetches and loads a webpage as shown below.

Source: MDN Web Docs

Here are some of the common metrics used to determine webpage performance and what they represent to give an idea of the optimisations needed to improve them.

• First Contentful Paint
  The time it takes the browser to render the first piece of DOM content including text, images and SVGs.
• Speed Index
  This is how fast the content is visually displayed in the page view area (without having to scroll) during the page load. This is calculated using a video capture of the visual loading progression over time.
• Largest Contentful Paint
  The time it takes the browser to render the largest image or text block visible within the page view area, relative to when the page first started loading. This measures perceived load speed as this is the biggest progression the user will notice.
• Time to Interactive
  The time it takes for a page to become fully interactive. In other words, event handlers are registered and the page responds to user interactions such as clicks.
• Total Blocking Time
  The time a page is blocked from responding to user input, measured by total amount of time after 50ms for each task from First Contentful Paint to Time to Interactive.
• Cumulative Layout Shift
  Layout shifts occur when existing elements change their start position due to resources loading asynchronously or dynamically-added DOM elements, resulting in sudden, unexpected changes. Cumulative Layout Shift is a measure of the total largest occurrence of every layout shift that occurs during the entire lifespan of a page.
• Time to First Byte
  Time between the browser page request and when it receives the first byte of information from the server. This time includes DNS lookup and connection establishment using a TCP handshake and SSL handshake for HTTPS.

Does this mean Performance Test is not needed with Page Speed Test?

The key difference between Performance Test and Page Speed Test is that the former introduces a sizeable load to the website in order to simulate and check the behaviour of the site when a high volume of users are accessing it. Page Speed Test will give a performance assessment of the website at the point that it is run, so the load time may vary depending on the prevailing traffic condition, which is usually not as high as during a Performance Test.

As such, the objective of a Performance Test is different — It strives to optimise hosted infrastructure and the website under an identified/forecast peak load (Eg. 1,000 concurrent users), whereas Page Speed Test seeks to optimise the scanned webpage as much as possible based on recommended best practices that would improve even a single user experience. The issues identified from a Performance Test may be more engineering-related such as appropriate server sizing and scaling configurations, database optimisation for large number of queries or introduce pagination for content-heavy pages; while Page Speed Test sniffs out common issues like image size optimisation and lack of browser caching.

Another key difference is that while we can carry out a Performance Test for a backend system (eg. using API requests or even directly on database), Page Speed Test only supports frontend webpage as the collected metrics are from client-side web performance APIs. Thus, Performance Test using tools such as JMeter and K6 is the way to go in this case.

In short, a 100% score on Page Speed Test tool does not mean your website performance has no issue when traffic spikes as industrial best practices such file compression and browser caching have limits in their performance impact to the whole application system.

Page Speed Test is definitely a useful tool to utilise if you have not done so to further aid your performance tuning and monitoring process. It should be used in addition to Performance Test, as well as good performance engineering and design early in the development cycle for a complete, well-tuned system. Do let us know about any other tips to improve your system performance!

- Merlin 💛