Performance optimisation

Never ending story

Optimisation is a real Pandora's box, you can almost always scratch off a few valuable milliseconds of your website's loading and rendering time. Before you start writing your own GPU-based custom HTML rendering engine, let's take a look at easily implemantable optimisations.

Testing your website

While they only show one half of the story, the PageSpeed Insights and Pingdom Website Speed Test tools can help you identify performance issues in your website. They can also help you optimise your website for the best user experience.

Further optimisation

Image optimisation

You can control how the browser will load images using the loading attribute. Images that are not visible on load can be lazy loaded using loading="lazy". This will only load the image when it is visible in the viewport. For images that should load earlier, you can use loading="eager". This will prioritise loading the image before the rest of the page.

You can also use the decoding attribute to specify when the borwser should decode the image. The possible values are:

  • auto – Changes based on the browser.
  • sync – Decodes the image before painting.
  • async – Decodes the image after painting.
Advanced: custom lazy loading

To further optimise the loading of images, you can first load a low resolution image, and then load the full resolution image when the user scrolls to the element. This can be done achieved using the JavaScript Intersection Observer API and custom HTML attribute to store the source of the high resolution image. You can also find JS libraries to do this, such as lazyload.js or verlok/lazyload.

Font optimisation

Just like images, fonts loading can be a resource hog. To optimise the loading of fonts, you can limit the character set stored in the font file to the characters used on the page. This can be done using online tools, such as Transfonter or Font Squirrel.

Additionally, you can preload the font files using the HTMl <link> tag with both the as="font" and rel="preload" attributes. This will "warm up" the request to the font file, and will make the browser start loading the font file before the page is fully loaded. 

<link rel="preload" href="fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/custom-font.woff" as="font" type="font/woff" crossorigin>

Improving performance

CSS can be used in my different ways, some more computationally expensive than others. For example, certain CSS properties require a new layout recalculation. Such properties include width, height, margin, padding, and border. If your website heavily animates or transitions these properties, you can use the will-change property to tell the browser that the property will change.

You can also use the transform property to animate elements instead of moving them with top, left, right, and bottom properties. Translation is generally less expensive to compute than relative or absolute positioning.

Advanced: hardware acceleration

To further improve performance, you can use hardware acceleration. This can be done using the translate3d property, which is a 3D version of the translate property. This will allow the browser to use the GPU to render the element, which can improve performance.