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.

Install the compression middleware:

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:

Instead of 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 stylesheet to apply the styles. To support browsers where JavaScript is disabled, there's a <noscript> section that attaches styles in a regular way.

Loading images lazily#


This page is a preview of The newline Guide to Angular Universal

Start a new discussion. All notification go to the author.