Comment j'ai atteint un score mobile de 100 pages de Google sur WooCommerce avec WP Rocket

Cherchez-vous à obtenir un 100 parfait sur les informations PagesPeed de Google pour Mobile avec votre boutique WooCommerce?

Dans cet article, je vais vous montrer exactement comment nous l'avons réalisé avec Femme - Fatale.gr, un e-shop de beauté qui courait à l'origine sur Magento. À ce moment-là, les charges de page mobiles ont pris entre 5 et 15 secondes, et le site saignait les ventes, malgré un catalogue de 35 000 produits avec 500 catégories de produits et 450 attributs de produits.

Je suis Dimitris Vayenas, fondateur d'Oxford Metadata. Au cours des trois dernières décennies, j'ai été obsédé par chaque milliseconde de performances Web. Au début de 2022, mon ami Nikos Orfanos m'a demandé d'aider avec sa boutique en ligne, et nous nous sommes mis au travail.

Après avoir migré vers WooCommerce et se concentrer entièrement sur la vitesse - en utilisant WP Rocket comme notre arme secrète - nous avons brisé les scores de pages mobiles avec un score cohérent entre 99 et 100/100 score. Plus important encore, le site est passé de stagnant à la machine à revenus.

Continuez à lire et vous apprendrez comment nous avons réussi à obtenir de tels résultats et comment WP Rocket nous a aidés à atteindre un score de 95+, ainsi que le tweak final qui nous a poussés à un 100 parfait. Plus important encore, vous découvrirez l'impact commercial qui a suivi une fois que le site a commencé à charger en seulement 300 millisecondes.

Pourquoi se concentrer sur les performances, en particulier sur le mobile

Chez Femme - Fatale.gr, plus de 90% des achats se produisent sur mobile. Cela a fait des performances mobiles notre priorité absolue dès le premier jour.

Les appareils mobiles sont le test de stress ultime pour tout site Web. Le processeur limité, la mémoire et les connexions instables peuvent rendre même les pages les plus maigres jusqu'à 10 fois plus lentes que sur le bureau. C'est pourquoi chaque optimisation est importante.

La vitesse signifie l'efficacité. Un code plus propre, des actifs plus petits et un Dom plus maigre se traduisent par une expérience plus fluide pour chaque visiteur, en particulier sur le mobile.

Comme j'aime le dire: «Si votre expérience mobile n'est pas instantanée, vous perdez de l'argent réel avec chaque milliseconde supplémentaire».

Le tournant: migration de Magento vers WooCommerce

En décembre 2021, Nikos a tendu la main avec un défi clair. «Mon magasin a culminé pendant le verrouillage à 0,81 € par session. Ensuite, les ventes sont tombées à 0,15 € par session. Pouvons-nous revenir aux sommets de verrouillage?»

Nous savions que la première étape était de modifier les plateformes.

Tout d'abord, nous avons choisi WooCommerce pour sa pile agile et moderne. Il a offert un écosystème de plugins et de créateurs de thèmes qui couvrent toutes les fonctionnalités imaginables, ainsi que la plus grande communauté d'ingénieurs Web axé sur les performances.

Nous avons mis en ligne en mars 2022 sans modifier les données du produit ni augmenter les dépenses de marketing. La seule différence était la vitesse. Nous coupons les charges de page de 5 à 10 secondes à seulement 1 à 2 secondes.

Il s'agit de la capture d'écran GTMetrix montrant les résultats du temps de chargement avant la migration de Magento: 5,8 secondes pour la page d'accueil et 7,9 secondes pour la catégorie, capturée pendant que nous développions le nouveau site Web.

D'un autre côté, il s'agit des performances actuelles, avec tous les principaux articles de base en vert:

Quelle est la véritable valeur de la vitesse pour un wooCommerce?

L'impact commercial sur les performances était impossible à ignorer, et les chiffres le rendent clair.

Avant la migration, Femme - Fatale.gr avait été coincée dans une ornière de performance. Sur Magento, le chiffre d'affaires mensuel variait de 7 000 € à 10 000 € avec environ 40 000 sessions, en moyenne de 0,15 € à 0,20 € par session. Même pendant le pic de verrouillage en 2020, lorsque le trafic a augmenté à 62 500 séances, les meilleures performances ont dépassé 0,81 € par session.

