Comment optimiser votre site Web pour la vitesse de chargement des pages mobiles

Comment augmenter la vitesse de chargement des pages en 7 étapes : conseils pour un site Web plus rapide

Si les consignes pour les mobiles de Google mettent fortement l’accent sur la conception adaptée aux mobiles et la facilité d’utilisation, la vitesse du site est également importante pour le référencement, et ce pour plusieurs raisons. La vitesse des pages fait partie des indicateurs Web essentiels de Google, qui sont des facteurs de classement essentiels permettant de mesurer l’expérience utilisateur sur votre site Web.

Google dispose d’un temps limité pour crawler chaque site. En accélérant le chargement des pages, vous incitez Google à crawler davantage de pages Web. Cela signifie qu’en améliorant le temps de chargement de vos pages, vous favorisez la découverte et l’indexation plus rapides des nouvelles pages et du nouveau contenu, ainsi que le crawling complet des pages les plus profondes sur votre site.

Même si votre classement reste identique page par page, le nombre total de pages pouvant être classées augmente, ce qui a souvent un impact sur le trafic organique global, en particulier pour les termes à longue traîne.

Outre les considérations relatives au crawl budget, la vitesse et le temps de réponse de votre site mobile ont également un impact du point de vue de l’utilisateur réel, qui se traduit souvent par des taux de rebond élevés. En fin de compte, un site Web lent incite les gens à le quitter.

Lorsque vous optimisez le chargement et les performances de votre site Web mobile, vous devez toujours tenir compte du pire scénario de chargement sur ces appareils, plutôt que de toute autre mesure de performance du site.

Effectuez un test de vitesse de votre site Web et optimisez ses performances afin de garantir à autant d’utilisateurs mobiles que possible un chargement rapide des pages. Même si les réseaux mobiles deviennent de plus en plus rapides, l’idéal est de charger une page en moins de 3 secondes, voire en moins d’une ou deux secondes selon les recommandations de Google.

Mais les navigateurs mobiles analysent et chargent les pages différemment des navigateurs de bureau. En termes simples, les navigateurs de bureau sont plus performants pour charger des pages comportant de nombreuses petites requêtes, tandis que les navigateurs mobiles sont plus performants pour charger des pages comportant moins de requêtes, mais mieux organisées, même si elles sont légèrement plus volumineuses.

Le nombre d’éléments qui doivent être récupérés depuis le serveur pour charger une page est appelé « requêtes aller-retour » ou « RTR ». Une grande partie de l’optimisation et de l’amélioration de la vitesse de chargement des pages mobiles consiste à réduire au maximum les RTR.

Vous pouvez considérer les RTR comme des allers-retours à l’épicerie pour acheter les ingrédients nécessaires à la réalisation d’une recette. Si vous avez besoin de 4 oignons, vous ne voulez pas faire un trajet séparé pour chacun d’entre eux. Il vaut mieux les acheter tous en même temps, et ce serait encore mieux si vous pouviez acheter les 4 oignons et certains des autres ingrédients lors du même trajet. Si les 4 oignons étaient conditionnés avec d’autres ingrédients tels que les poivrons, les champignons et le céleri, tous nécessaires à la recette, ce serait idéal.

Voici quelques recommandations pour optimiser la vitesse de vos sites mobiles :

1. Identifier les pages présentant un RTR excessif.

La réduction des RTR commence par la prise de conscience. De nombreuses pages comptent plus de 100 RTR, alors que vous devriez vous efforcer d’en avoir moins de 50.

Souvent, les développeurs ou les professionnels du référencement qui examinent toutes les requêtes d’une page constatent que certains des éléments demandés sont manquants (404) et que personne ne l’a remarqué. Même s’ils sont manquants, le navigateur met du temps à les demander et à revenir bredouille. Ces pages doivent donc être supprimées ou corrigées immédiatement.

Vous devez également corriger les ressources qui ont été déplacées et qui renvoient une réponse 301 ou 302. Ces réponses signifient que le navigateur a dû se rendre à un endroit, puis suivre une autre série d’instructions pour se rendre à un autre endroit afin d’obtenir la ressource, mais chaque nouvel emplacement prend plus de temps.

