Website performance optimisation strategy

Client side optimisations are used in conjunction with server side optimisations to improve a website performance. The third set of optimisation consists in delivering a Progressive Web App to improve the user experience across different devices and network conditions.

Server Side optimisations

Server side optimisations focus on improving the time it takes for the server to respond as well as caching resources for repeat visits.

Improve the time to first byte (TTFB)

To improve the time to first byte, we need to optimise the server response time. This can be achieved by backend code optimisation, server configuration and optimisations and if required infrastructure upgrades.

Cache static assets

This is achieved by providing information to the browser to temporarily cache static assets rather than retrieving them from the network. This optimisation will speed the page load time on subsequent requests.

Client side optimisations

Client side optimisations have a  direct impact on the performance and user experience.

Image optimisations

Images are a key element of performance optimisation as they are often the heaviest resource on a web page.

Size images correctly

Images need to be rendered at the size of the device they are viewed.

Efficiently encode images

Images can be optimised via an image optimisation software (such as Adobe Photoshop) in conjunction with server side optimisation.

Use next-generation image formats

Images are usually uploaded using a traditional format such as JPG or PNG. However, most browsers support a next generation format called Webp that is better optimised for the web. This technique consists in generating webp images dynamically on the server and providing a fallback for the few browsers that do not support the format yet.

Lazy-loading

The lazy loading technique consists in providing a way for the browser to download and render the image as the user browses the page. It is useful to prevent blocking critical assets and improve the time to interactive

Resource optimisations

Minify resources

This optimisation consists in minimizing the file size of resources such as JS/CSS to reduce their weight.

Eliminate render-blocking resources

This optimisation consists in deferring the loading of some resources such as JS/CSS that are used to style the page and to deliver interactions.

Remove unused CSS / JS

This technique consists in serving critical resources such as JS/CSS inline, in conjunction with deferring the non critical resources.

Progressive Web Apps

The PWA development philosophy is becoming a new standard for web development. Progressive Web Apps leverage the modern technologies to deliver engaging user experiences across all devices and network conditions. For more information about PWAs, read our article PWA definition article.

In order to be a valid Progressive Web App, a website must validate the following aspects.

1. Fast and reliable

The website should load fast enough on mobile networks

2. Installable

The website should be installable on the user device.

The main requirements for this are:

• Served over HTTPS

• Registers a service worker

• Web App manifests that meets the installability requirements

3. PWA optimised

All traffic should be served over HTTPS. Requests to resources with HTTP must be redirected to HTTPS.

Building websites following the PWA development approach is increasingly important as it contributes to a better user experience and to rank higher in search engine result pages.

More information on our article about performance.