En février 2022, juste avant de migrer vers WooCommerce, le site s'était légèrement amélioré à 0,29 € par session, mais il était encore loin de son potentiel.

L'impact des performances plus rapides a été immédiate. En mars 2022, le premier mois complet après la migration, les revenus par session ont doublé à 0,58 €, malgré une baisse temporaire des séances tandis que les bots ont échoué les caches.

Les gains ne se sont pas arrêtés là. En décembre 2023, nous avons égalé le pic de verrouillage de 0,81 € par session. Aujourd'hui, ce nombre a augmenté encore plus: le site Web gagne désormais 1,11 € par session avec 40 000 visites mensuelles.

Nikos, le propriétaire de Femme - Fatale.gr, a le mieux mis:

En faisant correspondre et en dépassant maintenant notre pic covide, nous avons prouvé que la vitesse est le plus gros levier de notre entreprise.

La Fondation Performance a besoin de chaque site WooCommerce

Avant que WP Rocket ne puisse offrir son plein potentiel de performance, une base solide doit être en place. Ces premières décisions ont eu un impact majeur sur nos résultats, et c'est aussi ce que je recommande fortement à tous ceux qui dirigent un magasin WooCommerce:

1. Choisissez un thème Performance - First: nous avons testé des dizaines de thèmes avant de nous régler sur les meilleures options. Botiga (basée sur Gutenberg) par Athemes et Ray Theme (basé sur Elementor) a tous deux obtenu un score de 90+ dans les démos des fournisseurs. Quelque chose en dessous de 70? Nous l'avons évité.

2. Choisissez un hôte vraiment rapide: nous utilisons Cloudways , soutenus par Linode, Vultr et DigitalOcean dans des régions européennes clés comme Londres, Francfort, Amsterdam, Milan et Stockholm. Il nous donne des mises à niveau PHP et de base de données en un clic, un vernis intégré et un redis, ainsi que une détection de périphérique mobile sans faille. Cela garantit que les appels d'API non achetés frappent toujours le contenu optimisé. Nous n'avons eu aucun temps d'arrêt en trois ans et leur équipe de soutien est exceptionnelle.
   
   Dans le commerce électronique, la proximité de vos clients n'est pas négociable: chaque requête du produit, mise à jour du panier et vérification des stocks touche votre origine. Avec les acheteurs à Athènes ou dans les îles grecques, et Cloudways n'ayant pas de nœud local, nous devons déployer FastPath . Il regarde directement avec tous les principaux opérateurs mobiles grecs et CloudFlare, offrant des TTFBS MS inférieurs à 50 et une expérience vraiment locale.

3. Associez-vous à des fournisseurs de soutien: nous avons choisi des fournisseurs qui offrent un soutien fiable et rapide pour répondre aux questions et dépanner à vos côtés, d' Athemes et de Fibosearch à Wellaunch , Pixel votre site , Gravity Forms , Aioseo et WP Rocket lui-même.

4. Optimiser votre contenu: nous avons converti toutes les images en webp et les avons organisées en dossiers basés sur des dates, garantissant que chaque dossier contient moins de 10 000 fichiers. Pour les polices, nous avons auto-hébergé des fichiers WOFF2 et les avons sous-ensemble pour inclure uniquement les personnages dont notre public avait besoin. Cela a réduit la taille des fichiers de police de 70 à 80%. Les servir localement et précharger tôt a contribué à éliminer les recherches externes et à éviter les quarts de mise en page.

5. Utilisez le chargement du plugin chirurgical et maintenez l'hygiène de la base de données: nous avons utilisé des organisateurs de plugin et des filtres manuels pour charger uniquement les plugins nécessaires par page. Nous avons également nettoyé les transitoires hebdomadaires et désactivés Autoload pour les grandes entrées WP_Options.

Les fonctionnalités de fusée WP qui nous ont amenés à 99/100 sur Pagespeed

Une fois la fondation en place, WP Rocket nous a aidés à augmenter la vitesse et à obtenir rapidement des résultats de performances exceptionnels. Ces fonctionnalités ont joué un rôle clé pour nous amener à un score de 95+ sur Google Pagespeed sur mobile:

