Procédure
Le CSS Critique permet d'afficher plus rapidement le contenu visible de vos pages. Lorsqu'un visiteur ouvre une page, son navigateur doit d'abord télécharger différents fichiers (images, scripts, feuilles de style CSS, etc.). Tant que certains de ces fichiers ne sont pas chargés, l'affichage peut être retardé. Avec le CSS Critique, les styles indispensables à l'affichage immédiat de la page sont chargés en priorité. Le reste des styles est chargé ensuite, en arrière-plan.
L'activation du CSS Critique peut améliorer la vitesse d'affichage de votre site, notamment sur mobile ou avec une connexion Internet lente.
Les bénéfices les plus courants sont :
Affichage plus rapide du contenu principal de la page.
Meilleure expérience utilisateur.
Amélioration potentielle des indicateurs de performance comme le LCP (Largest Contentful Paint).
Selon la configuration du site, le gain observé peut atteindre plusieurs centaines de millisecondes.
WordPress ne propose pas, pour l'heure, d'optimiser le CSS des pages et articles. Bien entendu, des dizaines de plugins WordPress différents existent pour répondre à ce besoin, dont le plugin LWS Optimize, crée par LWS.
Par défaut, l'option est désactivée sur ce dernier car elle augmente le temps de génération du cache, d'autant plus si la page charge un grand nombre de fichiers CSS, et peut provoquer des soucis d'affichage dans de rares cas.
Pour l'activer, rendez-vous dans le tableau de bord de LWS Optimize puis, d'ici, choisissez les paramètres Maximum et enregistrez ; cela activera toutes les actions du plugin, dont le CSS Critique.
Si vous ne souhaitez activer que le CSS Critique, vous pouvez également vous rendre dans les paramètres avancés, dans la section Front-End, où vous trouverez la ligne CSS Critique.
En cochant l'option, il vous sera demandé de choisir entre 3 modes de fonctionnement : Auto - local, Auto et Manuel. Une fois le choix fait, enregistrez vos modifications, ce qui activera la génération du CSS Critique et videra le cache actuel.
Chaque mode bénéficie d'un fonctionnement différent :
C'est le mode par défault du plugin ; le CSS des pages est analysé puis traité par le PHP de votre site, générant directement le CSS Critique. Il a l'avantage de fonctionner entièrement en local et d'être raisonnablement rapide mais en échange, il consomme plus de ressources sur le serveur que l'autre mode. Il reste cependant conseillé pour la majorité des sites.
Si les performances de votre hébergement sont limités, cela peut cependant provoquer des ralentissements pour vos visiteurs pendant la génération du CSS. Si vous activez le préchargement du cache, les performances peuvent se dégrader le temps de la génération.
Ce mode utilise le service de génération de CSS critique de LWS. Un peu plus lent qu'en passant en local, notamment si l'API de génération est surchargée, son avantage principal est que toute la génération se fait hors du serveur, proposant de bien meilleures performances que la génération locale. En cas de forte influence, la génération peut cependant êtrre indisponible, elle n'est donc pas aussi fiable qu'en locale.
En cas d'indisponibilité temporaire du service, le plugin bascule automatiquement sur la génération locale. Egalement, la génèration étant faite différement du mode local, celle-ci peut fournir de meilleurs résultats selon les sites.
Manuel
Ce mode est destiné aux utilisateurs avancés.
Il permet de renseigner manuellement votre propre CSS critique dans la zone prévue à cet effet. Le CSS ajouté sera utilisé sur l'ensemble du site.
En mode automatique, le CSS critique est généré en même temps que le reste du cache et des options (telles que la minification) ; cela ne se produit que lors du premier accès, les prochianes visites utilseront le cache généré.
Après activation, certains composants qui chargent leurs styles de manière dynamique (carrousels, fenêtres modales, popups, etc.) peuvent ne pas s'afficher correctement.
Si cela se produit :
Testez d'abord le mode Auto — service LWS.
Si le problème persiste, utilisez le mode Manuel pour ajouter les styles manquants.
La génération automatique ne prend en compte que les feuilles de style hébergées sur votre domaine.
Les styles chargés depuis des services externes (CDN, Google Fonts, etc.) ne sont pas inclus dans le CSS critique généré automatiquement.
Le CSS Critique est un excellent levier pour accélérer l’affichage de vos pages et améliorer l’expérience de vos visiteurs 🚀. En mettant en priorité les styles essentiels, vous réduisez le temps de chargement du contenu visible et optimisez potentiellement vos indicateurs de performance, comme le LCP 📈.
Vous savez maintenant comment : comprendre l’intérêt du CSS Critique, l’activer dans WordPress avec LWS Optimize, choisir entre les modes Auto — génération locale, Auto — service LWS et Manuel, déterminer quand il devient actif et anticiper les points de vigilance liés aux composants dynamiques et aux styles externes 😉.
En appliquant ces bonnes pratiques, vous pourrez profiter d’un site plus rapide, plus fluide et plus agréable à naviguer pour vos utilisateurs ✨.
Merci pour votre lecture 🙏 N’hésitez pas à laisser un commentaire sur le service et à partager votre retour d’expérience ! 🙂