Performance Testing using Google PageSpeed Insights

24/01/2019

We all want our websites to load quickly, and there are a number of services out there to help us test, evaluate, and fix various issues affecting the loading speed of our pages. In this series of docs, we will be looking at the major players in this area, Google PageSpeed Insights, GTMetrix, Pingdom and WebPageTest, and how they can help you improve the loading speed of your Avada website. Read on!

PageSpeed Insights

PageSpeed Insights is an online tool from Google, which helps in identifying performance best practices on any given website. The PageSpeed Insights API (PSI) reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved, and suggests overall ideas of how to make a website faster.

Page Performance Summary

At the top of the report, PageSpeed Insights provides a score which summarizes the page’s performance. This score is determined by running Lighthouse to collect and analyze lab data about the page. A score of 90 or above is considered fast, and 50 to 90 is considered average. Below 50 is considered to be slow.

Google PageSpeed Insights > Mobile First

You will notice to the top left that the report defaults to the Mobile Results, in line with Google’s Mobile First Indexing. See the Desktop results, as shown below, by clicking on the Desktop tab.

Google PageSpeed Insights Results Summary

Below this Performance Summary are several sections, that first show the data captured, then a range of audits that show how to fix issues, how to generally improve the site, and finally a list of passed audits. Let’s have a closer look.

Data Collection

PageSpeed Insights provides both lab and field data about a page. Lab data is useful for debugging performance issues, as it is collected in a controlled environment. However, it may not capture real-world bottlenecks. Field data, on the other hand, is useful for capturing true, real-world user experiences – but has a more limited set of metrics. See How To Think About Speed Tools for more information on the 2 types of data.

Field Data

Field Data – This section shows a rolling 30 day report of the page using the Chrome User Experience Report. The field data is basically a historical report about how a particular URL has performed over time, and represents anonymized performance data from users in the real-world on a variety of devices and network conditions.

Classifying Fast, Average & Slow

PageSpeed Insights classifies field data into 3 buckets, describing experiences as fast, average, or slow. PSI sets the following thresholds for fast / average / slow, based on analysis of the CrUX dataset:

Fast Average Slow
FID [0, 50ms] (50ms, 250ms] 250ms and up
FCP [0, 1000ms] (1000ms, 2500ms] 2500ms and up

FID & FCP

First Input Delay (FID) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.

First Contentful Paint (FCP) marks the point, immediately after navigation, when the browser renders the first bit of content from the DOM. This is an important milestone for users because it provides feedback that the page is actually loading.

Recommendations

Origin Summary

Origin Summary shows a developer the speed of all the pages that are served from this page compared to other pages in the Chrome User Experience Report over the last 30 days.

Lab Data

Unlike the Field Data, the lab data is based on a simulated load of a page on a single device and fixed set of network conditions. As a result, the values may differ. Labdata analyses a page using Lighthouse and then simulates how it will load on a mobile device. It then gives a performance score between 0-100 based on a set of performance metrics, including: First Contentful PaintFirst Meaningful PaintSpeed IndexFirst CPU IdleTime to Interactive, and Estimated Input Latency.

Google PageSpeed Insights > Lab Data

Audits

Lighthouse separates its audits into three sections:

  • Opportunities provide suggestions how to improve the page’s performance metrics. Each suggestion in this section estimates how much faster the page will load if the improvement is implemented.

  • Diagnostics provide additional information about how a page adheres to best practices for web development.

  • Passed Audits indicates the audits that have been passed by the page.

Opportunities

The Opportunities section is what it says on the label. This section provides developers with recommendations to improve a page’s speed and gives an estimation of the page speed gained.

Google PageSpeed Insights > Opportunities

You can expand on the opportunities by clicking the small chevron on the right, and there is a link more more information about the particular issue.

Google PageSpeed Insights > Opportunities Expanded

Diagnostics

Diagnostics supplies more information about the performance of a page as well as other recommendations to improve a page’s speed.

Google PageSpeed Insights > Diagnostics

Likewise, the Diagnostics section can be expanded one point at a time, with further information and links to even more.

Google PageSpeed Insights > Diagnostics Expanded

Passed Audits

The final section, Passed Audits, is useful as it tells developers the audits that the page has passed on. These individual audits can also be expanded to show more details.

Google PageSpeed Insights > Passed Audits

Common Issues

  • Images – Images will be a typical issue for many sites. PageSpeed Insights might suggest you Defer offscreen images, Serve images in next-gen formats, or Properly size images. These issues must be addressed independently, but to get started on understanding the issues, please see A Comprehensive Guide to WordPress Image Optimization post.

  • Server Response Time – PageSpeed insights will often list Reduce server response times (TTFB) as an issue. This is the Time to First Byte, and to improve this, you will need to work with your hosting company to see if anything can be done in this area.

  • Eliminate render-blocking resources – Render Blocking, like many other technical terms, can be a complicated topic. It totally depends on the individual site and even page setup, which resources will be render blocking, so it’s very difficult to give general advice. Most of the time it will be the WP native jQuery libraries and the Avada stylesheet (which is the main static stylesheet and, if file compiler is used, the dynamic stylesheet) and these are not the sort of resources you want to eliminate. For other resources and complex site setups, cache plugins that combine resources, defer JS loading etc. can help, so please read our caching documents linked below.

Conclusion

Google PageSpeed Insights is a valuable tool to help detect and remedy issues that may be affecting your websites’ load time. It does however require time, patience and expertise. There are also other similar services like GTMetrix, Pingdom, and WebPagetest.

Remember, due to hosting and content variables, site optimization is a very complex area, and falls well outside of the support we can provide for Avada.

The Facebook Avada User’s Group has a large and very active membership, and this topic is regularly discussed on the Group.