La Meilleure Configuration pour Cloudflare pour Obtenir des Scores Élevés en LCP, TBT et Web Vitals pour Votre Magasin

La performance web est un facteur critique pour créer une expérience d'achat fluide pour vos clients. Dans cet article, je vais vous montrer comment obtenir des scores élevés dans les Web Vitals comme le Largest Contentful Paint [LCP] et le Total Blocking Time [TBT] avec Cloudflare. Ces configurations vont des ajustements simples aux optimisations avancées.
Avant de plonger, prenez un moment pour évaluer la performance actuelle de votre site web à l'aide d'un outil comme Google PageSpeed Insights. Cela vous aidera à suivre les améliorations après l'application de ces réglages.
Pourquoi les Web Vitals Sont Importants
Les Web Vitals mesurent des aspects clés de l'expérience utilisateur. Voici un aperçu rapide des métriques les plus critiques sur lesquelles nous allons nous concentrer :

Métrique	Ce Qu'elle Mesure	Pourquoi C'est Important
LCP	Temps pris pour charger le plus grand élément visible	Affiche la perception de la vitesse du site par les utilisateurs
TBT	Temps bloqué par des tâches JavaScript longues	Impacte l'interactivité et la réactivité
CLS	Changement de mise en page pendant le chargement de la page	Assure la stabilité visuelle et l'utilisabilité

En optimisant vos paramètres Cloudflare, vous pouvez considérablement augmenter ces scores, menant à une expérience plus rapide et plus engageante pour vos visiteurs.

Étape 1 : Configurez Votre Domaine sur Cloudflare et Activez le CDN

Pour commencer à optimiser la performance de votre site web avec Cloudflare, vous devez d'abord vous assurer que votre domaine est correctement configuré sur leur plateforme et que la fonction CDN (Content Delivery Network) est activée.

Comment Activer le CDN Cloudflare

1. Connectez-vous à votre compte Cloudflare et sélectionnez votre domaine.
2. Naviguez vers la section DNS.
3. Sous les Enregistrements DNS, localisez l'enregistrement A ou CNAME de votre domaine.
4. Cliquez sur l'icône en nuage orange à côté de l'enregistrement pour activer la fonction Proxy Cloud. Lorsqu'elle est activée, l'icône deviendra orange vif, signalant que votre domaine est maintenant routé à travers le CDN de Cloudflare.

Remarque Spéciale pour les Utilisateurs de Selldone

Si vous utilisez Selldone, vous devrez configurer correctement votre domaine pour s'intégrer au CDN de Cloudflare. Cela garantit que le CDN externe de Selldone fonctionne parfaitement avec votre site, livrant du contenu mis en cache efficacement tout en maintenant la compatibilité avec la plateforme Selldone.
Étapes à Suivre pour la Configuration de Selldone :

1. Configurez votre domaine personnalisé dans le tableau de bord de Selldone.
2. Assurez-vous que le CDN externe est pointé vers Cloudflare en configurant correctement vos enregistrements DNS.
3. Confirmez que les paramètres de Cloudflare sont entièrement activés, y compris l'état de Proxy Cloud. Ces étapes garantiront que votre site web alimenté par Selldone profite pleinement des fonctionnalités d'optimisation de performance de Cloudflare.

Étape 2 : Fonction de Test de Vitesse de Cloudflare

Cloudflare propose un outil de Test de Vitesse intégré qui offre des aperçus précieux sur la performance de votre site web. Cette fonction mesure des métriques clés telles que le temps de chargement, la réactivité et les améliorations globales de vitesse après la mise en œuvre des services de Cloudflare.

Étape 3 : Activez les Informations sur les Utilisateurs en Temps Réel dans Cloudflare

Comprendre le comportement de vos utilisateurs en temps réel est crucial pour optimiser leur expérience sur votre site web. La fonction Real-Time User Insights (RUN) de Cloudflare vous permet de suivre les données en direct sur la manière dont les visiteurs interagissent avec votre site, fournissant des métriques exploitables pour améliorer la performance et l'utilisabilité.

Étape 4 : Activez Toutes les Fonctionnalités d'Optimisation dans Cloudflare

Pour maximiser la performance de votre site web, activez les fonctionnalités d'optimisation disponibles dans Cloudflare sous l'onglet Speed. Ces fonctionnalités sont conçues pour améliorer les temps de chargement, réduire l'utilisation de la bande passante, et améliorer l'expérience utilisateur globale sans effort.
  Certaines des fonctionnalités les plus importantes pour accélérer le site nécessitent une licence PRO.
Assurez-vous d'activer « Cloudflare Fonts » et « Rocket Loader »

Étape 5 : Résultats Immédiats avec le Plan Gratuit de Cloudflare

Même avec le Plan Gratuit de Cloudflare, vous pouvez constater des améliorations significatives de performance en activant les bonnes fonctionnalités. J'ai appliqué ces optimisations à marketplace.hanscristy.com, et les résultats ont été immédiats. Les changements ont non seulement amélioré les métriques des Web Vitals comme LCP et TBT, mais ont également amélioré l'expérience utilisateur globale.
 

Étape 6 : Comment les Optimisations de Cloudflare et Selldone Affectent la Performance dans la Vie Réelle

