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#

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 <img> tag.

 

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

No discussions yet