9) énormes charges utiles du réseau
Réduire la taille totale des requêtes réseau peut non seulement accélérer votre page, mais également faire économiser à vos utilisateurs l’argent qu’ils dépenseraient en données cellulaires.

Comment optimiser?
Il existe plusieurs moyens de réduire la taille des charges utiles. Tout d’abord, vous devez éliminer les requêtes de serveur inutiles.

Une fois que vous vous êtes débarrassé de toutes les demandes inutiles, il n’est plus que droit de faire en sorte que celles qui restent soient aussi petites que possible. Voici donc un petit nombre de techniques de minification des ressources à prendre en compte. Pensez à activer la compression du texte et des images et à utiliser le format WebP au lieu de JPEG ou PNG. Il est également judicieux de mettre en cache les demandes afin que les ressources ne se téléchargent pas à partir de zéro lors de visites répétées. Veuillez vous reporter à ce guide sur la mise en cache HTTP pour voir comment procéder.

10) Traitement des images hors écran
Les images hors écran sont celles qui apparaissent sous le pli. De ce fait, il n’est tout simplement pas nécessaire de les télécharger lors du chargement initial de la page. Par conséquent, il n’est que juste de différer leur charge afin d’améliorer la vitesse de votre page ainsi que le temps nécessaire pour l’interactivité.

Comment optimiser?
Fondamentalement, la meilleure stratégie à suivre consiste à télécharger des images au-dessus du pli avant celles hors écran et à commencer à télécharger des images au-dessous du pli uniquement lorsqu’un utilisateur accède à celles-ci. Cette technique s’appelle le chargement paresseux. Avec un outil comme IntersectionObserver, vous ne pouvez charger les images que lorsqu’un utilisateur les a fait défiler.

11) Améliorer le temps de réponse du serveur
Lorsqu’un utilisateur accède à un certain contenu à une certaine URL, le navigateur émet une requête réseau afin de récupérer ce contenu. Par exemple, si les utilisateurs souhaitent accéder à l’historique de leurs commandes, le serveur devra extraire l’historique de chaque utilisateur à partir d’une base de données, puis insérer ce contenu dans la page. Parfois, ce processus peut prendre trop de temps. Par conséquent, l’optimisation du temps de réponse du serveur est l’un des moyens possibles de réduire le temps que les utilisateurs attendent en attente du chargement des pages.

Comment optimiser?
La chose la plus désagréable à propos de ces retards de réponse est qu’il existe un assez grand choix de raisons qui peuvent les causer. Par exemple, il peut s’agir d’un routage lent, d’une logique d’application lente, de la privation de ressources du processeur de ressources, de requêtes de base de données lentes, de la privation de mémoire, de cadres lents, etc.

Veillez donc à ce que vos paramètres soient bien maintenus et essayez de maintenir le temps de réponse sous 200 ms.

12) Éliminer les ressources bloquant le rendu
Il est vivement conseillé de ne laisser que les scripts externes les plus importants car sinon, cela engendrerait des allers-retours supplémentaires pour un rendu complet de la page.

Comment optimiser?
Si les scripts externes sont petits, vous pouvez les insérer directement dans le document HTML pour éviter toute requête réseau supplémentaire. N’oubliez pas que l’inline augmente la taille de votre document HTML. C’est pourquoi vous ne devriez le faire qu’avec de petits scripts. Pour les importations HTML non critiques, Google recommande de les marquer avec l’attribut async. Vos scripts se chargeront de manière asynchrone avec le reste de la page (le script sera exécuté tant que la page poursuivra l’analyse) et n’aura pas une grande influence sur la vitesse globale. Mais rappelez-vous que cela ne devrait être fait que pour les scripts qui ne sont pas requis pour le chargement initial de la page.

En parlant de feuilles de style, il est agréable de diviser vos styles en différents fichiers et d’ajouter un attribut média à chaque lien de feuille de style. Si vous faites cela, le navigateur ne bloquera que la première peinture pour récupérer les feuilles de style correspondant au périphérique de l’utilisateur.

13) Utiliser les formats vidéo pour le contenu animé
Croyez-le ou non, mais les GIF animés peuvent prendre trop de place. C’est pourquoi, pour atteindre notre objectif ultime, qui consiste à charger vos pages Web à la vitesse de l’éclair, vous devez convertir une animation de format GIF en vidéo.

Comment optimiser?
Le moyen le plus rapide de convertir des fichiers GIF en vidéo consiste à utiliser l’outil ffmpeg. Une fois que vous avez installé l’outil, il vous suffit de télécharger vos fichiers GIF et de choisir le format vidéo que vous souhaitez convertir. Il est conseillé de choisir le MPEG-4 car il offre le support le plus large parmi les navigateurs.

Vous pouvez également essayer un nouveau format WebM développé par Google (tout comme WebP pour les images). La prise en charge de WebM par les navigateurs n’est pas aussi étendue que pour MPEG-4, mais elle reste très bonne en termes de caractéristiques de compression.

De plus, comme l’élément <video> vous permet de spécifier plusieurs éléments <source>, vous pouvez résoudre le problème en indiquant une préférence pour une source WebM que de nombreux navigateurs peuvent utiliser tout en utilisant une source MPEG-4 que tous les autres navigateurs peuvent comprendre. .