5 ultra actionable tips to improve your Web performances

If you want your website to be successful and well ranking on Google, you need to make sure it loads quickly and efficiently. Web performance is a measure of how fast a web page loads and how well it responds to user input. There are a number of factors that can affect web performance, including file size, server response time, and code efficiency. In this post, I will give you some tips on how to improve web performance and make your site run faster.
It's in part how we optimize our website to have 100% pagespeed on Google : https://www.kezios.fr/

1 - Improve your Images

Lazy loading images is a technique that lets you load the images only when a user scrolls the page. This means that if a user doesn’t reach the end of the page, they won’t load any images at all.

Decoding an image means converting it into a format that can be displayed on your site. The process is done by your browser, and it takes some time to do so. To prevent this process from happening as multiple times, it is better to decode them once and then store them for later use. Do not display over quality images

Images have different formats such as PNG, JPEG, GIF etc., which are used according to their needs and purposes but sometimes we use the wrong format for our image which makes them look blurry or pixelated in browsers. A simple trick which you can use here is giving proper dimensions and in multiple format (webp & jpg) for each image so that it will display properly even if there are differences between users’ screen and browser.

<picture>
  <source srcset="assets/img/yourImage.webp" type="image/webp">
  <source srcset="assets/img/yourImage.jpg" type="image/jpeg"> 
  <img src="assets/img/yourImage.jpg" alt="Your image !">
</picture>

2 - Preload & prefetch

Preloading is a technique used by web browsers to load ressources more quickly. It typically involves loading images and JavaScript files before a user has requested them, thus reducing the amount of time it takes to load the page.

<link rel="preload" href="yourJsFile.js" as="script" />

Prefetch can also be used to add value to your website by prefetching some of the content they will view at a later point in time. This is especially useful for to prefetch files which will be use in the next view page.

<link rel="prefetch" href="yourJsFile.js" as="style" />

3 - Minified and Compressed your ressources

Minification is the process of removing unnecessary characters from source code without changing its functionality. The most common way to do this is to remove white space and other formatting characters, but it can also include shortening variable names, merging multiple statements into one, or other alterations.

Compression is the process of reducing the size of a file. There are a few different methods for compressing files; these are defined in RFC 1952 as DEFLATE (the default compression method for GZIP) as well as BZIP2, LZMA/LZMA2 and XZ.

4 - CDN served your ressources and use a caching system

A content delivery network or CDN is a large distributed system of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end users with high availability and high performance.

Caching systems are used in web performances to improve the speed and responsiveness of the system. Caching systems store frequently accessed data in a fast access memory, so that it can be quickly retrieved when needed. This can improve the performance of the system by reducing the amount of time needed to access the data.

5 - Optimized your fonts

One way to improve web performance is by optimizing the fonts. This can be done by reducing the number of font faces, using font faceobserver to load fonts asynchronously, and using font-display to control how the browser renders the font. By doing this, the browser can render the page faster and the user can see the content sooner.