• Cache mobile et précharge du site du site: WP Rocket détecte automatiquement les appareils mobiles et leur construit un cache dédié. Cela signifie que les utilisateurs de smartphones obtiennent toujours un instantané HTML préchargé. Le préloadeur basé sur le plan du site compose également vos pages juste après toute purge de cache, ce qui supprime le retard qui se produit souvent lors des premières visites.
  
• Minification CSS et JS : WP Rocket dépouille les espaces et les commentaires pour rétrécir les tailles de fichiers. Il peut également combiner des fichiers JavaScript en un seul, réduisant le nombre de demandes HTTP. C'est particulièrement important pour les utilisateurs mobiles sur des réseaux plus lents.  
  
• Retirez le CSS inutilisé (RUCSS): Contrairement à une simple minification, RUCSS analyse le HTML de vos pages et supprime chaque règle CSS jamais utilisée à l'avant. Ces déclueurs sont souvent en train de réduire les dizaines de kilobyte, de sorte que le navigateur rend plus rapidement avec moins d'octets. Nous avons vu de première main que RUCSS seul a rasé 200 Ko de notre charge utile de page d'accueil, ce qui a entraîné des pages de chargement plus rapides.
  
• Retarder l'exécution de JavaScript : des scripts comme l'analyse, les outils de chat ou les widgets tiers n'ont généralement pas besoin de s'exécuter immédiatement. WP Rocket les retarde jusqu'à ce que l'utilisateur défile, tape ou clique. Cela rend les pages interactives plus rapidement et améliore l'interaction à la réactivité globale de la peinture suivante et de la page aux interactions utilisateur.

Après avoir activé ces fonctionnalités, nous avons obtenu un score de performance PageSpeed ​​99 Mobile:

Bonus: Add - WP Rocket Add - Cas spéciaux

Parfois, les paramètres à l'extérieur ont besoin d'un petit coup de pouce. Pour des configurations sélectionnées comme la nôtre - avec des planificateurs complexes, des règles de police personnalisées ou une détection inhabituelle de périphériques - nous avons installé cinq add-rocket WP gratuits après avoir consulté WP Rocket Senior Engineers:

• Modifier les paramètres RUCSS: Nous avons ajusté la fréquence à laquelle et sur la profondeur des roquettes WP éliminent les CSS inutilisés. Cela était essentiel pour la compatibilité avec des plugins comme AutomateWoo, qui peuvent surcharger le planificateur de tâches.
• Désactiver les fragments de panier WooCommerce: Étant donné que notre base de données était déjà optimisée, nous avons désactivé le cache de chariot de Cart Rocket pour accélérer les appels de paiement encore plus loin.
• Désactiver la précharge des polices CSS utilisées: nous avons utilisé des polices WOFF2 auto-hébergées personnalisées avec des règles de précharge manuelle. Ce module complémentaire a assuré que ces règles n'étaient pas remplacées par la précharge automatique de la police de WP Rocket.
• Supprimer HTML expire les règles: notre CDN et notre serveur ont déjà géré les en-têtes de cache, nous avons donc supprimé les règles HTML par défaut de WP Rocket expire pour éviter les conflits.
• Définissez des tablettes comme mobile: nous avons traité des tablettes comme des appareils mobiles pour nous assurer qu'ils ont bénéficié de la mise en cache mobile et des optimisations réactives. Ceci était important pour les fonctionnalités personnalisées qui reposaient sur le chèque WP_IS_MOBILE ().

Mis à part le plugin de tablette, la plupart de ces modules complémentaires ne sont nécessaires que dans les magasins à haute complexité. Pour les configurations typiques de commerce électronique, WP Rocket fonctionne très bien dès la sortie de la boîte.

Le 100/100 Secret: Perfecting Lazyloading et cette image LCP

Atteindre 99 sur Pagespeed Insights de Google a été une grande étape, mais nous n'étions pas satisfaits. Un point se tenait entre nous et la perfection.

Tout d'abord, nous avons abordé Element Bloat, ce qui signifie réduire le nombre d'éléments HTML sur la page. Google pénalise les pages avec plus de 810 éléments DOM, et nos menus, curseurs et pied de page à eux seuls nous ont poussés bien au-delà de 1 000.

Voici ce que nous avons fait:

