Comment optimiser le chargement des pages du site Deezer pour améliorer l'UX et le positionnement sur Google ?

1. Répondre aux exigences de Google en matière de temps de chargement : le défi relevé par Deezer

Depuis juin 2021, l'expérience utilisateur sur mobile est devenue l'un des facteurs de classement dans le référencement pour Google. Elle est mesurée au niveau de la page par trois KPIs nommés Core Web Vitals.

Il s'agit de

  • le temps de chargement visuel (LCP - Largest Contentful Paint),
  • latence d'interactivité (FID - First Contentful Paint),
  • la stabilité visuelle (CLS - Mise en page cumulée (Shift).

Avec ses 56 millions de visites annuelles sur mobile et son environnement concurrentiel en matière de référencement, Deezer devait répondre aux exigences des moteurs de recherche et des internautes. Le nombre de pages considérées comme lentes par Google dépasse les 600 000, ce qui affecte (considérablement) son positionnement.

2. L'approche proposée par Artefact pour Deezer

Deux indicateurs majeurs ont été améliorés :

  • Largest Contentful Paint - en chargeant l'image principale des pages du catalogue (photo de l'artiste ou de l'album) avant les autres ressources de la page en dessous du pli.
  • Décalage cumulatif de la mise en page - en réservant l'espace nécessaire au chargement des images et en évitant qu'elles n'écrasent d'autres éléments pendant le chargement.

3. Quels ont été les résultats pour le référencement de Deezer ?

  • 63% d'utilisateurs bénéficient d'un Largest Contentful Paint sous 2500ms vs 52% en août 2021
  • 99% des visiteurs ne sont pas exposés à un décalage cumulatif de la présentation et ont une expérience utilisateur de qualité, contre 74% en août 2021.
  • Disparition des pages lentes sur le site (Largest Contentful Paint >4s and Cumulative Layout Shift >0.25) vs 600K en avril 2022
  • 78% de pages sont considérées comme rapides par Google (Largest Contentful Paint <2,5s et Cumulative Layout Shift <0,1) vs 1,3% en avril 2022

4. Prochaines étapes :

L'amélioration générale de l'expérience des utilisateurs mobiles fera l'objet d'un projet spécifique dans le cadre de la prochaine refonte globale des services de Deezer. pages du catalogue.

Elle souhaite approfondir et améliorer l'expérience de l'utilisateur sur mobile.