Chargement Asynchrone du CSS

Nous recommandons la méthode Supprimer les ressources CSS inutilisées pour l'optimisation des CSS. Le Chargement Asynchrone du CSS ne doit être utilisée que si la fonction Supprimer les ressources CSS inutilisées pose problème.

En plus, le Chargement Asynchrone du CSS ne peut pas être activé en même temps que Supprimer les ressources CSS inutilisées.

L'option Chargement Asynchrone du CSS adresse la recommandation de PageSpeed suivante:

Éliminez les ressources qui bloquent le rendu

Pour ce faire, elle automatise: 

1. La génération du Critical Path CSS nécessaire au rendu de la partie visible de votre site web
2. Le chargement asynchrone, c'est-à-dire différé, de tous les autres fichiers CSS, sans blocage du rendu. 

Note: Cette fonction est automatiquement désactivée sur les environnements où le constante WP_ENVIRONMENT_TYPE est définie comme locale, car elle doit établir une connexion avec l'outil de WP Rocket pour générer le chemin critique CSS.

L'option Chargement Asynchrone du CSS de WP Rocket permet le chargement asynchrone des fichiers CSS et concerne cette  recommandation PageSpeed :

"Supprimer les ressources bloquant le rendu de la page"

Il accomplit cela de manière automatique : 

1. En générant le Critical Path CSS nécessaire au rendu de la partie visible de votre site web
2. En chargeant tous les autres fichiers CSS de manière asynchrone, c'est-à-dire différée, sans bloquer le rendu. 

Générer le Critical Path CSS

Lorsque vous activez l'option Chargement Asynchrone 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 feuilles de style pour le Critical CSS - un pour le bureau et un pour les appareils mobiles.

Si vous utilisiez déjà WP Rocket avant la mise à jour vers la version 3.10 avec les deux options suivantes Optimiser le chargement du CSS et Créer un fichier de cache à part pour les mobilesactivé, votre site continuera à utiliser le même chemin critique CSS pour le bureau et le mobile. Si vous souhaitez adopter la nouvelle approche et avoir un chemin critique CSS distinct pour chacun d'entre eux, 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, puis le bouton sera supprimé.

Par la suite, chaque fois que vous régénérerez le Critical Path CSS de 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 Chargement Asynchrone 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