• Contenu statique à chargé paresseux : Nous avons différé des éléments non critiques comme les menus d'en-tête, les curseurs de catégorie de produits, les carrousels de marque et le pied de page jusqu'à la peinture initiale.

• Éléments inutiles supprimés : nous avons élagué les niveaux de menu profonds et les zones de widget inactives désactivées sur mobile. Cela nous a aidés à obtenir le nombre total de Dom en dessous du seuil de pénalité de Google.

Même avec une page plus propre, nous ne pouvions toujours pas craquer 100. Le dernier numéro était l'image du héros.

À l'origine, c'était une image de 350 × 622 px avec des superpositions, des ombres et du texte - trop complexes pour se charger rapidement. Nous l'avons simplifié à un WebP de 350 × 350 PX et l'avons préchargé avec une priorité élevée en utilisant le code suivant:

 add_action('wp_head','ff_preload_mobile_image',1); function ff_preload_mobile_image(){ if(!is_front_page()||!wp_is_mobile()) return; echo '<link rel="preload" as="image" href="/uploads/lcp-simple.webp" importance="high">'; }

Et c'est ainsi que, en simplifiant et en préchargeant l'image du héros, nous avons obtenu un score parfait de 100/100 psi de Mobile.

L'impact commercial: vitesse en tant que moteur de croissance

Comme je l'ai expliqué, la vitesse n'a pas simplement amélioré notre score de pages. Cela a directement augmenté notre résultat net.

Après avoir optimisé les performances et tiré parti des caractéristiques de fusées WP, nous avons vu des gains mesurables dans les résultats:

• Les taux de conversion ont bondi de 33%.

• Les revenus par session ont augmenté plus de cinq fois , de 0,20 € à 1,11 €.

Ces résultats se sont traduits par 384 000 € supplémentaires de revenus au cours des 18 premiers mois après la migration .

Ce n'étaient pas des améliorations mineures. Ils ont égalé et finalement dépassé nos performances de verrouillage de pointe, prouvant que la vitesse du site était le levier clé de la croissance .

Comme j'aime à le dire: "Chaque milliseconde rasée a ajouté de vrais euros à la ligne de fond."

3 conseils pratiques pour les propriétaires d'entreprise

Si vous dirigez un magasin de commerce électronique, je voudrais partager certains conseils pratiques supplémentaires peuvent vous aider à tirer le meilleur parti de vos efforts de performance - que vous soyez technique ou non.

1. Suivez les utilisateurs réels: utilisez une véritable surveillance des utilisateurs (RUM) pour garder un œil sur les données sur le terrain. Les scores de laboratoire sont utiles, mais ce qui compte vraiment, c'est la façon dont votre site fonctionne pour les visiteurs réels. Assurez-vous simplement de le désactiver lors de l'exécution des tests PagesPeed Insights pour éviter les résultats biaisés.
2. Géolociez votre origine: hébergez votre site près de vos clients. Lorsque votre serveur d'origine est proche de votre public, tout, des recherches de produits à la paiement, devient plus rapide et plus fiable.
3. Appuyez sur WP Rocket: commencez par les paramètres par défaut. Ils gèrent automatiquement la plupart des problèmes de performances immédiatement. Une fois que votre ligne de base est solide, vous pouvez affiner en activant certaines fonctionnalités supplémentaires, par exemple pour optimiser les fichiers CSS et JS. Et si vous n'êtes pas averti de la technologie, n'oubliez pas: "Les sites plus rapides signifient moins de frustration, de plus de ventes et de clients plus heureux."

Emballage

Nous avons déménagé de Magento à WooCommerce, avons passé notre score de pages mobiles de 55 à un parfait 100 et augmenté les revenus par session de 0,20 € à 1,11 €. Ce voyage s'est clairement avéré une chose: la vitesse est plus qu'une étape technique. C'est un véritable moteur de la croissance des entreprises.

Nous nous sommes concentrés sur les performances, avons construit une base technique solide et utilisé WP Rocket pour débloquer rapidement les résultats. Si votre magasin WooCommerce se sent lent ou sous-performant, il est maintenant temps d'agir. Un site plus rapide signifie une expérience plus fluide pour vos visiteurs et des gains réels pour votre entreprise.