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:
-
- 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:
-
scripts - Code splitting in Webpack
-
styles - Critical CSS tool
-
images - lazyload library
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.