SEO : préparer son site PrestaShop à la mise à jour Google Page Experience (Partie 2)
[Update – Lors de la 1ère publication de cet article, le 25 mars 2021, le déploiement de la mise à jour Google Page Experience était annoncé pour le mois de mai 2021.
Le contenu de l’article a été mis à jour le 26 avril 2021, après l’annonce de Google d’un déploiement progressif à partir de la mi-juin.]
Le monde du référencement se prépare depuis quelque temps à la mise à jour Google Page Experience. Elle sera lancée, pour rappel, officiellement à partir de la mi-juin 2021. Cette mise à jour viendra ajouter des signaux relatifs à l’expérience utilisateurs – les Core Web Vitals – aux multiples critères de classement des sites dans les résultats de recherche déjà pris en compte par Google.
Si vous êtes passés à côté de notre précédent article sur le sujet, on vous invite à le découvrir par ici :
→ SEO : préparer son site PrestaShop à la mise à jour Google Page Experience (Partie 1). Vous y retrouverez :
- les informations clés pour comprendre les Core Web Vitals de la future update de Google,
- + un récapitulatif des actions à mener pour les optimiser sur votre site PrestaShop.
Aujourd’hui, second billet sur la thématique “Google Page Experience”. L’idée ? Vous aider à suivre l’évolution de vos différentes métriques. Et vous guider dans l’optimisation des performances globales de votre site, dans le temps.
Comment suivre l’évolution des Core Web Vitals sur votre site ?
|
Rappel des 4 signaux Web essentiels :
À noter : la future mise à jour de Google se concentre principalement sur les 3 premiers indicateurs. |
Google Search Console
Le service Google Search Console est le premier outil incontournable, et gratuit, pour contrôler l’évolution des signaux Web essentiels sur votre site. → Accéder à l’outil Search Console
Il vous permet de détecter une éventuelle dégradation de vos Core Web Vitals. Comment ? Vous recevez une alerte par e-mail lorsqu’un de vos indicateurs passe en orange (score à améliorer) ou en rouge (score considéré comme mauvais).
Sur l’interface, vous pouvez même visualiser quand la dégradation s’est produite : une information précieuse pour détecter la raison de cette dégradation (vous avez peut-être activé un nouveau module ou une nouvelle fonctionnalité aux alentours de cette date ?). Lors de la recherche des raisons, gardez en tête que les actions en cause ne sont pas forcément directement liées aux performances, mais elles peuvent tout de même avoir une influence.
Interface Google Search Console :
Google PageSpeed Insights
Deuxième outil à utiliser pour le suivi des performances de vos Signaux Web essentiels, Google PageSpeed Insights. → Accéder à l’outil PageSpeed Insights
Les scores pour l’ensemble des pages de votre site sont accessibles en cochant la case “Afficher le résumé de l’origine”.
Attention : Google PageSpeed Insights ne propose pas d’historique. Pour suivre l’évolution de vos métriques dans le temps, une seule solution : réaliser un screenshot à intervalle régulier (tous les 15 jours, par exemple). Vous pourrez ainsi plus facilement détecter les raisons des éventuelles fluctuations dans vos scores.
Interface Google PageSpeed Insights :
Vous l’aurez compris, les données Origin Summary sont précieuses pour analyser les performances de votre site. Elles sont tout de même à relativiser dans le sens où les métriques affichées sont issues des pires expériences de navigation des internautes sur votre site, sur une période de 28 jours.
À noter : les données de laboratoire correspondent, elles, aux scores mesurés à l’instant T via le serveur de Google. Elles sont de ce fait moins pertinentes que les données de l’Origin Summary qui correspondent à de vraies visites.
Comment améliorer les performances globales de vos pages ?
On reste sur Google PageSpeed Insights pour vous présenter les différentes suggestions d’optimisation proposées par l’outil, en fonction des données de votre site. Ces actions influeront sur la vitesse de chargement de vos pages – qui, rappelons-le, impacte directement votre taux de rebond ainsi que votre taux de conversion. Notez que Google précise tout de même qu’elles n’auront pas forcément d’incidence directe sur le score de vos signaux Web essentiels.
L’ensemble des pistes d’optimisation pour votre site sont listées dans les rubriques Opportunités et Diagnostic de PageSpeed Insights.
Exemple de résultat Opportunités et Diagnostic sur PageSpeed Insights :
Nous les avons regroupées par thématique pour vous les présenter en détail : actions d’optimisation relatives aux images, et actions d’optimisation relatives aux ressources internes et externes.
1) Actions relatives aux images de votre site
‣ Diffuser des images aux formats nouvelle génération
Un outil de compression d’images comme https://tinypng.com/ permettra à votre site d’afficher des visuels avec une taille optimale sans perte de qualité, quels que soient l’écran et le contexte de navigation. Google recommande également de remplacer les formats d’images standards .jpg et .png par un format optimisé, WebP.
Le saviez-vous ? Profileo a développé un module PrestaShop spécifique (sans abonnement ni appel à un service externe) pour le format d’image WebP : contactez-nous pour en savoir plus.
‣ Différer le chargement des images hors écran
Pour améliorer la perception des visiteurs sur le temps de chargement d’une page, activez le chargement différé de vos images : le Lazy Loading. Ce module permet en effet de charger en premier lieu les éléments structurels et textuels de la page pour les afficher presque instantanément puis de charger, ensuite, les images :
Attention : le lazy loading ne doit pas être appliqué au plus grand élément visuel de votre page sous peine d’impacter négativement votre score LCP.
‣ Indiquer une largeur et une hauteur explicites sur les images
Lorsque les éléments d’image de vos pages ne possèdent pas de width ni de height explicites, le navigateur doit les télécharger, les lire et calculer leurs dimensions.
Afin de réduire les décalages de mise en page et d’améliorer votre CLS, intégrez les largeurs et les hauteurs de vos images dans le code html.
2) Actions d’optimisation de vos ressources internes et externes
‣ Éliminer les ressources qui bloquent le rendu + Supprimer les ressources JavaScript / CSS inutilisées
L’enjeu de ces deux actions est de réduire le nombre de feuilles de style et le code Javascript.
Pour cela, activez l’option “smart cache” pour mettre en place un système de compression efficace, sur vos fichiers CSS comme sur vos fichiers Javascript.
Résultat : l’ensemble de vos fichiers CSS sont compilés en un seul. Idem pour vos fichiers JS.
‣ Réduire le temps de réponse initial du serveur
Cette action influe sur le temps de construction de vos pages. Pour le réduire à des délais inférieurs aux 100 millisecondes recommandées par Google, pensez à mettre en place un module de cache le plus efficace possible, tel que PageCache Ultimate (disponible également chez 772424.com).
‣ Diffuser des éléments statiques grâce à des règles de cache efficaces
Allonger à plus de 1 mois, dans votre fichier .htaccess, la durée de vie du cache pour vos éléments statiques internes (tels que vos images ou votre logo) peut accélérer les visites récurrentes sur votre site.
Vous avez besoin d’aide pour paramétrer les règles de cache ? Contactez nos équipes Profileo pour en discuter.
Et chez 772424.com ? Tous les serveurs sont paramétrés pour répondre aux normes précisées par Google dans son outil web.dev. Il vous suffit de désactiver l’option “Optimisation Apache” de votre PrestaShop pour que la configuration de l’hébergement s’exprime.
‣ Réduire l’impact du code tiers
Votre site fait appel à des scripts externes pour certaines fonctionnalités (chat en ligne, Analytics, Ads…). Mais qui dit externes implique que vous n’avez pas totalement la main dessus. Pour réduire l’impact de ce type de code sur les performances de votre site, une option est de différer ces scripts après le téléchargement de vos pages.
Attention : les interventions sur le code tiers nécessitent une analyse préalable ainsi que des compétences techniques avancées. Contactez nos experts PrestaShop pour un audit précis.
‣ Précharger les demandes clés
L’idée ici est de charger les polices de caractères spéciales le plus rapidement possible sur vos pages pour améliorer votre score FCP. Assurez-vous que le texte reste visible pendant le chargement de vos polices Web.
Vous disposez dans cet article (et le précédent) des principales clés et pistes d’optimisation à envisager pour votre site PrestaShop, si vous souhaitez optimiser ses performances globales. Si l’on ne pourra réellement mesurer l’impact SEO de la mise à jour Google Page Experience qu’une fois celle-ci lancée, on vous rappelle encore une fois que ces métriques ont, aussi, une influence directe sur votre taux de conversion et, par extension, sur votre chiffre d’affaires. Ne les négligez pas !
Vous ne savez pas quelles actions d’optimisation prioriser pour votre site PrestaShop ?
L’équipe Profileo réalise un diagnostic de vos performances et vous fournit la liste des éléments prioritaires qui affectent le temps de chargement de vos pages.
2 formules, selon vos besoins : Audit rapide des performances ou Audit détaillé des performances.
Besoin d’un accompagnement complet ?
Optez pour notre Pack Performance. Il inclut :
un audit détaillé des métriques de votre site
+ la mise en place des actions correctives nécessaires pour booster les performances de votre PrestaShop.