Tuning the application
Faster! Faster! Faster! In this lesson you will enable gzip compression, defer the CSS, lazy-load images and more. All to make it faster!
Tuning the Application#
Your application is almost ready. Let's add some final touches to tune it up.
Enabling gzip compression#
The first thing you can do to improve Time To First Byte is to enable gzip compression. As a result, you will decrease the size of files shipped to the browser.
Now enable compression in server.ts:
Deferring Bootstrap CSS#
Another possible improvement is to defer CSS downloaded from the Bootstrap CDN. Replace the current stylesheet link in src/index.html with the following code:
rel="stylesheet", the file is initially loaded as
rel="preload". This enables the browser to download stylesheets asynchronously. Once the styles are downloaded, you change the
rel attribute to
<noscript> section that attaches styles in a regular way.
Loading images lazily#
In most web applications images are the largest files downloaded via HTTP. Most browsers support lazy-loading of images, which prevents them from blocking the final page render time. Using this functionality is as easy as adding
loading="lazy" attribute to the