Je suppose que cela ne vous surprend pas que l’Internet d’aujourd’hui soit une question de vitesse, et c’est maintenant chaque seconde qui compte. Le public des médias sociaux a été vraiment gâté en recevant ce qu’il voulait au moment même où il l’avait demandé. Et sans exagération, ce mois de juillet a simplement changé la donne pour toute la communauté SEO en raison du fait que la vitesse des pages est désormais officiellement un facteur de classement pour les appareils mobiles. Dans cette optique, notre équipe a mené une expérience pour suivre la corrélation entre la vitesse des pages et les positions des pages dans les SERP mobiles après la mise à jour.
Le niveau d’engagement de Google pour améliorer l’expérience utilisateur mobile est époustouflant. Depuis que l’indexation mobile-first a été déployée en février 2018, Googlebot explore et indexe les pages avec l’agent smartphone en premier lieu. Et, bien sûr, les spécialistes du marketing des médias sociaux ont été affectés par ces mises à jour comme personne d’autre. Selon le Social Media Marketing Industry Report, les blogueurs et les spécialistes du marketing des médias sociaux utilisent principalement les médias sociaux pour :
- Augmentation du trafic – 78%
- Génération de leads – 64%
- Amélioration des ventes – 53%
La pression est vraiment forte car, selon les recherches menées par Google, 50% de vos visiteurs s’attendent à ce que votre page se charge complètement en moins de 2 secondes. Et, comme l’indique la même recherche, les personnes qui ont eu une expérience négative en termes de vitesse avec votre page mobile sont 62 % moins susceptibles de faire un achat. Je suppose que je n’ai pas besoin de mentionner que ne pas répondre à ces exigences signifie perdre de l’argent, de l’audience et de la réputation. Donc, dans cet article, je vais faire la lumière sur les nouvelles règles de mesure de la vitesse des pages que je pense que les spécialistes du marketing des médias sociaux doivent connaître pour ne pas laisser cela se produire.
Nouvelles règles
1. Onglets séparés pour la vitesse de la page et l’optimisation dans PageSpeed Insights
Vous avez peut-être déjà remarqué que l’outil PageSpeed Insights est quelque peu différent pour le moment. À l’époque, après avoir entré une URL, l’outil vous fournissait une seule évaluation et un ensemble de paramètres tels que les redirections, la compression, la minification, etc. qui étaient censés influencer ce score total.
Maintenant que l’outil a connu quelques changements, votre site web est évalué selon deux critères : la vitesse et l’optimisation. En parlant d’optimisation, il s’agit simplement de la même vieille liste de contrôle dont je suis sûr que vous vous souvenez de la version précédente de l’outil. Cependant, lorsqu’il s’agit de vitesse, elle est désormais mesurée sur la base de 2 paramètres :
- PCF (First Contentful Paint), il mesure combien de temps il faut pour que le premier élément visuel apparaisse pour un utilisateur.
- DCL (DOM Content Loaded) mesurant le temps nécessaire au chargement et à l’analyse d’un document HTML.
2. Passer des données de laboratoire aux données de terrain
La difficulté à propos des métriques répertoriées ci-dessus (FCP et DCL) est qu’il arrive souvent que les chiffres que vous voyez dans vos tests ne coïncident pas réellement avec ceux affichés par Google dans l’onglet vitesse. Pourquoi cela arrive-t-il ? L’explication est assez simple : Google intègre des données de sa base de données CrUX (Chrome User Experience Report), ce qui signifie que ces métriques sont calculées sur la base de mesures réelles des utilisateurs.
La controverse se produit lorsque Google considère votre site comme lent en raison de la faible vitesse de connexion des utilisateurs, par exemple, bien qu’il puisse être parfaitement optimisé de votre point de vue. Malheureusement, avec le passage de Google des données de « laboratoire » aux données de « terrain », il n’y a pratiquement rien que vous puissiez faire pour améliorer vos données de « terrain », sauf pour optimiser votre site Web.
3. Score d’optimisation et classements
J’ai un peu évoqué au début de l’article l’expérience que notre équipe a récemment menée. Le but de l’expérimentation était de comprendre l’influence de Speed Update sur les classements mobiles.
Afin de comprendre la corrélation entre la vitesse des pages et les SERP mobiles avant la mise à jour, nous avons analysé un million de pages dans les résultats de recherche mobile. Il s’est avéré que le score d’optimisation d’une page avait une forte corrélation (0,97) avec sa position dans les résultats de recherche Google. Nous sommes allés plus loin et avons mené les mêmes recherches après le déploiement officiel de la mise à jour. Avec un autre million de pages, leurs scores d’optimisation, leurs FCP médians et leurs DCL médians pour chaque URL unique analysée, l’expérience a révélé que :
- Dans la recherche mobile, un classement moyen des pages entre 1 et 30 positions a été amélioré de 0,83 point de score d’optimisation par rapport à la première expérience.
- La relation entre un score d’optimisation moyen et la position dans les SERP mobiles est toujours extrêmement élevée – 0,95.
- Il n’y a pratiquement aucune corrélation entre les métriques médianes FCP/DCL et les résultats de recherche.
Cela nous amène à la conclusion que l’optimisation est exactement ce qui doit être amélioré et travaillé en premier lieu. Et bien que FCP et DCL puissent désormais être à peine nommés des facteurs de classement, Google augmentant constamment ses normes, ces métriques pourraient parfois le devenir.
Comment améliorer le score d’optimisation
Maintenant que nous savons que c’est le score d’optimisation qui régit les classements mobiles, voyons ce que vous pouvez faire pour l’améliorer. Il y a maintenant 9 facteurs officiellement déclarés par Google qui influencent le score d’optimisation. Ainsi, après avoir analysé la vitesse de votre site Web mobile et repéré (espérons-le pas) ses points faibles, tenez compte de ces 9 règles pour l’amélioration du score d’optimisation.
1. Essayez d’éviter les redirections de pages de destination
Si vous souhaitez améliorer les performances de votre site Web, pensez à minimiser le nombre de redirections sur votre page de destination. Cependant, si vous avez vraiment besoin d’une redirection, il est préférable d’utiliser 301 pour une redirection permanente et 302 pour une redirection temporaire. Googlebot prend désormais en charge ces deux implémentations de redirection :
- Redirections HTTP
- redirections JavaScript
La principale différence entre les deux est que les redirections HTTP peuvent entraîner une certaine latence côté serveur, tandis que celles en JavaScript ralentissent le côté client.
2. Réduisez la taille de votre fichier en activant la compression
Commencez par activer et tester la prise en charge de la compression gzip sur votre serveur Web. Cela peut réduire considérablement la taille de la réponse transférée (jusqu’à 90 %). Jetez un œil aux exemples de fichiers de configuration pour la plupart des serveurs via le projet HTML5 Boilerplate. De plus, pensez à passer par votre site Web mobile afin de supprimer toutes les données inutiles là où cela est possible car la ressource la mieux optimisée est une ressource non envoyée.
3. Améliorez le temps de réponse de votre serveur
La meilleure pratique consiste à maintenir le temps de réponse de votre serveur sous 200 ms. Il existe un certain nombre de raisons pour lesquelles les réponses du serveur ne sont pas aussi rapides que vous le souhaitez. Ce sont : les requêtes de base de données lentes, le routage lent, la logique d’application lente, le manque de ressources CPU, le manque de mémoire, etc. La première étape pour résoudre le problème consiste en fait à mesurer le temps de réponse de votre serveur. À cet égard, je suggérerais d’effectuer de tels audits régulièrement pour surveiller toute régression future des performances.
4. Mettre en œuvre une politique de mise en cache
Afin de contrôler automatiquement comment et pendant combien de temps la réponse individuelle peut être mise en cache par le navigateur, utilisez cache-control. Pensez à mettre en place des Etags. En faisant cela, un jeton de revalidation sera automatiquement envoyé pour vérifier si la ressource a changé depuis la dernière fois qu’elle a été demandée.
5. Minimiser les ressources
Ce que vous devez faire ici, c’est réduire vos ressources HTML (HTMLMinifier), CSS (CSSNano) et JavaScript (UglifyJS). En disant cela, j’entends supprimer toutes les données redondantes (commentaires de code, code inutilisé, etc.) sans affecter la façon dont la ressource est perçue par le navigateur.
6. Optimiser les images
Il s’agit d’une activité très importante, car l’optimisation des images peut réduire la taille totale de chargement de votre page jusqu’à 80 %. Il existe 2 types de compression d’image : avec perte et sans perte. Le fait est que, lorsqu’elle est enregistrée dans un format avec perte (JPEG), votre image sera un peu moins bonne que celle d’origine. En règle générale, ces images occupent une très petite quantité de mémoire et sont très bonnes pour le Web. En parlant d’images sans perte, elles ont une meilleure qualité mais sont beaucoup plus grandes en termes de taille. GIF et PNG sont des formats sans perte.
Ainsi, la toute première étape vers l’optimisation des images consiste à se débarrasser des ressources inutiles ainsi que des métadonnées là où elles ne sont pas nécessaires. Ensuite, au lieu d’encoder du texte dans des images, vous envisagez d’utiliser des polices Web. Ajustez vos images pour qu’elles s’adaptent à une taille d’affichage et remplacez-les par CSS3 si possible. Sélectionnez des formats raster plus petits, mais assurez-vous qu’ils n’interfèrent pas avec la qualité.
7. Optimiser la livraison CSS
Si les ressources CSS externes sont petites, vous pouvez les insérer directement dans le document HTML. En faisant cela, vous vous débarrasserez de petites ressources externes et permettrez au navigateur de continuer à afficher votre page. Je vous déconseille également d’incorporer des URI de données volumineuses dans des fichiers CSS, car cela peut affecter négativement le temps de rendu de la page. En outre, évitez d’incorporer des attributs CSS car cela peut entraîner une duplication de code inutile.
8. Privilégiez le contenu visible
Essayez de garder le contenu au-dessus de la ligne de flottaison sous 14,6 Ko compressé, sinon des allers-retours supplémentaires entre votre serveur et le navigateur de l’utilisateur seront inévitables. Ainsi, afin de ne pas laisser cela se produire, vous devez limiter la taille de vos données. Cela peut être fait en restructurant votre site Web de manière à ce qu’il charge d’abord le contenu crucial et en minimisant la quantité de données (HTML, CSS et JavaScript) utilisées par vos ressources.
9. Supprimer le JavaScript bloquant le rendu
Tout d’abord, vous devez essayer d’éviter de bloquer les scripts externes car sinon le navigateur devra attendre que le JavaScript soit récupéré, ce qui peut ajouter des allers-retours supplémentaires pour que la page soit rendue. Cependant, si les scripts externes sont petits, insérez leur contenu dans le document HTML afin d’éviter toute requête réseau supplémentaire. N’oubliez pas que l’inline agrandit la taille de votre document HTML, c’est pourquoi cela ne doit être fait qu’avec de petits scripts.
De plus, utilisez l’attribut HTML async sur les scripts externes pour empêcher JavaScript de bloquer l’analyseur et reporter les scripts non critiques et les bibliothèques JavaScript tierces au moins jusqu’après le repli.
Vous pouvez trouver ces conseils résumés dans Le guide ultime pour améliorer votre score d’optimisation. Si vous êtes prêt à approfondir le sujet des règles énumérées ci-dessus, allez-y et visitez les règles PageSpeed Insight de Google pour des conseils plus détaillés et des informations techniques. Une bonne nouvelle pour les spécialistes du marketing est qu’ils n’ont pas nécessairement besoin d’être des développeurs pour améliorer les performances de leur site en termes de vitesse.