C’est comme aller dans une épicerie et apprendre qu’ils n’ont pas ce dont vous avez besoin, mais que vous pouvez l’obtenir dans un autre magasin plus loin dans la rue. Pire encore, s’il y a une succession de redirections, c’est comme aller dans le deuxième magasin pour découvrir qu’ils ont également arrêté de vendre cet article, et vous devez alors essayer une troisième boutique.

2. Regrouper les fichiers lorsque cela est possible.

La prochaine étape pour optimiser un site Web consiste à combiner les fichiers (comme JavaScript et CSS) lorsque cela est possible. Par exemple, si une page utilise 10 feuilles de style (fichiers CSS) qui pourraient toutes être combinées en une seule, vous devriez le faire. De même, si vous utilisez plusieurs fichiers JavaScript qui pourraient être combinés en un seul, faites-le également.

Essayez de penser à l’échelle du site et en fonction des modèles. Vous devriez avoir un fichier JavaScript pour l’ensemble du site, qui se trouve sur toutes les pages, et un fichier JavaScript spécifique à chaque modèle de page du site. Vous pouvez faire la même chose avec les fichiers CSS. Veillez également à ce que ces fichiers soient toujours référencés avec le même nom et le même emplacement, ce qui facilitera leur mise en cache.

3. Optimiser l’ordre d’affichage.

Après avoir éliminé les éléments inutiles et regroupé les autres afin de réduire le nombre total de RTR, vous pouvez ensuite ajuster l’ordre dans lequel ils sont demandés afin d’accélérer le processus.

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 à l’univers du Web, la marinade est comme un bloqueur de rendu, car rien d’autre ne peut se passer pendant la cuisson tant qu’elle n’est pas terminée. Vous ne pouvez préparer les étapes suivantes de la cuisson qu’en rassemblant les ingrédients pendant que la marinade fait son œuvre.

Cela s’apparente au rendu par chemin critique, dans lequel vous donnez la priorité aux éléments essentiels, tels que la balise d’en-tête, le contenu de la page et la mise en page de base, et reportez les éléments moins importants, en particulier s’ils risquent de ralentir le chargement des éléments essentiels. Cela peut considérablement améliorer l’expérience de chargement des utilisateurs et leur donner l’assurance que le reste de la page s’affichera rapidement. Cela leur permet également de commencer à évaluer le contenu pendant le chargement.

4. Créer une stratégie de chargement des pages.

Comme les moteurs de recherche imitent les utilisateurs humains, ils explorent les pages de la même manière que vous. La meilleure chose à faire pour classer les demandes en fonction de la vitesse du site est de savoir 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 d’en-tête et du texte et des images de la page. En général, les utilisateurs prennent quelques secondes pour interagir avec les éléments dynamiques d’un site. La plupart des scripts JavaScript n’ont donc pas besoin d’être chargés immédiatement.

Au lieu de cela, des représentations visuelles du JavaScript, telles que des encadrés ou des boutons d’agrandissement, peuvent être chargées à titre de substituts avant que le JavaScript ne soit nécessaire. Les scripts sont particulièrement lents et lourds à charger. Pour éviter que le processus ne ralentisse trop l’expérience utilisateur et que ces derniers et les robots se retrouvent face à une page blanche pendant un long moment, l’idéal est d’afficher un contenu consultable temporairement, puis de charger le JavaScript en arrière-plan.

Après JavaScript, les vidéos et les images sont les éléments les plus lents à charger. Celles situées en bas de la page ne doivent pas gêner l’expérience du haut de la page, où les utilisateurs et les robots commencent généralement leur navigation. Ce concept qui consiste à retarder le chargement du contenu non visible s’appelle « chargement différé ». Il peut être mis en œuvre de différentes manières (retardé, asynchrone et balise méta de chargement différé de Google).

Le meilleur outil pour trouver des opportunités de chargement différé des images est Google PageSpeed Insights. Pour optimiser les images, vous pouvez également utiliser la balise d’image à chargement différé de Google, mais pour l’instant, celle-ci n’est prise en charge que par les navigateurs Chrome mobile et Chrome pour ordinateur (ceci pourrait toutefois évoluer à l’avenir). Quelle que soit la méthode utilisée, vous devez utiliser l’outil d’inspection d’URL de site Web dans Google Search Console pour vérifier que les éléments chargés de manière différée sont visibles lors du rendu de la page dans l’outil et dans le code HTML traité.

