1) Redirection de page de destination
Je suppose qu’il va sans dire que l’élimination de toutes les redirections inutiles est l’une des choses les plus évidentes que vous puissiez faire pour la vitesse de votre site. Le fait est que chaque redirection supplémentaire ralentit le temps de rendu de la page, car chaque redirection en ajoute une (si vous avez de la chance) ou plusieurs (ce qui se produit plus souvent) des allers-retours requêtes-réponses HTTP.
Passer au design réactif
La toute première chose que Google recommande pour gérer les redirections inutiles est de passer à une conception adaptative. Ainsi, vous évitez les redirections inutiles entre les versions de bureau, de tablette et mobile de votre site Web, tout en offrant aux utilisateurs une expérience multi-appareils exceptionnelle.
Choisissez un type de redirection approprié
Bien entendu, la meilleure pratique consiste à ne pas utiliser les redirections complètement. Cependant, si vous avez désespérément besoin d’en utiliser un, il est crucial de choisir le bon type de redirection. Il est sûrement préférable d’utiliser une redirection 301 pour une redirection permanente. Mais si, par exemple, vous êtes disposé à rediriger les utilisateurs vers des pages promotionnelles à court terme ou des URL spécifiques à des appareils, les redirections 302 temporaires sont la meilleure option.
Il convient également de mentionner que Googlebot peut désormais traiter les implémentations de redirection HTTP et JavaScript. En ce qui concerne les redirections HTTP, elles peuvent provoquer une certaine latence côté serveur. Toutefois, en ce qui concerne les redirections JavaScript, veuillez noter qu’une latence peut se produire du côté client de la redirection. Cela se produit car une certaine page doit d’abord être téléchargée, puis JavaScript doit être analysé et exécuté, et ce n’est qu’après cela qu’une redirection sera déclenchée. L’un des moyens possibles pour implémenter une redirection JavaScript consiste à exécuter les requêtes multimédia déjà utilisées par votre site dans les annotations de liens de la page à l’aide de la fonction JavaScript matchMedia ().
Je tiens à souligner que Google ne donne aucune recommandation particulière à ce sujet. Ainsi, lors du choix d’une stratégie de redirection, vos utilisateurs doivent être pris en compte en premier. Ils ne pourront tout simplement pas voir votre contenu génial si vos redirections sont incohérentes ou si elles pointent vers un contenu erroné sur le site Web ou le site mobile. Et bien sûr, en réduisant le nombre de redirections, vous pouvez considérablement améliorer les performances de votre site Web en termes de vitesse.
2) taille de l’image
Qu’on le veuille ou non, mais en moyenne, les images représentent environ 80% des octets nécessaires au chargement d’une page Web. Et comme ils sont responsables d’une telle charge pour un site Web moyen, il est important de vous assurer que vous n’envoyez pas d’énormes images surdimensionnées à vos utilisateurs. En fait, cela se produit très souvent, car différents appareils ont besoin d’images de différentes tailles pour les afficher correctement (généralement, plus l’écran est petit, plus l’image dont vous avez besoin est petite). Par conséquent, l’une des « erreurs » les plus répandues consiste à envoyer de grandes images à de plus petits appareils. Par conséquent, si votre page contient des images plus grandes que la version affichée à l’écran de vos utilisateurs, le temps de chargement de la page ralentira considérablement.
Selon la recommandation officielle de Google, la meilleure pratique consiste à implémenter des « images réactives ». En gros, cela signifie que vous pouvez générer différentes versions de chaque image pour qu’elle s’adapte parfaitement à toutes les tailles d’écran. Certes, vous pouvez spécifier la version à utiliser dans votre code HTML ou CSS à l’aide de requêtes multimédia, de dimensions de fenêtre, etc. Au fait, voici un bon outil qui vous aidera à générer des images de différentes tailles.
En résumé, lors de la demande d’une image, le navigateur annonce les dimensions de la fenêtre et le rapport de pixels de son appareil, tandis que le serveur s’occupe de produire des images correctement dimensionnées. Consultez ces instructions pas à pas sur la mise en œuvre des indicateurs client pour voir comment procéder.
Par ailleurs, la mise en œuvre de formats d’image vectoriels tels que SVG est également une option intéressante. Comme vous le savez peut-être, les images SVG peuvent être redimensionnées à n’importe quelle taille, ce qui rend le format extrêmement pratique: les images seront redimensionnées en temps réel directement dans un navigateur.
3) Reporter le CSS non utilisé
Les CSS non utilisés peuvent également ralentir la construction de l’arbre de rendu par un navigateur. En réalité, un navigateur doit parcourir l’ensemble de l’arborescence DOM et vérifier quelles règles CSS s’appliquent à chaque nœud. Par conséquent, plus le nombre de CSS non utilisées est important, plus le navigateur aura besoin de temps pour calculer les styles de chaque nœud.
Juste avant de vous lancer dans la minification des fichiers CSS, vous devez en rechercher certains dont vous n’avez plus besoin et les supprimer sans regret. N’oubliez pas que la ressource la mieux optimisée est celle qui n’est pas envoyée.
Une fois que vous avez effacé votre code CSS, il est important d’optimiser le reste des règles CSS (réduisez le code inutile, divisez les fichiers CSS, réduisez les espaces, etc.).
C’est également une très bonne idée d’intégrer des ressources CSS critiques de petite taille directement dans le document HTML. Voici comment vous pouvez éliminer les requêtes HTTP supplémentaires. Toutefois, veillez à ne le faire qu’avec de petits fichiers CSS, car l’alignement de fichiers CSS volumineux peut ralentir le rendu HTML