Comment optimiser les performances de chargement de vos fiches produits

Les performances de chargement de vos pages produits ont un impact aussi bien sur votre visiteur qui s’impatiente entre chaque chargement de page que, et c’est d’autant plus grave, sur votre référencement naturel.

Google privilégie les pages plus rapides dans les résultats de recherche. On note ainsi en moyenne une différence de 30% de temps de chargement entre le 1^er résultat de recherche et le 50^ème (Hoffman, s.d.).

Tester les performances de votre page

Nous vous conseillons dans un premier temps de tester les performances de votre page grâce à des outils tels que Google Analytics ou encore Dareboost. Ces tests vous permettront d’identifier les points d’amélioration nécessaires pour améliorer l’expérience de navigation de vos visiteurs.

Le test ci-dessus réalisé via Dareboost illustre par exemple les performances d’une fiche produit – livre d’Amazon. De nombreux points sont remontés comme étant « à améliorer » (19) ou dans le pire des cas comme « problématiques » (14). Les principaux problèmes ici concernent les images chargées à l’ouverture de la page qui représentent 75% du poids de la page. Les principaux obstacles au chargement optimal de la page concernent les redimensionnements inutiles (14 photos), l’utilisation des cookies, le nombre d’éléments du DOM ou encore le manque d’optimisation des requêtes Sprite CSS.

Avant de rentrer dans le détail de vos performances, nous vous conseillons de vous concentrer sur 3 KPIs primordiaux qui vous permettront d’avoir un premier aperçu du travail qui vous attend.

Début d’affichage (Start Render)

C’est le temps nécessaire pour passer de la page blanche au chargement du premier élément de la page. Ce délai est primordial car il rassure le visiteur sur le fait que sa page est bien en cours d’ouverture. Google conseille un délai inférieur à 1 seconde. Passé ce délai, votre visiteur a toutes les chances de quitter votre site sans avoir eu accès à la moindre information.

Afin de doper votre Start Render, pensez bien à bien mettre en place un cache afin de limiter le nombre de requêtes de vos pages en mémorisant sur le navigateur de vos visiteurs vos éléments de contenu récurrents.

Visuellement complet

C’est le temps nécessaire pour afficher complètement la partie au-dessus de la ligne de flottaison de la page. Vos visiteurs peuvent redevenir patients s’ils ont accès rapidement au contenu qui les intéresse.

L’enjeu ici va être de sélectionner les éléments que l’on juge nécessaires pour l’expérience de l’utilisateur (actions / contenus …) pour les placer au-dessus de la ligne de flottaison et les optimiser. A l’image de la fiche produit d’Amazon, les visuels représentent en moyenne 70 à 80% du poids de vos pages, vous pouvez donc considérablement améliorer vos performances en :

• Chargeant vos images au format Jpg, plus léger.
• Les compressant et ne proposant des images grand format que si nécessaire.
• En utilisant les sprites CSS qui permettent d’afficher une image unique de plusieurs façons et donc de limiter le nombre de chargements

Speed Index

Le speed index est l’indice de performance du chargement entre le début d’affichage et l’affichage complet de la partie au-dessus de la ligne de flottaison. Il vous permet d’avoir une vision complète de la performance de votre page entre les premiers signes de chargement et le sentiment de disponibilité par l’internaute de votre page. Cet indice doit se situer, selon Google, en-dessous de 1000 afin d’assurer un bon équilibre entre le Start Render et le Visually Complete.

Pour améliorer le speed index, les deux KPIs ci-dessus devront être améliorés et le bon cocktail entre un chargement rapide au début et un affichage complet également rapide devra être trouvé.

La bonne utilisation de ces indices et les outils tels que Dareboost et Google Analytics vous permettront d’améliorer votre temps de chargement et ainsi votre référencement. C’est un travail de longue haleine qui demandera un travail croisé entre vos équipes techniques et content.