Performance Testing using Google PageSpeed Insights
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.
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.
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
Read more about FID and how it affects your page load.
Minimize the number of render-blocking external stylesheets and scripts upon which the page depends. See Render-Blocking CSS and Loading Third-Party JavaScript.
Use HTTP Caching to speed up repeat visits.
Minify and compress text-based assets to speed up their download time. See Optimizing Encoding and Transfer Size of Text-Based Assets.
Optimize JavaScript bootup and reduce JavaScript payloads with tree shaking or code splitting. The goal is to do less JavaScript work on page load.
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 Paint, First Meaningful Paint, Speed Index, First CPU Idle, Time to Interactive, and Estimated Input Latency.
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.
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.
Diagnostics
Diagnostics supplies more information about the performance of a page as well as other recommendations to improve a page’s speed.
Likewise, the Diagnostics section can be expanded one point at a time, with further information and links to even more.
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.
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.
