Website performance optimization

Server side optimizations 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 optimize the server response time. This can be achieved by backend code optimization, server configuration and optimizations 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 optimization will speed the page load time on subsequent requests.

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

Image optimizations

Images are a key element of performance optimization 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 optimized via an image optimization software (such as Adobe Photoshop) in conjunction with server side optimization.

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 optimized 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 optimizations

Minify resources

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

Eliminate render-blocking resources

This optimization 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.

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 optimized

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.