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.

Le Critical Path CSS sera supprimé lorsque la page sera chargée. Cela devrait permettre d'éviter les problèmes de mise en page lorsqu'un site injecte du JavaScript ou met à jour les classes CSS après l'application du Critical Path CSS.

Le CSS est stocké dans le dossier suivant sur votre serveur : /wp-content/cache/critical-css/

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.

Si vous voyez un message d'erreur lors de la génération du Critical CSS, veuillez consulter le guide de dépannage.

Critical path CSS spécifique aux mobiles

Si vous avez activé l'option Créer un fichier de cache à part pour les mobiles, dans l'onglet Cache, le plugin générera deux ensembles de Critical CSS - un pour bureau et un pour mobile. Cela se produira automatiquement sur les nouvelles installations de WP Rocket, à partir de la version 3.6.

Si vous utilisiez déjà WP Rocket avant la mise à jour vers la version 3.6, avec les options Optimiser le Chargement du CSS et Créer un fichier de cache à part pour les mobiles activées, votre site continuera à utiliser le même Critical CSS pour les ordinateurs de bureau et les appareils mobiles. Si vous souhaitez adopter le nouveau comportement et avoir un Critical CSS séparé pour chacun, vous pouvez choisir de l'activer en allant dans l'onglet Outils et en cliquant sur le bouton :

Il s'agit d'une action unique et le bouton sera ensuite supprimé.

Ensuite, lorsque vous régénérez le Critical Path CSS pour votre site, le CPCSS spécifique aux mobiles sera automatiquement défini.

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 :
Pour chaque lien vers une feuille de style, un élément supplémentaire sera ajouté pour le précharger
Nous allons également définir l'attribut media à print et ajouter this.media="all" à l'attribut onload

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