14) Préconnexion aux origines requises
En règle générale, l’établissement de connexions, en particulier sécurisées, prend beaucoup de temps. Le fait est que cela nécessite des recherches DNS, des ententes SSL, un échange de clé secrète et des allers-retours vers le serveur final responsable de la demande de l’utilisateur. Donc, pour gagner ce temps précieux, vous pouvez vous connecter à l’avance aux origines requises.
Comment optimiser?
Pour préconnecter votre site Web à une source tierce, il vous suffit d’ajouter une balise de lien à votre page. Voici à quoi ça ressemble:
<link rel = « preconnect » href = « https://example.com »>
Une fois que vous avez implémenté le tag, votre site Web n’aura plus besoin de passer plus de temps à établir une connexion avec le serveur requis, évitant ainsi aux utilisateurs d’attendre plusieurs allers-retours supplémentaires.
15) Servir des images dans les formats next-gen
Tous les formats d’image ne sont pas créés égaux. La vérité est que nos vieux formats fidèles JPEG et PNG ont maintenant des caractéristiques de compression et de qualité bien pires par rapport à JPEG 2000, JPEG XR et WebP. J’essaie donc de dire que le codage de vos images dans ces formats leur permettra de se charger plus rapidement et de consommer moins de données cellulaires.
Comment optimiser?
Tout comme pour les formats vidéo évoqués précédemment, vous devez vous assurer que vos images sont visibles par tous vos visiteurs. Cela peut être fait en utilisant l’élément <picture>, qui vous permet de lister plusieurs formats d’image alternatifs par ordre de priorité. Ainsi, même si le navigateur d’un utilisateur ne prend pas en charge un certain format, il peut passer au format spécifié suivant et afficher une image correctement.
16) Assurer la visibilité du texte pendant le chargement de la webfont
Tous les propriétaires de sites Web veulent se démarquer avec leurs polices super cool. Le seul inconvénient est que le chargement de ces polices peut prendre trop de temps. Si tel est le cas, le navigateur remplacera votre police par une police de secours (comme Arial ou Times New Roman, par exemple).
Comment optimiser?
Ce n’est pas tout à fait un conseil d’optimisation, mais si vous ne voulez pas que votre contenu soit affiché de manière incorrecte, vous devez vous assurer qu’il a l’air convenable avec des polices de secours de base telles que Arial ou Georgia (en particulier sur les appareils mobiles). Après cela, vous pouvez être sûr que les utilisateurs peuvent réellement lire votre contenu et votre page semble appropriée.
17) Minimiser le travail sur le fil principal
Lors du téléchargement d’une certaine page, votre navigateur effectue simultanément plusieurs tâches, telles que l’analyse et la compilation de scripts, le rendu, l’analyse HTML et CSS, la collecte de place, l’évaluation de scripts, etc.
Comment optimiser?
Parfois, il peut être assez difficile d’obtenir une ventilation de l’emplacement où le temps CPU a été passé à charger une page. Heureusement, avec l’aide de la nouvelle fonctionnalité d’audit de la discussion principale sur le travail principal de Lighthouse, vous pouvez maintenant voir clairement le nombre et le type d’activités qui se produisent pendant le chargement de la page. Cela vous aidera à comprendre les problèmes de performances de chargement liés à la mise en page, à l’évaluation de script, à l’analyse ou à toute autre activité.
18) Réduire le temps d’exécution de JavaScript
JavaScript est ce qui influence directement les performances de chargement de votre page. C’est pourquoi il est essentiel de réduire le temps nécessaire à l’analyse, la compilation et l’exécution de JavaScript.
Comment optimiser?
D’abord et avant tout, vous ne devez envoyer que le code dont vos utilisateurs ont besoin. Essayez de supprimer toutes les données redondantes telles que les commentaires de code et le code inutilisé. Après cela, réduisez autant que possible votre JavaScript et mettez-le en cache pour réduire les déplacements supplémentaires sur le réseau. Les développeurs avancés préfèreront peut-être utiliser des techniques plus complexes telles que le chargement paresseux, le tremblement d’arbre pour supprimer du code ou des fonctionnalités telles que le cache de code V8.
19) Implémentation d’une politique de cache
Lorsqu’un navigateur demande une ressource, le serveur qui fournit cette ressource peut le faire stocker par le navigateur pendant un certain temps. Donc, pour toutes les visites répétées, le navigateur utilisera une copie locale au lieu de la récupérer à partir de zéro.
Comment optimiser?
Pour contrôler automatiquement le temps et la durée de mise en cache de la réponse par le navigateur, utilisez cache-control.
Outre la mise en cache HTTP, la détermination de la durée de vie optimale des scripts (max-age) et la fourniture de jetons de validation (ETag), n’oubliez pas la mise en cache Service Worker, y compris la mise en cache du code V8 susmentionnée.
20) Éviter une taille excessive de DOM
Une arborescence DOM trop volumineuse avec des règles de style compliquées peut avoir un impact négatif sur la vitesse, l’exécution et les performances de la mémoire. La meilleure pratique consiste à avoir une arborescence DOM (moins de 1 500 nœuds au total), une profondeur maximale de 32 nœuds et aucun nœud parent avec plus de 60 nœuds enfants.
Comment optimiser?
Une très bonne pratique consiste à supprimer les nœuds DOM dont vous n’avez plus besoin. Pour ce faire, envisagez de supprimer les nœuds qui ne sont pas affichés du document chargé et essayez de les créer uniquement après qu’un utilisateur a fait défiler une page ou appuyé sur un bouton.
21) Minimiser la profondeur des requêtes critiques
La chaîne de demandes critiques fait partie de la stratégie de chemin de rendu critique (CRP) dont l’idée principale est de hiérarchiser le chargement de certaines ressources et de modifier leur ordre de chargement. Même si la chaîne de demandes critiques est conçue pour télécharger les ressources les plus importantes, elles peuvent quand même être réduites à zéro.
Comment optimiser?
Malheureusement, il n’y a pas de conseil unique pour réduire au minimum la profondeur des demandes critiques pour votre site (comme pour bon nombre des facteurs énumérés ci-dessus). Cependant, il est toujours bon de minimiser la longueur de vos chaînes, de réduire la taille des ressources téléchargées et, comme toujours, de différer le téléchargement de ressources inutiles.
22) Marques et mesures de chronométrage de l’utilisateur
Comme je l’ai déjà mentionné, très souvent, les problèmes de JavaScript sont à l’origine du lent chargement des pages. Et très souvent, les développeurs ont du mal à trouver le point faible exact dans leurs scripts Java. Heureusement, avec l’API User Timing, ce n’est plus un problème. Ce service a pour objectif principal de mesurer les performances JavaScript de votre application afin que vous sachiez quelles parties de vos scripts sont en retard et nécessitent une optimisation.
Comment optimiser?
Pour mesurer les performances de votre application, tout ce que vous avez à faire est d’utiliser JavaScript pour accéder aux résultats à l’aide de l’API. Après avoir identifié les domaines à améliorer, allez-y et corrigez-les. Voici un guide pratique pour vous familiariser avec l’API de synchronisation utilisateur.
Conclusion
Je sais que ce fut un long article rempli de tonnes de trucs techniques. Cependant, je recommanderais toujours fortement de prendre très au sérieux le côté technique de l’optimisation de la vitesse des pages, car c’est ce qui influence le plus votre score de vitesse. De plus, vous devriez garder un œil sur les mesures réelles de CrUX. Parce que même si vous avez un score de 100 vitesses, votre page Web peut sembler lente aux utilisateurs en raison d’une mauvaise connexion Internet ou d’anciens appareils.