5. Compresser tout ce que vous pouvez.

Après avoir réduit et classé par ordre de priorité le RTR de chaque modèle de page, vous devez compresser tout ce qui peut l’être. Ce traitement permet d’augmenter la vitesse des pages en économisant de la bande passante. La compression Gzip est un moyen populaire d’y parvenir. Elle peut être configurée sur la plupart des serveurs, mais d’autres options sont disponibles.

Vous pouvez également soumettre la plupart du code à un processus de minification, qui réduit la taille du fichier final transféré. Cependant, il est difficile de compresser des images à l’aide de ces méthodes. Vous pouvez utiliser la page Performance Review (Évaluation des performances) sur WebPageTest.org pour trouver la liste de contrôle Full Optimization Checklist (Optimisation complète), qui répertorie tous les éléments de la page, indique s’ils sont compressés au format gzip et précise leur niveau de compression.

En ce qui concerne les images, au lieu de les zipper et de les réduire, il est important que le concepteur les transmette au développeur dans le format le plus compressé possible, afin de réduire la taille des fichiers. En substance, il s’agit de réduire autant que possible la taille du fichier final sans compromettre l’apparence de l’image.

Les photos doivent généralement être enregistrées au format JPG et les icônes et illustrations au format GIF. Pour que les images volumineuses s’affichent correctement sur les écrans larges des ordinateurs sans ralentir les petits écrans mobiles, pensez à utiliser le protocole d’images réactives ou un serveur d’images tel que celui proposé par Fastly afin d’envoyer dynamiquement une version prédimensionnée de l’image aux écrans plus petits.

6. Mettre 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 configurée de différentes manières, notamment via les CDN (réseaux de diffusion de contenu).

La plupart des éléments d’un site, en particulier ceux qui ne changent pas plus d’une fois par semaine ou qui ne partagent pas d’informations en temps réel telles que les actualités, la météo ou les résultats sportifs, peuvent être mis en cache pendant un an. La mise en cache signifie que lorsque les utilisateurs visitent une page, les navigateurs recherchent localement dans leur mémoire s’ils disposent déjà d’un fichier nécessaire à l’affichage de la page.

Cela permet d’éviter les requêtes aller-retour et d’améliorer le temps de chargement. Les robots des moteurs de recherche considèrent 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 détecter le processus et l’utiliser pour estimer le temps de chargement.

Il est important de comprendre que la mise en cache repose sur les noms de fichiers et leur emplacement sur le serveur. Ainsi, si vous utilisez un fichier sur plusieurs pages, comme un logo, renvoyez-y toujours 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 de cache peuvent être un peu compliqués, donc le mieux est de les considérer comme des aliments qui peuvent périmer. Certains produits ont une durée de conservation plus courte que d’autres, vous devez donc indiquer au navigateur quels éléments doivent être supprimés rapidement et lesquels peuvent être conservés sans risque pendant un certain temps, sans être remplacés.

Vous pouvez utiliser un outil tel que WebPageTest.org pour vous aider à comprendre où se trouvent les opportunités. Il est important de comprendre ici qu’il n’y a pas de date d’expiration ni de durée maximale d’existence de l’élément dans le cache. Par conséquent, le navigateur supposera simplement qu’il doit être récupéré à chaque fois. La mise en cache du navigateur ne peut avoir lieu que si ces détails sont spécifiés.

Étant donné que les paramètres de cache indiquent au navigateur quand un élément est trop ancien pour être utilisé, on parle parfois de « durée de mise en cache » ou de « durée de fraîcheur ». Si un élément a dépassé sa durée de fraîcheur ou sa durée de mise en cache, il faut effectuer un aller-retour vers le serveur pour obtenir une version actualisée. Si des éléments sont répertoriés comme « expirés », cela signifie qu’ils ont dépassé leur durée de fraîcheur et, dans les analogies avec l’épicerie et le navigateur, ils doivent être remplacés la prochaine fois qu’ils sont nécessaires.

