Vous avez probablement reçu des notifications de Google indiquant que votre site est désormais soumis à l’indexation « mobile-first ». Mais qu’est-ce que ce jargon SEO signifie pour vous en tant que marketeur ? Dans le paysage actuel du référencement, de plus en plus de recherches sont effectuées sur des appareils mobiles. Par conséquent, un classement basé sur la version de bureau d’un site ne fournit pas les résultats les plus pertinents ou les plus utiles. Dans cet article, nous allons vous expliquer comment savoir si votre site web est optimisé pour une navigation rapide. Mais, surtout, nous allons vous expliquer quelques techniques afin que vos pages web se chargent le plus rapidement possible.
Comment le temps de chargement de page devient un facteur important dans l’indexation Mobile-First
Le temps de chargement des pages est l’un des principaux indicateurs utilisés par Google pour classer un site. Et bien que la version de bureau de votre site ait été chargée correctement sur un appareil de bureau avec une connexion Internet standard, les appareils mobiles sont bien différents.Bien que souvent élégants et très demandés, les appareils mobiles sont encore beaucoup moins puissants et fonctionnent sur un réseau plus lent, avec une résolution d’affichage et des sessions en ligne plus courtes. En bref, les personnes que vous essayez de joindre accèdent à votre site Web avec un matériel et des réseaux plus simplistes et moins robustes que ceux auxquels nous sommes habitués. C’est ce que nous devons optimiser pour le moment – et compte tenu de la complexité des réseaux mobiles, le chargement rapide des pages est essentiel. C’est peut-être le moment où vous êtes tenté de faire appel à votre équipe de développeurs, mais vous ne devriez pas le faire pour le moment. En tant que spécialiste du marketing, vous pouvez faire beaucoup de choses par vous-même. Pour vous aider, nous allons vous guider :
- Analyse comparative et terminologie de base à connaître;
- Où trouver le temps de chargement de votre page (et savoir si votre site est encore indexé sur mobile);
- Conseils et choses à garder à l’esprit lors de la création de contenu et de pages;
- Changer votre état d’esprit du bureau au mobile; et
- Quelques détails techniques pour l’exploration (et la réanalyse) de votre site.
Premièrement, qu’est-ce qu’un temps de chargement de page «rapide» ?
La réponse courte mais efficace : Selon Google, moins de trois secondes. Malheureusement, en moyenne, une landing page sur mobile se charge en 22 secondes. Aie. Réduire le temps de chargement de votre page n’est pas une simple métrique. Chaque seconde compte, car plus le chargement de la page est long, plus votre taux de rebond sera élevé et plus votre classement sera mauvais. Les temps de chargement supérieurs à trois secondes augmentent la probabilité de rebond de plus de 30%. Cela passe à plus de 100% lorsque vous attendez plus de six secondes. Ainsi, s’il n’y a pas beaucoup de marge d’erreur, il reste encore beaucoup à faire.
Que peuvent faire les spécialistes du marketing sur le temps de chargement ?
Avant d’y arriver, vous devez d’abord connaître certains termes, concepts et faits :
Document HTML
Chaque page Web est essentiellement un document texte que le navigateur Web lit et convertit dans un format plus agréable. Les trois balises principales dans un document HTML sont :
- balise <html>, dans laquelle vous mettez le « tout venant »;
- balise <head>, plus informative pour le navigateur, contient des informations affichables comme le titre de la page;
- balise <body>, tout ce que vous voyez et avec lequel vous interagissez normalement.
Titre et métadonnées
Dans la <head> en haut de chaque document HTML, il devrait y avoir quelques balises spéciales qui renseignent le navigateur et les robots d’exploration de certaines informations sur la page. Si vous n’en avez pas, vous devriez les ajouter rapidement.
Structure de balisage
Votre page devrait avoir une balise <h1> comme en-tête principal, généralement liée au titre ou au sujet de la page. Ensuite, des balises de titre successives (<h2> à <h6>) doivent être utilisées pour séparer la page. Les balises de titre ne doivent pas être utilisées pour la mise en évidence, car cela peut prêter à confusion pour les robots d’exploration et les utilisateurs.
Temps de chargement jusqu’au premier octet (TTFB)
C’est le temps qu’il faut au navigateur d’une personne (pensez au téléphone de votre utilisateur) pour recevoir la première quantité d’informations du serveur. Ceci a tendance à être un aspect plus technique, mais il est important de le comprendre pour que vous sachiez si vous devez discuter avec votre développeur ou vous pencher sur de nouveaux serveurs / hébergement.
Robots.txt
Ce fichier indique aux robots qui accèdent à un site quelles informations peuvent ou non être lues et suivies. Il se peut que votre page de destination apparaisse uniquement grâce aux clics sur une publicité et non dans les résultats de recherche. Ou vous ne souhaitez peut-être pas qu’un robot d’exploration suive l’un des liens de la page.
Sitemap
Ce fichier indique au robot toutes les pages de votre site. Si certaines pages ne sont pas liées à partir de n’importe où sur votre site, un robot d’exploration n’aura aucun moyen de les trouver. Il est judicieux de soumettre votre sitemap à Google via la « Search Console » (mais vous en saurez plus dans un instant).
Comment débuter pour améliorer le temps de chargement des pages ?
Connaissez votre temps de chargement de page
De nombreux outils peuvent vous indiquer le temps de chargement et d’autres détails de chaque page. Je vous recommande d’en utiliser au moins deux pour obtenir une image plus complète. Voici quelques-uns de nos favoris, qui sont tous gratuits :
Google’s PageSpeed Insights
Essayez, c’est le meilleur endroit pour commencer. Testez un lien et obtenez des recommandations d’amélioration sur les ordinateurs de bureau et les mobiles. Google propose également des liens vers des ressources si vous ne savez pas vraiment comment vous améliorer, même si elles ont tendance à être un peu techniques.
Google’s Test My Site (pour mobile)
Ceci est un outil similaire à PageSpeed, mais est axé sur le mobile. De plus, il n’a pas la même quantité de détails que les autres, il est donc préférable de l’associer à un autre outil. Mais c’est le plus facile à comprendre.
WebPageTest.org
Fantastique pour obtenir des informations détaillées sur votre page, le temps de chargement, les ressources, le temps nécessaire pour obtenir des informations du serveur etc. Et vous pouvez sélectionner le type d’appareil et la connexion que vous souhaitez, de sorte que vous puissiez cibler spécifiquement les appareils mobiles avec des connexions plus lentes. Cela peut être un peu dur au début, mais cela en vaut la peine.
GTmetrix
Ceci est un croisement entre PageSpeed Insights et WebPageTest. Il vous fournit de nombreuses informations et des liens vers des ressources si vous souhaitez approfondir vos connaissances.
Savoir si votre site est indexé pour le mobile
Vous devez avoir accès à la console de recherche Google de votre site pour le trouver. Il y a beaucoup plus d’informations que vous pouvez obtenir dans la Search Console, mais pour l’instant, vous cherchez quelque chose comme ceci :
Amélioration du temps de chargement des pages dans un monde « mobile-first »
1. Réduire la quantité de contenu demandé sur la page
Rappelez-vous quand nous avons parlé du document HTML. Le document lui-même n’est qu’un texte et ne contient aucune image, vidéo ou son, mais uniquement un lien vers chacun des éléments multimédias. Chaque fois que le navigateur lit l’un de ces liens, il doit demander le média réel à un autre endroit. Plus le nombre de demandes de votre page est élevé, plus le temps de chargement de la page sera long. Les développeurs peuvent améliorer cette situation de différentes manières, mais dans l’ensemble, vous souhaitez demander moins de contenu par page. Google recommande moins de 50 requêtes par page comme meilleure pratique. Mais, que comprend chaque demande sur votre page. Feuille de style ? Minimum une demande (souvent plus). Javascript ? Bien plus qu’une. Ce mouvement fantaisiste que vous vouliez que vos images fassent pendant que vous faites défiler ? Un autre fichier javascript. Google Analytics ou Tag Manager ? Code de suivi HubSpot ? Pixel Facebook? Il y a de fortes chances que la plupart d’entre eux devront passer par des requêtes. Vous avez deux façons d’améliorer le temps de chargement. Utilisez uniquement les images et les vidéos dont la page a besoin. Chaque fois que vous songez à ajouter des médias, réfléchissez s’ils sont vraiment utiles pour la page. Oui, cela a l’air génial sur le bureau, mais l’image évoque-t-elle la bonne émotion d’un utilisateur ? Cela explique-t-il quelque chose de mieux qu’une phrase ou deux ? Si vous ne le faites pas sur votre mobile, vous perdez de l’espace et du temps de chargement. C’est pourquoi tant de sites utilisent des dégradés de couleurs, des espaces et des animations basées sur un navigateur. Il a toujours l’air génial, mais demande beaucoup moins du point de vue de la charge technique.
2. Réduisez la taille du contenu inclus sur la page
OK, vous avez réduit le contenu demandé à ce qui est le plus précieux pour la page. Maintenant, nous devons réduire la taille globale de la page (c’est-à-dire le contenu de la page). Google recommandent que le poids des pages soit inférieur à 500 Ko. Ce point est un peu plus dur. Surtout que la dernière photo que vous avez prise sur votre téléphone est peut-être plus grande que cela. Tout d’abord, assurez-vous que les images soient réglées sur une résolution appropriée. Avec les images 4K et les photos de haute qualité qui sont le gros problème de nos jours, nous oublions souvent que l’écran affichant ces pixels est souvent beaucoup plus petit. Discutez avec vos développeurs de la possibilité d’afficher différentes tailles d’images pour différentes tailles d’écran. Oui, la largeur de 1920 pixels est superbe sur un ordinateur de bureau, mais c’est excessif pour un téléphone n’ayant qu’une largeur d’écran de 415 pixels.
« Mais, je n’ai pas Photoshop pour obtenir différentes résolutions d’image. »
Ne vous inquiétez pas, ce n’est pas nécessaire ! Il existe de nombreux outils gratuits en ligne, mais vous pouvez même utiliser une application de prévisualisation de base sur votre ordinateur Mac ou Windows. Une fois que l’image est réduite à une résolution plus petite, vous voudrez la compresser. La compression supprime un peu de qualité et réduit la taille du fichier. Une bonne règle consiste à maintenir une qualité de 80%. Cela est généralement imperceptible à l’œil humain et permet d’améliorer suffisamment la taille du fichier. Cela peut être affiné, mais commencez par là. Encore une fois, il existe de nombreux outils gratuits en ligne pour le faire. Vous pouvez également acheter un outil relativement peu coûteux pour un peu plus de contrôle (Squash par exemple pour Mac).
Qu’en est-il de la vidéo ?
Bonne question. Par exemple, convertir une vidéo en un gif entraîne une économie de taille de fichier importante. Évidemment, cela ne fonctionne pas dans tous les cas, mais faites-le chaque fois que vous le pouvez. Pour les vidéos qui ne peuvent pas être converties en gif, utilisez un service d’hébergement de vidéos. Cela pourrait être quelque chose d’aussi puissant que Vidyard, ou même simplement YouTube. Ces services ne téléchargent pas le fichier vidéo complet tant qu’un visiteur ne l’a pas regardé. Vous aurez donc une taille de fichier améliorée lors du chargement initial de la page.
3. Réduisez le nombre d’ « extras » sur la page
Bien que cela ressemble à une considération de développeur, il est important de comprendre et de pouvoir apporter des modifications et des suggestions dans la mesure du possible. Techniquement, cela relève de la réduction des demandes, mais vous ne pourrez pas toujours y apporter des modifications. Pensez à tous les extras ajoutés à votre site. Nous en avons déjà parlé de quelques-uns, comme Google Analytics, le suivi HubSpot et le pixel Facebook. Certains sont des nécessités auxquelles un spécialiste du marketing ne peut pas se passer, et vous ne devriez pas les supprimer. Mais, y a-t-il des endroits où vous déposez un code d’intégration ? Peut-être que c’est un appel à l’action ou un service de chat ? Si vous êtes sur WordPress, ceux-ci peuvent prendre la forme de plugins. Parcourez régulièrement vos plugins et assurez-vous de ne pas en utiliser plus que nécessaire. Concentrez-vous particulièrement sur les extras visibles, car le navigateur doit afficher le rendu pour terminer le chargement de la page.
4. Revoyez votre mise en page sur mobile si besoin
À quelle fréquence vérifiez-vous la version mobile d’une page avant de la publier ? Les images, les vidéos et le texte finissent-ils par afficher ce que vous attendez ? À quoi ressemble le premier écran lors du chargement de la page ? Si vous en avez la possibilité, masquez une partie du contenu superflu sur le mobile. Si ce n’est pas une option que vous avez, parlez à votre développeur pour voir si cela est possible. Par nature, les versions mobile et de bureau de votre page devraient être différentes. Essayez de garder l’écran initial simple et direct. S’il y a trop d’activités sur la page (ce qui signifie qu’il faudra probablement plus de temps pour la charger), essayez de refaire cela en quelque chose de plus simple. Un CTA et un arrière plan feront l’affaire.
5. Testez et demandez à Google de re-crawler votre site lorsque vous y apportez des modifications
Une fois les modifications apportées, testez à nouveau votre page à l’aide des outils ci-dessus. Lorsque vous êtes prêt, vous pouvez demander à Google de re-crawler votre site pour tenir compte des mises à jour. Google le fera automatiquement après un certain temps – tant que le robot d’exploration pourra trouver la page, vous aurez peut-être besoin d’un nouveau sitemap ! Encore une fois, c’est quelque chose à consulter avec vos développeurs. Retournez à la console de recherche Google et accédez à l’outil d’inspection des URL. Entrez l’URL de la page que vous souhaitez réindexer et vous avez terminé ! Si vous avez plus d’une poignée de pages, téléchargez un sitemap à la place.
Conclusion : le Mobile-First n’est pas si effrayant
Vous devriez maintenant mieux comprendre quels éléments entrent en compte pour le temps de chargement d’une page et comment vous pouvez l’améliorer. Évidemment, les outils que vous utilisez et votre équipe de développement devront effectuer de nombreuses modifications techniques, qui vous permettront d’améliorer ce temps de chargement. Même si vous ne pouvez pas modifier chaque page, vous devriez avoir une meilleure idée des questions à poser pour vous assurer que votre contenu est optimisé et que vos développeurs réfléchissent à ce qui compte le plus pour votre public sur mobile. Chaque seconde gagnée signifie une meilleure chance de se classer plus haut dans les résultats de recherche. Plus important encore, cela signifie que quelqu’un est plus susceptible de rester sur votre page et de consommer votre contenu. Mission accomplie !
Laisser un commentaire