5 Tips to make your Website faster

The goal is to not make your users download unnecessary content, as it slows down your website, worsens conversions and SEO.

Minify your text assets #

Notice that the bootstrap file you download from their site is named bootstrap.min.css, that's because the file is minified. Here are some of the things minification does for us:

removes whitespace
removes comments
removes non-required semicolons
reduces hex code lengths

Before minification:

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      This is just a comment......
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

After minification:

Copied!
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="%PUBLIC_URL%/manifest.json"><link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"><title>React App</title></head><body> <noscript> You need to enable JavaScript to run this app. </noscript><div id="root"></div></body></html>

The minified version is on one line, the comments have been removed, it has become unreadable. However, the browser doesn't have problem reading html, js or css assets that are minified, in fact it is more efficient to remove the white space and reduce the file size.

The easiest way to minify our assets is to use a module bundler like webpack.

Use GZIP encoding #

To gzip content means using an algorithm to find all the repetitive strings and replace them with pointers to the first instance. We can identify if content is served with a gzip encoding if we open our devtools and check the content-encoding response header in the network tab.

GZIP is used for compression and decompression - The browsers have a request header accept-encoding : gzip, deflate, br. By sending this header they indicate that they accept gzipped files. Then your web server (apache, nginx), or CDN (cloudfront) gzip the requested resource and send it to the browser. Lastly the browser has to unzip the file and render it.

GZIP performs best on text-based assets: css, js, html. All modern browsers support GZIP compression and will automatically request it for all HTTP requests.

Optimize your Images #

PNG images are lossless compression - they don't lose any of the quality when they get compressed. Images with a .png extension usually are the most kb.
JPG images are lossy compression - they lose some of the quality, but the file size is greatly decreased when compressed.
WEBP images can be both lossless and lossy compression. They are web optimized images. The same image as a .webp is usually smaller than jpg or png images. webp images support transparency, just like png images, but load faster.

Usually you want to use .webp images for your website, unless you need supreme quality and are ok with having your users download larger images. Note that IE11 and older IE versions (6-10) don't support .webp images - browser support

Convert your images to .webp
Crop your images to remove unnecessary space
Resize your images to further reduce the file size
Optionally experiment with compressing the image to lower the quality and save on kbs

Don't load too many images #

Nowadays there is a very convenient attribute for lazy loading images - loading="lazy" makes images on your web page that are not visible be lazy loaded when the user scrolls into them.

Copied!
<image src="/my-img.webp" alt="white-cat" loading="lazy" />

As of December 2020 support is at about 75%, but if the browser does not support the loading attribute on images, it would just load all your images and everything else would just work.

Use the system font stack #

Instead of downloading many KB of render blocking fonts, use the system font of the particular operating system your visitor uses. This way the browser doesn't have to download any font files.

Copied!
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

The breakdown of the above snippet is:

-apple-system and BlinkMacSystemFont are used for apple devices
Segoe UI for windows devices
Roboto for Android devices
Oxygen-Sans, Ubuntu, Cantarell for linux systems
Helvetica Neue and sans-serif are used as fallback, in case some of the previous fonts fail to load