De la même manière qu’il n’est pas utile d’avoir des étagères remplies de produits alimentaires périmés, il n’est pas utile d’avoir un cache rempli de contenu Web obsolète. À l’inverse, il est également inefficace de jeter des produits alimentaires (fichiers) qui sont encore parfaitement utilisables. Lorsque vous attribuez une durée de vie à vos fichiers dans le cache, il est utile de réfléchir à cela et de prendre également en compte les conséquences d’une durée de vie trop généreuse.

Si vous apportez une modification mineure à votre logo, ce n’est pas grave si l’ancien logo reste affiché. Vous pouvez donc conserver cette durée de mise en cache, surtout si vous prévoyez de mettre à jour régulièrement les noms de fichiers lorsque vous apportez des modifications. Avec des noms de fichiers différents, vous n’avez pas à craindre que l’ancien logo s’affiche.

7. Créer des pages mobiles accélérées (AMP).

Tout cela peut sembler compliqué, c’est pourquoi Google a créé une solution plus simple pour optimiser la vitesse des pages. Accelerated Mobile Pages, ou AMP, est un sous-ensemble du langage HTML qui suit des directives beaucoup plus strictes concernant les éléments pouvant être inclus. L’objectif est d’obtenir un temps de chargement d’une seconde pour la plupart des pages sur mobile, ce qui est généralement le cas. AMP permet à Google de prendre en charge 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 y renvoient depuis des pages existantes du site à partir de la balise d’en-tête. Cela indique à Google de diffuser la page AMP lorsque la personne qui demande la page utilise un appareil mobile ou une connexion lente. Dans d’autres cas, vous pouvez remplacer leurs pages existantes (ou leurs pages mobiles existantes, si elles ont des sites distincts) par des pages AMP. C’est ce qu’on appelle « AMP canonique ».

Google préfère cette méthode, car les pages AMP sont extrêmement faciles à crawler, à afficher, à indexer et à classer pour la plateforme. Les entreprises peuvent toutefois ne pas l’apprécier, car les limitations et les exigences de l’AMP peuvent rendre les pages un peu austères. L’AMP peut également compliquer ou limiter certains des suivis et tests que vous pouvez effectuer sur les pages pour ordinateur, ce qui explique pourquoi certaines personnes l’évitent.

Les sites qui sont compatibles AMP respectent toutes les règles et directives AMP. Google affiche alors un petit éclair gris à côté de leur résultat dans les résultats mobiles. Google est plus susceptible de les inclure dans des carrousels de résultats spéciaux qui ont tendance à apparaître en haut d’une page.

C’est formidable, mais si la validation AMP cause trop de problèmes à votre site Web, vous pouvez utiliser le code AMP sans le valider. Utilisez le HTML AMP lorsque vous le pouvez, sans vous soucier de respecter toutes les règles. Vous bénéficierez toujours de la vitesse du HTML AMP et du JavaScript AMP, ce qui n’est pas négligeable étant donné que ces technologies sont gratuites.

N’oubliez pas que la vitesse a un impact direct sur l’engagement et la conversion, mais qu’elle contribue également à la profondeur du crawl et à d’autres aspects de l’efficacité du crawl.

Les navigateurs mobiles fonctionnent différemment des navigateurs de bureau. Ils disposent également de processeurs plus lents et de connexions moins fiables. Ces facteurs montrent qu’il est important d’examiner le temps de chargement des pages de votre site dans les conditions mobiles les plus défavorables afin de comprendre où se trouvent les réelles possibilités d’amélioration.

Écrit par Cindy Krum pour Mailchimp. Cindy est experte en fonctionnalités SEO mobiles.

---

Principaux points à retenir

• Des vitesses de page plus rapides améliorent le crawl budget de Google et permettent d’indexer davantage de pages de votre site, pour un meilleur trafic organique global.
• Les utilisateurs mobiles veulent que les pages se chargent en moins de 3 secondes, et les vitesses lentes entraînent des taux de rebond élevés qui nuisent à votre classement.
• Les navigateurs mobiles fonctionnent différemment des navigateurs de bureau. Il est donc essentiel de réduire le nombre de requêtes serveur pour optimiser la vitesse sur mobile.
• La vitesse des pages a une incidence directe sur les indicateurs Web Vitals de Google, qui sont désormais des facteurs de classement essentiels pour l’indexation mobile-first.

---