Comprendre WordPress CSS
Avant de plonger, comprenons comment fonctionne le CSS standard dans WordPress.
Chaque thème WordPress se compose de style.css qui contient tout le code nécessaire pour styliser votre site. Les développeurs de thèmes doivent prendre en charge toutes les fonctionnalités de WordPress, notamment les articles de blog, les commentaires, la page de produits, la page d'adhésion, les formulaires, etc. Les autres plugins que vous installez peuvent également ajouter des feuilles de style CSS similaires.
Cela peut rendre les fichiers CSS gonflés et volumineux de 200 Ko ou même plus.
Qu'est-ce que le chemin critique CSS ?
Au fur et à mesure que vos fichiers CSS grandissent, votre navigateur doit télécharger ces fichiers volumineux, les analyser et les afficher. Aussi connu sous le nom de blocage de rendu. Il incrémentera également le premier rendu significatif et le premier rendu significatif.
Critical Path CSS est le CSS requis pour afficher le contenu ci-dessus sur chaque page Web. Comme son nom l'indique, CSS "critique", qui aide le navigateur à le dessiner et à le restituer rapidement avant de charger des fichiers CSS complets.
Habituellement, le css du chemin critique est intégré dans l'en-tête et le fichier css source est chargé de manière asynchrone ou dans le pied de page pour faciliter l'utilisation.
Pourquoi Critical Path CSS est-il si important ?
Vous avez dû déjà voir un avertissement d'outils comme Google PageSpeed Insights ou GTmetrix indiquant "optimiser la livraison de css" ou "différer les css inutilisés".
Le CSS critique n'a rien à voir avec le temps de chargement de la page. Il n'augmente/diminue pas le temps de chargement. Mais donne une bien meilleure expérience utilisateur. Cela aide à "rendre" ou "coloriser" rapidement une page Web.
- Améliore le premier tirage de contenu (FCP)
- Améliore le premier paiement significatif (FMP)
- Supprimer les CSS inutilisés (techniquement, ne les supprimez pas, mais donnez la priorité aux CSS "utiles")
Voici deux captures d'écran de mon blog avec et sans CSS critique.
Comme vous pouvez le voir dans la section "pas de chemin css critique", il a fallu près de 5 secondes pour montrer à l'utilisateur quelque chose d'utile sur un appareil mobile. Le navigateur doit faire une requête HTTP supplémentaire au fichier CSS, le télécharger, l'analyser afin de commencer le rendu. Mais lors de l'utilisation de CSS critiques, tous les CSS nécessaires doivent être en ligne et le navigateur peut commencer le rendu immédiatement après le chargement du fichier HTML en une seconde ou moins.
Comment créer un CSS critique dans WordPress ?
Il existe plusieurs façons de générer du CSS critique dans WordPress.
Utiliser des plugins de mise en cache
WP Rocket est un plugin de mise en cache premium qui fonctionne très bien.
L'une des raisons pour lesquelles j'utilise WP Rocket sur chaque site est la génération CSS critique elle-même. Ils génèrent du CSS critique séparément pour la page d'accueil, la page de publications, la page de catégorie, la page de produit, etc. et l'intègrent. Ils restaureront le CSS critique en cas de modification du thème ou du paramètre.
Tout peut être fait en appuyant sur un bouton.
Autres plugins de mise en cache pouvant générer des CSS critiques
Swift Performance et LiteSpeed (nécessite le serveur LiteSpeed/OpenLiteSpeed) sont des plugins similaires qui peuvent générer du CSS critique. Ces deux plugins ont un cloud et un cache complet intégrés à leurs serveurs.
Utiliser Autoptimize + Générateur CSS critique gratuit
Il existe des outils en ligne tiers qui fournissent des CSS importants en saisissant l'URL de votre site. pegasaas est un excellent outil gratuit.
Voici comment procéder :
Étape 1. Accédez à https://pegasaas.com/critical-path-css-generator/ et entrez votre URL. Copiez le "Critical Path CSS" généré.
Étape 2 Dans les paramètres d'optimisation automatique (activer les paramètres avancés), sous "Options CSS", cochez "Inline and Defer CSS" et collez le CSS copié.
Avantages:
- Est libre
Moins :
- Pas de CSS critique distinct pour les différents types de pages (ex : page d'accueil, page de publications, page de catégorie, page de produit, etc.)
- Ne pas reconstruire automatiquement lors d'un changement de thème/paramètre
Pourquoi WordPress ne peut-il pas lui-même générer du CSS critique ?
Comme vous l'avez peut-être remarqué, la création d'un chemin critique CSS active les services externes. Alors pourquoi WordPress ne peut-il pas le générer lui-même ?
La création de Critical CSS est rendue possible par des projets open source tels que Critical (par Google), CriticalCSS ou penthouse. Tous ces projets sont basés sur NodeJS, pas sur PHP. Vous devez donc installer NodeJS sur votre serveur. La plupart des fournisseurs d'hébergement mutualisé/géré ne l'autorisent pas pour plusieurs raisons.
