When testing for performance, WebPageTest is an invaluable tool. While the performance audit tab in Chrome’s Dev Tools tests a web page against Google’s performance algorithm and creates a score along with a list of opportunities to improve performance, WebPageTest offers an in-depth look at what exactly is happening when someone requests a web page from our server.
WebPageTest has been around since 2008 and was originally built by engineers at AOL to measure page load experience of end users. It’s a fantastic free service but the different features, their customization options and the depth of its reports can be intimidating at first.
To cover all of the features of WebPageTest would fill a whole book (e.g. Using WebPageTest). What might be useful to discuss in a blog post is one of the metrics in particular, the Speed Index.
The Speed Index tries to measure perceived performance by analysing how much of the content is displayed during the page loading process. In general, the lower the number, the better.
Imagine two web pages which both have the same overall load time, but a different load progress: page A displays much of its visible parts fairly quickly and then finishes rendering. Page B has to do more layout calculation at the beginning, and initially only shows very little of the content, but once all calculations are done the browser can render the rest of the page content quickly.
For both pages the “Start Render” and the “Fully Loaded” metrics are identical, but the load progress is different. Since on page A more content is shown early in the page load process users may perceive that it loads faster, which means that these users are less likely to abandon a page while it is still loading. This is an important factor in determining a page’s overall performance.
Read more about the Speed Index in the official WebPageTest documentation.