Tips and tricks to improve website performance

A common thing that users complain about the most is usually website performance. In this article, I've listed some ideas for improving your website's performance.

Compressing images for web and using responsive images or art direction

Image optimisation is probably the most significant performance win you can get. As a first thing, all images should be compressed for the web, that way they will ship smaller to the end user. Beside using tools like Photoshop, there are also online service which can do that, like Optimizilla.

Another thing that would help with images, is also providing responsive image sizes. You can use the srcset attribute to specify multiple image sources for different screen sizes. This allows the browser to choose the most appropriate image for the current device.

<img
  srcset="image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  src="image-800w.jpg"
  alt="some random image"
/>

Art direction is a technique that allows you to serve different images to different devices. This is useful when you want to serve a different image for mobile and desktop devices.

<picture>
  <source media="(min-width: 900px)" srcset="desktop.jpg" />
  <source media="(min-width: 480px)" srcset="tablet.jpg" />
  <img src="mobile.jpg" alt="image descriptive text" />
</picture>

Fetch only relevant resources

The link tag has a media attribute that can be used to specify the media query for which the stylesheet is intended. The below example will fetch the mobile.css file only if the device width is less than 480px.

<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)" />

You can find a live demo of this on w3schools.

Code minification

Minification (also minimisation or minimization) is the process of removing all unnecessary characters from the source code of interpreted programming languages or markup languages without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters. - Wikipedia

Regardless of the build tool (Webpack, Vite, Snowpack, etc) you use, it would have a minification option. For example, in webpack, you can use the TerserPlugin to minify your code.

Pre-fetch resources

Using link tag, you can preload images, CSS, JS, and even entire pages.

<link rel="preload" as="image" href="image.png" />

There are libraries that make it easy to pre-fetch resource, like quicklink or guess. Quicklink is a library that prefetches links in the viewport, using the Intersection Observer API, & makes them load faster, whereas Guess is a library that uses Machine Learning to predict which page the user is most likely to visit next.

Lazy loading of resources

Lazy loading is a technique that allows you to defer the loading of non-critical resources until they are needed. It just requires you to add the loading="lazy" attribute to the relevant elements and you are good to go.

<img src="placeholder.png" alt="image descriptive text" loading="lazy" />

Ideally, you should lazy load images, videos, iframes, and other resources that are not visible on the initial page load.

Tree-shake the code

Tree shaking is a term commonly used within a JavaScript context to describe the removal of dead code. It relies on the import and export statements to detect if code modules are exported and imported for use between JavaScript files. - Mozilla

Just like minification, tree-shaking & pruning unused code is also a build tool feature.

Here is the webpack documentation on tree-shaking.

Lighthouse in Chrome DevTools

Last but not least, I highly recommend using Lighthouse which comes with Chrome DevTools - it helps you track performance improvement progress. Besides that, it also gives you a score for overall performance and tells you what changes to make to improve it more.

Besides performance, with Lighthouse you can also analyze SEO optimization, accessibility, PWA and other best practices for your website.