General

Everyone appreciates a website that loads fast.

Better user experience

Waiting for a page to load and for expected content to display is a bad user experience. Making sure the most important content loads fast is really important to keep your visitors focused on your site.

Server

Keeping a website performant does not only make the end user happy. If the server needs less time to process more concurrent users can be processed or maybe a cheaper server can be used.

Compression

Make sure all non-binary files (text files) are being distributed by the web server with some kind of compression. Preferably gzip or brotli. A compressed file can be considerably smaller than an uncompressed file and will take much lesser time to download for the user.

HTTP/2

Make sure that your web server has http/2 (or http/3) enabled to greatly increase the speed of loading multiple resources (CSS, JavaScript and image files, etc).

Updated

It is important to keep your server updated to make use of updates in the system and software used. This might sometime mean that also the code base needs updates to make use of these updates.

Load scripts

When loading JavaScript files with script-tags you should use async and/or defer. For best performance and user experience, position your scripts in the head, and depending on how the script is used add defer/async.

No defer or async will block the rendering of your HTML. This is why previously the scripts would preferably be positioned at the end of the body. But that also means that you won't start the loading of the script until all HTML is rendered.

defer will not render-block your HTML and will wait until the DOM is loaded before it is executed. Also, it will be downloaded in parallel, and make sure to run the scripts in the order from the HTML file.

async will not render-block your HTML but will start loading in parallel and execute when loaded. Only use for independent scripts that don't need to access the DOM (like an analytics script).

Preloading and preconnect

If any of your scripts load any other files (like a script or style), then it could be a good idea to make sure that those files are preloaded. That means that the site won't wait until the first file is downloaded, then executed to start to download any other files needed. Instead, these files are loaded just like any script references in your HTML.

Example script.js fetches fetched-js.js. To preload that file, add:

If you don't know the exact path to a file on another domain that you know will be needed, then you can instead use preconnect to prepare a connection to a specific domain to make sure that when a file is requested, a connection is already established (if the file is requested within 10 seconds). That can be if a specific query string is used or if the filename uses some kind of hash that changes.

Tools to test

There are multiple web tools to test the performance of your site. Notice that there is no solution that is perfect, and for each site, the results of the tools must be analyzed. As an example, a site might not load super fast on the first page, but clicking links loads the pages super fast. The performance tools might not test this and give the page a poor result, even if it is perceived as fast.

• PageSpeed Insights tool

• WebPageTest

• Website Speed Test