Permettez-moi de vous expliquer comment les optimisations de Cloudflare et les technologies dédiées de Selldone se combinent pour créer des performances sans précédent, même dans des scénarios de test difficiles.

Comprendre les Défis des Tests de Performance

Des outils comme Lighthouse, GTmetrix, et des plateformes similaires sont principalement conçus pour des pages statiques ou des sites web qui rendent du contenu côté serveur. Cependant, Selldone fonctionne différemment :

• 100% PWA : Chaque aspect de la plateforme de Selldone—son site principal, son tableau de bord, sa vitrine, et plus encore—est construit comme une Progressive Web App (PWA). Cela signifie que tout le rendu se fait côté client, offrant aux utilisateurs une flexibilité immense pour concevoir des tableaux de bord et des vitrines personnalisées.
• Chargement Dynamique de Domaine : Les utilisateurs peuvent charger Selldone sur n'importe quel domaine sans se soucier de la mise en œuvre d'un backend complexe. Le système gère tout de manière dynamique, livré sous la forme d'un seul fichier JavaScript.

Cette approche unique offre flexibilité et rapidité, mais crée des défis uniques lors des tests avec des outils conçus pour les pages rendues côté serveur.

Pourquoi Selldone Est 10 à 100 Fois Plus Rapide dans la Vie Réelle

Tandis que les pages statiques comptent sur le serveur pour rendre le HTML pour chaque requête utilisateur, l'approche PWA de Selldone est fondamentalement différente :
Récupération Efficace des Données :

• Au lieu de rendre des pages entières sur le serveur, Selldone envoie une structure JSON légère contenant les données requises.
• Par exemple, lorsque un utilisateur clique sur un produit, la plateforme récupère uniquement les données nécessaires (comme les détails du produit) au lieu de recharger ou rendre toute la page.

Pas de Retards de Rendu Côté Serveur :

• Contrairement à des plateformes comme WooCommerce, où chaque clic peut déclencher un rendu côté serveur, Selldone élimine totalement ce goulet d'étranglement. Tout est géré côté client, réduisant drastiquement la latence.

Avantage de Vitesse en Temps Réel :

• Les utilisateurs vivent des transitions de pages presque instantanées. Cette rapidité dans la vie réelle donne à la plateforme une sensation de vitesse nettement supérieure par rapport aux sites web rendus côté serveur, même si les scores de test traditionnels ne reflètent pas totalement cet avantage.

Dépasser le Goulet d'Étranglement Technologique

Obtenir de bons scores de test pour des PWAs rendues côté client a historiquement été un défi en raison de :

• Retards d'Exécution de JavaScript : Le rendu côté client dépend fortement de JavaScript, que les outils de test pénalisent souvent.
• Contenu Dynamique : Contrairement au HTML statique, le chargement de contenu dynamique peut sembler plus lent dans les tests synthétiques.

Mais Selldone a surmonté ces limitations pour la première fois sur Internet en combinant :

• Les optimisations de Cloudflare (comme Rocket Loader™ et la Compression Brotli) pour rationaliser la livraison des ressources.
• Une architecture PWA avancée pour la récupération et le rendu de données en temps réel.

Performance dans le Monde Réel vs. Scores Synthétiques

Tandis que les tests synthétiques peuvent montrer des scores inférieurs pour des plateformes rendues côté client comme Selldone, la performance dans le monde réel raconte une histoire différente. Le tableau de bord et la vitrine de Selldone offrent une expérience 10 à 100 fois plus rapide par rapport aux plateformes rendues côté serveur, ce qui en fait la solution idéale pour les besoins modernes du commerce électronique.
  Si vous souhaitez reproduire les paramètres Cloudflare que nous utilisons pour une performance optimale, voici une liste des fonctionnalités activées :

Termes de Performance Web

Voici une explication amicale et facile à comprendre des termes de performance web dans Web Vitals :

LCP (Largest Contentful Paint)

LCP mesure combien de temps il faut pour que la plus grande partie visible d'une page web (comme une grande image ou un en-tête) se charge et soit vue par les utilisateurs. Pensez-y comme le temps nécessaire pour que votre page semble « prête » à commencer à être lue ou à interagir.

CLS (Cumulative Layout Shift)

CLS suit combien de choses se déplacent de manière inattendue sur une page web pendant son chargement. Par exemple, si un bouton change de position juste au moment où vous êtes sur le point de cliquer dessus, c'est un changement de mise en page. Un score CLS bas signifie que votre site se sent stable et fluide.

INP (Interaction to Next Paint)

INP mesure la rapidité avec laquelle votre page web réagit aux interactions des utilisateurs, comme cliquer sur un bouton ou taper dans une barre de recherche. Un INP plus rapide signifie que votre site se sent réactif et que les utilisateurs ne ressentent pas de frustration en attendant que les actions se produisent.

TBT (Total Blocking Time)

TBT calcule le temps pendant lequel votre page est non réactive pendant le chargement, par exemple lorsque l'utilisateur essaie de faire défiler ou de cliquer mais que rien ne se passe. Un TBT plus bas signifie que votre page est meilleure pour le multitâche, permettant aux utilisateurs d'interagir en douceur pendant le chargement.