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:
npm i compression
Now enable compression in server.ts:
import * as compression from 'compression';
/**
* other code
*/
export function app(): express.Express {
const server = express();
server.use(compression());
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:
<link rel="preload"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</noscript>
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