Pack Full Performance
|
|
Limited Resell est une boutique en ligne spécialisée dans la vente de sneakers. Offrant une vaste gamme de modèles, le site permet aux amateurs de sneakers d'acquérir facilement et en toute sécurité les chaussures les plus prisées. Cette boutique en ligne, construite avec le CMS PrestaShop, a fait appel à notre expertise pour garantir son bon fonctionnement, notamment en ce qui concerne sa performance technique.
L'enjeu majeur auquel Limited Resell était confronté était l'optimisation de ses temps de chargement, un aspect critique pour offrir une expérience utilisateur fluide et rapide.
Dans cette étude de cas, nous allons détailler notre démarche pour résoudre ce défi. Nous commencerons par une analyse initiale du site pour identifier les principaux points de congestion. Ensuite, nous présenterons les actions prioritaires que nous avons préconisées pour améliorer les temps de chargement. Enfin, nous examinerons les résultats obtenus après la mise en œuvre de ces actions, montrant une amélioration significative de la performance globale du site. |
|
Avant
Après
|
| avant | après | |
| Perf.grade |
26/ 100
|
60/ 100
|
Mise en cache coté serveur : Varnish
|
Afin d'optimiser notre efficacité, nous avons mis en place le cache côté serveur Varnish sur des pages spécifiques : la page d'accueil, les catégories, les pages de produits et les pages CMS.
Ce processus de mise en œuvre comprenait plusieurs étapes clés :
|
| avant | après | |
| Tps de construction | 88ms | 46ms |
Mise en place de lazy loading
La technique du Lazy Loading, également appelée "chargement différé", s'avère extrêmement utile pour optimiser le temps de chargement des pages web. Elle consiste à retarder le chargement des images, en particulier celles qui se trouvent en dessous de la ligne de flottaison de la page. Grâce à cette méthode, la page initiale se charge beaucoup plus rapidement, offrant une meilleure expérience utilisateur.
Dans le cas de ce site en particulier, nous avons mis en œuvre un module spécialement conçu pour cette tâche. Ce module analyse le code HTML de chaque page et effectue des modifications nécessaires pour empêcher le chargement immédiat des images situées en dessous de la ligne de flottaison. À la place, ces images sont remplacées par un pixel transparent. Le navigateur ne se charge alors que des images qui se trouvent au-dessus de la ligne de flottaison, ce qui évite des dizaines de transferts de fichiers inutiles. Grâce à cette optimisation, le nombre de fichiers téléchargés sur le site est passé de 244 à 88.
Les visiteurs de ce site bénéficient donc d'une expérience de chargement et d'affichage considérablement améliorée, avec des pages qui se chargent plus rapidement, ce qui contribue à retenir leur attention et à améliorer leur satisfaction globale.
|
|
|
Plus d’infos sur le Lazy Loading dans notre article de blog : |
| avant | après | |
| Fichiers téléchargés | 244 fichiers | 88 fichiers |
| Poids de la page | 11,3 Mo | 6,98 Mo |
Préchargement polices de caractères et rapatriement de polices de caractères Google
Les polices de caractères employées sur la boutique en ligne ont été incorporées directement dans le thème de la boutique, plutôt que d'être hébergées sur des serveurs externes comme fonts.google.com. Cette approche présente plusieurs avantages notables :
- Réduction du nombre de fichiers à transférer : En intégrant les polices de caractères au thème de la boutique, nous avons considérablement réduit le nombre de fichiers nécessaires pour charger correctement la page. Moins de fichiers signifient un temps de chargement plus court, ce qui améliore l'expérience utilisateur.
- Optimisation du Total Blocking Time : Le "Total Blocking Time" (temps d'attente total du navigateur avant l'affichage du contenu) est un facteur critique pour l'efficacité du chargement de la page. En évitant de faire appel à des serveurs externes pour les polices, nous avons réduit le temps d'attente du navigateur, ce qui se traduit par un affichage plus rapide des textes et des contenus. Les visiteurs de la boutique bénéficient ainsi d'une expérience de navigation plus fluide et réactive.
- Contrôle et stabilité : En ayant un contrôle total sur les polices intégrées au thème, nous nous assurons de leur disponibilité constante et de leur stabilité. Les éventuels problèmes liés à des serveurs externes, tels que des pannes ou des retards de chargement, sont évités, garantissant ainsi une expérience utilisateur fiable.
En somme, l'intégration des polices de caractères dans le thème de la boutique est une mesure stratégique qui améliore la vitesse de chargement, réduit le temps d'attente du navigateur et renforce la stabilité de la boutique en ligne, offrant ainsi une expérience client plus satisfaisante.
| avant | après | |
| Total blocking time | 1300 ms | 470 ms |
Amélioration des Web Vitals : Actions diverses
|
Des améliorations complémentaires ont été mises en place sur la boutique en ligne. Ces améliorations ont été spécifiquement conçues pour renforcer les indicateurs de référencement essentiels de Google, également connus sous le nom de Core Web Vitals (Signaux Web Essentiels). Nous avons entrepris plusieurs actions complémentaires pour garantir une meilleure performance et une expérience utilisateur optimale :
Pour obtenir des informations plus détaillées sur les indicateurs de Google, tels qu'ils apparaissent dans la Search Console, ainsi que des conseils sur la résolution des problèmes liés à la vitesse de votre boutique en ligne, nous vous invitons à consulter notre article dédié disponible ici : https://www.772424.com/blog/prestashop-seo-resoudre-les-problemes-lies-a-la-vitesse-de-votre-boutique-en-ligne-avec-google-search-console/
|
| avant | après | |
| Largest Contentful Paint | 3, 5 s | 1, 0 s |
| Cumulative Layout Shift | 1,13 | 0 |
| Tps de chargement | 8,1 s | 5,8 s |