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#