Optimiser chargement site web

Chaque page web se charge suivant l’ordonnancement du script HTML. Chaque ressource est chargée une après l’autre dans le cas standard, et ceci afin de pouvoir gérer les dépendances entre les fichiers, surtout quand il s’agit des fichiers Javascript.

Trop de ressources à charger au niveau de la balise <head> vous amène a effectuer beaucoup de requêtes. Le temps de chargement total de vos ressources dépend du nombre de requêtes http que vous effectuez.

De ce fait, avoir le moins de requêtes au niveau du <head> réduira considérablement le temps de chargement de votre page, mais ceci n’est pas tout, il faudra aussi que les ressources chargées soient compressées et optimisées.

Pour cela, nous vous expliquons dans cet article, comment éliminer les ressources qui bloquent le chargement de votre rendu, et donc afficher les éléments au dessus de la ligne de flottaison plus rapidement.

Voici les méthodes pour élimiter les ressources bloquant le rendu

1. Compresser les fichiers Javascript et CSS

Vous devez absolument faire en sorte que les fichiers CSS et Javascript chargés au niveau de votre site web soient minifiés. Pour cela, nous vous conseillons d’enregistrer une copie de vos fichiers CSS et JS non compréssés de coté, et faire appel aux fichiers compréssés à la place. Vous aurez donc la possibilité d’éffectuer des mises à jour de vos scripts sur vos fichiers non compréssés et compresser le résultat pour l’enregistrer sur la version compréssée.

Par exemple, si vous avez un fichier style.css, celui-ci n’est pas compréssé, vous créez un autre fichier css nommé style.min.css, celui ci contiendra la version compréssée de style.css. Idem pour vos fichiers Javascript.

Pour pouvoir compresser vos fichiers JS et CSS, vous aurez besoin d’outils qui permettent de faire cela, nous vous conseillons les site Minifier.

2. Réduire le nombre de fichiers CSS chargés au niveau de la balise head

Avoir un grand nombre de fichiers CSS et Javascript à charger, augmente considérablement le temps de chargement de votre page web.

Pour cela, nous vous proposons un outil qui permettra de rassembler vos fichiers CSS ou Javascript en un seul fichier contenant toutes les ressources (fichier CSS et fichier JS). Cet outil s’appelle Pakd. Cet outil vous permet de minifier et rassembler tous vos fichiers en un seul qui sera généré sur ce dernier. Vous pouvez alors le télécharger et l’implémenter au niveau du head en éliminant tous les autres fichiers.

Cela vous garantir un chargement d’une seule ressource, donc une seule requête et par conséquent réduire grandement le temps de chargement de votre page.

3. Déplacer quelques ressources Javascript vers le bas de page

Vous pouvez également déplacer les fichiers JS qui ne sont pas nécéssaire à implémenter au niveau du <head> vers la fin de la balise body. Ceci permet d’éliminer de charger ces fichiers à la fin, alors que le contenu soit déja chargé pour l’utilisateur. Par conséquent, vos visiteurs verront les données au dessus de la ligne de flottaison plus rapidement.

4. Utiliser les attributs Defer et Async sur vos scripts JS

L’objectif d’utiliser les deux attributs est de charger et lancer l’interprétation du code JS sans bloquer le rendu HTML.

L’attribut async permet de charger et exécuter les scripts de façon asynchrone, alors que l’attribut defer vous permet de différer l’exécution de votre script à la fin du chargement du document.

Toutes ces astuces vous permetteront de réduire considérablement le chargement de votre page web, et donc d’éliminer le bloquage du rendu.

Vous avez aimé cet article? Laissez-nous votre avis et partagez le afin d’aider d’autres personnes à règler leurs soucis de chargement de page.

//digitall-agency.com/wp-content/uploads/2018/12/inlogo.png