1. Identifiez les pages qui ont des RTR trop importants.
La minimisation des RTR commence par la sensibilisation. De nombreuses pages contiennent plus de 100 RTR par page, alors que ce chiffre devrait être inférieur à 50. Souvent, les développeurs ou les experts en SEO qui examinent toutes les demandes sur une page remarquent que certains des éléments demandés présentent le code d'erreur 404 indiquant qu'une page n'existe pas, et personne ne l'a remarqué. Même si ces pages sont manquantes, le navigateur prend toujours le temps de soumettre une demande et de générer un résultat vide, de sorte que ces pages devraient être supprimées ou corrigées immédiatement.
Vous devez également corriger les actifs qui ont été déplacés et qui génèrent des codes 301 ou 302. Ces réponses signifient que le navigateur doit se rendre à un endroit, puis suivre un autre ensemble d'instructions pour aller dans un autre endroit afin d'obtenir l'actif, chaque nouvel emplacement prenant plus de temps. C'est comme entrer dans une épicerie, pour être informé que le produit que vous cherchez n'est pas disponible, mais que vous pouvez l'obtenir dans un autre magasin. Pire encore, s'il y a une chaîne de redirections, c'est comme si vous vous rendiez dans la deuxième épicerie pour découvrir qu'ils n'ont pas non plus votre produit, et que vous devez vous rendre dans un troisième magasin.
2. Combiner des fichiers lorsque c'est possible.
L'étape suivante pour un site Web optimisé consiste à combiner des fichiers (comme Javascript et CSS) où vous le pouvez. Par exemple, si une page utilise 10 feuilles de styles (fichiers CSS) qui pourraient être combinés en une seule feuille, vous devriez le faire immédiatement. De même, si vous utilisez une variété de fichiers Javascript qui pourraient être combinés en un seul fichier, vous devriez le faire également. Songez à utiliser des éléments dans l'ensemble du site et propres à un modèle précis. Vous devriez avoir un fichier JavaScript pour l'ensemble du site afin que JavaScript soit présent sur chaque page du site, et un fichier JavaScript spécifique à chaque modèle de page du site. Il en est de même pour le CSS. En veillant à ce que ces fichiers soient toujours référencés avec le même nom de fichier et le même emplacement, il sera également plus facile de les mettre en cache correctement.
3. Optimiser l'ordre de rendu.
Une fois que vous aurez supprimé et consolidé les fichiers pour diminuer le nombre total de RTR, la prochaine étape consiste à ajuster l'ordre dans lequel les éléments sont demandés pour rendre votre site plus rapide. De la même manière que chaque étape d'une recette doit être terminée avant d'entamer la prochaine, il existe un certain ordre qu'un navigateur mobile doit suivre et qui doit être respecté lorsque vous créez une page. Pour reprendre l'exemple de l'épicerie, si votre recette prévoit de faire mariner un produit pendant deux jours, il est important d'acheter d'abord les éléments nécessaires à la marinade, afin qu'elle puisse commencer pendant que vous achetez le reste des ingrédients, plutôt qu'après.
Si l'on transpose cette analogie dans le domaine du web, la marinade est comme un bloqueur de rendu, car aucune autre action ne peut être terminée dans le processus de cuisson avant qu'elle ne soit terminée. Vous pouvez seulement préparer les prochaines étapes du processus de cuisson en vous procurant les ingrédients pendant la marinade. C'est comme un rendu de chemin stratégique, dans lequel vous priorisez les éléments essentiels, comme le titre de l'en-tête, le contenu de la page et la mise en page de base, et reportez les éléments moins importants, surtout s'ils retardent le chargement d'éléments plus importants. Cette mesure peut radicalement améliorer l'expérience de chargement pour les utilisateurs, et leur donner la certitude que le reste de la page se chargera rapidement. En outre, cela leur fournit des éléments à évaluer pendant que le processus de chargement s'effectue.
4. Créer une stratégie pour le chargement des pages.
Comme les moteurs de recherche reproduisent les utilisateurs humains, ils perçoivent les pages de la même manière que vous. La meilleure chose que vous puissiez faire pour augmenter la vitesse est de connaître ce qui est essentiel pour l'expérience de l'utilisateur et du robot dans les premières secondes où ils accèdent à la page. Il s'agit généralement des informations contenues dans la balise "head" ainsi que dans le texte et les images de la page. En général, les internautes prennent quelques secondes pour s'engager dans tout ce qui est interactif sur le site, de sorte que la plupart des JavaScript n'ont pas besoin d'être chargés au départ. En revanche, des représentations visuelles du JavaScript, telles que des cases plus ou des "expanseurs", peuvent être chargées en tant que substituts avant que JavaScript ne soit nécessaire. Javascript est particulièrement lent et fastidieux à charger. Pour s'assurer que le chargement de JavaScript ne ralentisse pas l'expérience au point que les utilisateurs et les robots restent longtemps devant une page blanche, l'idéal est de charger un élément que les utilisateurs pourront regarder, puis de charger JavaScript en arrière-plan, pendant que les utilisateurs regardent la page.
Après Javascript, les vidéos et les images constituent l'élément le plus lent à charger. Les vidéos et les images situées en bas de la page ne doivent pas entraver l'expérience en haut de la page, là où les utilisateurs et les robots commencent généralement leur visite. Ce concept, qui consiste à retarder le chargement du contenu qui n'est pas visible, est appelé "lazy-loading" (chargement lent). Le lazy loading peut être réalisé de différentes manières (différé, asynchrone et métabalise).
Le meilleur outil à utiliser pour trouver les possibilités de chargement lent des images est Google PageSpeed Insights. Pour optimiser les images, vous pouvez également utiliser les balises de chargement lent de Google, mais jusqu'à présent, cette méthode est respectée uniquement dans les navigateurs mobiles et de bureau Chrome (bien que cela puisse être élargi à l'avenir). Quelle que soit la méthode utilisée, vous devez utiliser l'outil d'inspection des URL dans Google Search Console pour vous assurer que les éléments à chargement lent sont visibles dans le rendu de page de l'outil et dans le HTML généré.
5. Compressez tout ce que vous pouvez.
Après avoir minimisé et hiérarchisé le RTR pour chaque modèle de page, vous devez compresser ce que vous pouvez. La compression permet d'augmenter la vitesse des pages en économisant la bande passante. La compression Gzip est une bonne façon de compresser les fichiers, et elle peut être configurée sur la plupart des serveurs, mais d'autres options sont disponibles. Vous pouvez également soumettre la majeure partie du code à un processus de minification, qui réduit la taille du fichier de transfert final. Cependant, il est difficile de compresser les images en utilisant ces méthodes. Vous pouvez utiliser la page d'évaluation des performances sur WebPageTest.org pour trouver la liste de contrôle de l'optimisation complète, qui indique tous les actifs de la page, s'ils sont "gzippés" et leur niveau de compression.
Pour la compression d'images, au lieu de gzipper et de minimiser vos images, il est important que le concepteur les remette au développeur dans le format le plus compressé possible, pour ainsi réduire les fichiers d'images. En fait, ils doivent faire en sorte que la taille du fichier final soit la plus petite possible sans compromettre l'apparence de l'image. Les photos doivent généralement être enregistrées sous forme de fichiers JPG et les icônes et les illustrations sous forme de fichiers GIF. Pour que les grandes images s'affichent de façon appropriée sur les ordinateurs en plein écran, sans encombrer les petits écrans mobiles, songez à utiliser le protocole d'images réactives ou d'utiliser un serveur d'images comme celui de Fastly pour envoyer dynamiquement une version prédimensionnée de l'image sur les petits écrans.
6. Mettez en cache les bonnes pages au bon moment.
L'étape suivante consiste à aider les navigateurs et les robots à identifier ce qui peut être réutilisé et ce qui doit être récupéré à chaque fois grâce à la mise en cache du navigateur, une fonctionnalité qui peut être paramétrée de différentes manières, notamment par l'intermédiaire des CDN (content delivery network). La plupart des éléments d'un site, en particulier un site qui ne change pas plus d'une fois par semaine ou qui partage des informations en temps réel comme les nouvelles, la météo ou les résultats sportifs, peuvent mettre en cache la plupart des éléments de leurs pages pendant un an. La mise en cache signifie que lorsque les utilisateurs visitent une page, les navigateurs recherchent localement dans leur mémoire pour voir s'ils ne possèdent pas déjà un fichier nécessaire à la construction de la page. Cette méthode permet d'éviter les demandes d'aller-retour et d'améliorer le temps de chargement. Les robots des moteurs de recherche voient toujours une page comme s'ils ne l'avaient jamais vue auparavant. Ils n'utilisent donc pas de mise en cache active, mais ils peuvent percevoir le moment où la mise en cache est en cours et s'en servir pour estimer le temps de chargement d'une page.
Ce qu'il faut comprendre de la mise en cache, c'est qu'elle est basée sur les noms de fichiers et leur emplacement sur le serveur. Ainsi, si vous utilisez un fichier sur plusieurs pages, comme un logo, il faut toujours le référencer avec le même nom de fichier et la même URL, même s'il existe à plusieurs endroits sur votre serveur. Ce processus peut être utilisé à votre avantage, car cela signifie qu'il vous suffit de mettre à jour le nom de fichier d'un élément et sa référence dans le HTML pour obtenir une nouvelle version de l'élément mis en cache. Par exemple, si vous apportez une modification à votre logo, en remplaçant simplement le nom du fichier "logo" par "logov2", la nouvelle version sera mise en cache et l'ancienne version sera oubliée. Ainsi, lorsque vous autorisez la mise en mémoire cache d'un élément pendant un an, cela ne signifie pas que vous ne le modifierez pas au cours de l'année, mais que si vous le faites, vous ferez référence à l'élément mis à jour ou nouveau avec un nouveau nom de fichier.
Les paramètres du cache peuvent être un peu compliqués, par conséquent, la meilleure chose à faire est de les considérer comme de la nourriture qui peut expirer. Certains aliments se périment plus rapidement que d'autres. Vous devez donc faire savoir au navigateur quels sont les produits qui vieillissent et qui doivent être jetés rapidement, et ceux qui peuvent rester sur les étagères pendant un certain temps sans être remplacés. Vous pouvez utiliser un outil comme WebPageTest.org pour vous aider à dénicher les opportunités. Ce qu'il faut retenir, c'est qu'il n'y a pas de date d'expiration fixée, ni d'âge maximal pour l'existence de l'élément dans le cache. Par conséquent, le navigateur supposera simplement qu'il doit être récupéré fraîchement à chaque fois, la mise en cache du navigateur ne peut pas se produire si ces détails ne sont pas spécifiés.
Comme les paramètres de la mémoire cache indiquent au navigateur quand un élément est trop vieux pour être utilisé, on parle parfois de "durée de vie de la mémoire cache" ou de "durée de vie de la fraîcheur". Si un élément a dépassé sa durée de fraîcheur ou de mise en cache, un aller-retour vers le serveur doit être effectué pour obtenir une nouvelle version. Si des articles sont répertoriés comme "périmés", cela signifie qu'ils ont dépassé leur durée de vie et qu'ils doivent être remplacés la prochaine fois qu'ils seront requis.
De la même manière qu'il n'est pas utile d'avoir des étagères remplies de produits d'épicerie périmés, il n'est pas utile d'avoir un cache rempli de contenu web périmé. En revanche, il est également inefficace de jeter des e-mails (fichiers) qui sont toujours utiles. Lorsque vous attribuez des durées de vie de mise en cache à vos fichiers, il est utile d'y penser, et aussi de considérer les conséquences d'être généreux s'agissant de la durée de vie de mise en cache. Si vous apportez une modification mineure à votre logo, ce ne sera pas la fin du monde si l'ancien logo est toujours affiché. Vous pouvez donc conserver cette mise en cache pendant longtemps, surtout si vous prévoyez de mettre à jour les noms de fichiers lorsque vous apportez des modifications. Avec des noms de fichiers différents, il n'y a aucun risque que vous fassiez apparaître l'ancien logo.
7. Créer des pages mobiles accélérées (AMP).
Tout cela peut sembler compliqué, et c'est pourquoi Google a créé une solution plus simple pour optimiser la vitesse de chargement des pages. Accelerated Mobile Pages, ou AMP, est un sous-ensemble du HTML qui suit des directives beaucoup plus strictes quant à ce qui peut être inclus. L'objectif consiste à ramener le temps de chargement de la plupart des pages à une seconde sur les appareils mobiles, ce qui est généralement le cas. AMP permet à Google de prendre le contrôle de la plupart des tâches difficiles en mettant en cache et en configurant le processus de chargement et la plupart des éléments décrits ci-dessus afin qu'il soit aussi optimisé que possible.
Dans certains cas, les entreprises créent de nouvelles pages AMP et établissent un lien vers celles-ci à partir des pages existantes du site, soit à partir de la balise "head". Cela indique à Google de servir la page AMP lorsque la personne qui demande la page est sur un appareil mobile ou utilise une connexion lente. Dans d'autres cas, vous pouvez remplacer leurs pages existantes (ou leurs pages mobiles existantes, s'ils ont des sites distincts) par des pages AMP. Ce processus s'appelle "Canonical AMP" ou "AMP canonical". Google préfère cette méthode, car les pages AMP sont extrêmement faciles à explorer, à rendre, à indexer et à classer pour Google. Les entreprises ne préfèrent pas forcément cette méthode, car les limites et les exigences d'AMP peuvent rendre les pages un peu austères. AMP peut également compliquer ou limiter certains des suivis et des tests que vous pouvez faire sur les pages de bureau, c'est donc une autre raison pour laquelle certaines personnes l'évitent.
Les sites qui sont valides pour AMP suivent toutes les règles et directives AMP, et à leur tour, Google leur fait apparaître un petit éclair gris dans les résultats mobiles. Google est plus susceptible de les inclure dans des carrousels spéciaux de résultats qui ont tendance à figurer en haut de page. Si la validation AMP pose trop de problèmes à votre site Web, vous pouvez utiliser le code AMP sans le valider. Il est recommandé d'utiliser AMP HTML quand vous le pouvez, sans vous soucier de suivre toutes les règles. Vous bénéficierez tout de même de la vitesse d'AMP HTML et d'AMP JavaScript, ce qui n'est pas une mauvaise affaire si l'on considère le fait qu'ils sont gratuits. N'oubliez pas que la vitesse a un impact direct sur l'engagement et la conversion, mais qu'elle contribue probablement aussi à l'exploration en profondeur et à d'autres aspects de l'efficacité de l'exploration.
Les navigateurs mobiles fonctionnent différemment des navigateurs de bureau. Ils ont également des processeurs plus lents et des connexions moins fiables. Ces facteurs rendent nécessaire l'examen du temps de chargement des pages de votre site dans la pire perspective mobile afin de comprendre où se trouvent les réelles possibilités d'amélioration.