Optimiser le chargement du CSS
Dans cette documentation
- Générer le Critical Path CSS
- Comment générer le Critical CSS pour une page/post spécifique
- Comment vérifier si l’option Optimiser le chargement du CSS fonctionne correctement ?
- Quand régénérer le Critical Path CSS ?
- Empêcher la génération automatique du Critical Path CSS
L'option Optimiser le chargement du CSS de WP Rocket permet le chargement asynchrone des fichiers CSS et concerne cette recommandation PageSpeed :
"Optimisez l'affichage des styles CSS" ou " Optimize CSS delivery"
Notre générateur de critical path CSS ne génère pas encore de CSS spécifique au mobile. Si vous avez un thème Responsive, le critical CSS devrait être semblable, mais si vous avez un thème séparé dédié au mobile, nous ne pouvons pas le générer encore.
Générer le Critical Path CSS
WP Rocket s'efforce de rendre aussi pratique que possible la gestion des optimisations de performance avancées comme le chargement asynchrone du CSS et le Critical CSS.
Lorsque vous activez l'option Optimiser le chargement du CSS, le CSS sera chargé de manière asynchrone sur votre site. En plus, le Critical Path CSS sera automatiquement généré en arrière plan et ajouté au prochain chargement de votre page.
Notre outil externe récupérera la première entrée de chaque type de publication publiée (articles, pages, produits, etc...), ainsi que les pages d'archives publiées (catégories, tags, catégories de produits, etc...). Il en extraira le Critical Path CSS pour chacun séparément, et renverra le code au plugin WP Rocket qui l'ajoutera ensuite aux pages respectives à la demande du visiteur, ou du pré-chargement du cache WP Rocket.
Les chemins relatifs des images et des polices seront automatiquement transformés en URLs absolues.
Le Critical Path CSS sera découpé et minifié avec soin. Cela signifie que les espaces requis (comme à l'intérieur des opérations calc ()) ou les backslashes (comme '\ f311' pour un glyphe dans une police d'icônes) seront conservés.
Par exemple, s'il y a un Slider sur votre page d'accueil, le Critical Path CSS pour cette page reflétera cette fonctionnalité, tandis que leCritical Path CSS pour un article de blog pourra contenir un code légèrement différent.
Critical path CSS spécifique aux mobiles
Comment générer le Critical CSS pour une page/post spécifique
Si vos pages contiennent du CSS qui varie selon les types de contenu et que vous devez générer un Critical CSS spécifique pour une page ou un article particulier, vous pouvez le faire à partir de l'écran d'édition de ce contenu.
Dans la métabox Options de WP Rocket, cliquez sur le bouton : Générer un CPCSS spécifique
Le Critical Path CSS sera généré pour cette page. Si vous n'avez plus besoin du CPCSS spécifique à une page, vous pouvez le supprimer en cliquant sur le bouton : Revenir au CPCSS par défaut
Comment vérifier si l’option Optimiser le chargement du CSS fonctionne correctement ?
1. Dans le code source de la page, vérifiez ceci :
- la balise de style rocket-critical-css :
- Les éléments supplémentaires suivants seront ajoutés pour chaque lien vers une feuille de style :
rel='preload'
-
as="style" onload="this.onload=null;this.rel='stylesheet'"
data-rocket-async="style"
Donc, une balise link
comme celle-ci :
<link rel='stylesheet' id='twentytwenty-style-css' href='https://www.example.org/wp-content/themes/twentytwenty/style.css?ver=1.4' media='all' />
deviendra :
<link rel="preload" href="https://www.example.org/wp-content/themes/twentytwenty/style.css?ver=1.4" as="style">
<link rel="stylesheet" id="twentytwenty-style-css" href="https://www.example.org/wp-content/themes/twentytwenty/style.css?ver=1.4" media="print" onload="this.onload=null;this.media='all'">
2. Dans PageSpeed, les fichiers CSS ne bloqueront plus le rendu.
Quand régénérer le Critical Path CSS ?
Lorsque vous faites des modification de votre feuille de style, que vous ajoutez/modifiez du custom CSS via l'outil de personnalisation de WordPress (ou un plugin), vous devriez régénérer le Critical Path CSS via le menu WP Rocket de la barre d'admin :
Empêcher la génération automatique du Critical Path CSS
Vous pouvez empêcher le génération automatique du Critical Path CSS en installant le plugin d’aide suivant :
📥 Télécharger (.zip): WP Rocket | No Auto-generated Critical CSS
Développeurs : vous trouverez le code de ce plugin sur GitHub.
Pour le dépannage des problèmes d'affichage liés à cette option, veuillez consulter ce guide