View on GitHub

guides

Loading performance

Background

Fast application is not only working smoothly during user interaction, but also loads quickly. This means that you should care about how fast your application can be used by user at first time, he enters your website.

There are couple of key metric that you should be aware of:

First Paint - user sees first element on your website
First Contentful Paint - user sees first content on your website (article, photo, etc.)
First Meaningful Paint - user sees app shell (whole layout of your application)
First Interactive / Time to Interactive - user can interact with your application

More about user-centric performance metrics you can read here.

Rules

Keep your assets as small as possible
- Minify scripts, styles, images, etc.
- Load images prepared for certain devices
Optimize assets loading time
- Use Cache-Control header on server side - reference
- Use Service Workers or App Cache on front-end side
Prefer lazy loading over eager loading (loading everything at the application boot) - reference
Remove all initial render blockers
- Mostly external scripts / stylesheets placed in <head />
Inline Critical CSS styles
Inline critical SVG graphics

How to measure performance of your app?

We recommend using Lighthouse, which makes audit of your website using different tools. It checks performance, accessibility and compatibility with PWA pattern. More about it you can read here.

Beside Lighthouse, you should definitely use your favourite browser’s dev tools. In Chrome you have access to different tools like:

There are other great tools for measuring performance of your application, which you can find in this article.

What you can do to improve loading time?

Minification

When you see that your application is loading slowly, first thing you need to do it to check if assets are correctly optimised. There are couple ways how you can do it:

Minify your scripts and styles (using Webpack)
Optimise you images
- you can use ImageminPlugin for Webpack

Caching

You have your assets optimised, but still you website can load slowly, especially during next reloads. There is one thing that you need to remember - never load the same resource twice. By “the same” we mean, resource that is not changed over time. That’s why you need to leverage browser caching.

Here are some tips how you can do it:

Use Cache-Control header on server side - see this article
Cache files on client with Service Worker - see this article

More about caching you can find here.

Lazy loading

Lastly, it’s good to load only required assets. Imagine that you build huge application. You definitely don’t want to load all assets at the first load. It’s better to lazy load them.

You can lazy load images, styles, scripts and any other files. Here are tools which you can use:

PRPL pattern

PRPL is a pattern for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch. It stands for:

**Push** critical resources for the initial URL route.  

**Render** initial route.  

**Pre-cache** remaining routes.  

**Lazy-load** and create remaining routes on demand.