Performance testing

This documentation is a work in progress. It describes prerelease software, and is subject to change.

This page takes you through the tools you can use to measure your application’s performance.

Loading performance

pwa-starter-kit is built using the PRPL pattern, which is a new approach for structuring and serving PWAs, with an emphasis on performance. It stands for:

Lazy-loading

Lazy loading is an important aspect of pwa-starter-kit, since it makes sure each route only loads exactly what it needs to render something to the screen, and any extra work is done afterwards. There are several places in the app where this is done:

Lazy-loading routes

The actual JavaScript code for each route is only loaded if that route is requested. This is done in the loadPage action creator, which is called any time you perform a navigation.

Lazy-loading reducers

If a route is connected to the Redux store, since it is lazy-loaded, then its reducers must be as well. The Redux and state management page covers how to set up your store to accommodate lazy loading reducers, and gives you an example of how this is done in pwa-starter-kit.

Measuring performance

There are a few tools to help you measure and automate your performance measurements.

Lighthouse

Lighthouse is an open source tool that helps you measure and improve the performance of your page. It comes as a Chrome DevTools extension or a node module, so that you can run it in the command line (and integrated it with your other automated Node testing). Once it’s ran, it gives you an overall score, and suggestions for each area of improvement:

screenshot of lighthouse results

WebPageTest

WebPageTest is an application that loads your page on an actual Moto G4 device with a slow 3G connection, and then gives you a details report on the page’s load performance in that scenario. It is very useful to see how your application performs in a real-world, non-testing environment.

For example here is a run testing the deployed pwa-starter-kit.

In particular, the film strip view is very useful, since it shows you a timeline of when your application actually first paints to the screen:

screen shot 2018-05-02 at 11 00 46 am

Interactive timeline of your resources loading, and who generated the requests: screen shot 2018-05-02 at 11 01 02 am