Chargement Asynchrone du CSS

Si vous utilisez WP Rocket 3.9 ou avant, cette information fait référence à la fonctionnalité : Optimiser le Chargement du CSS.
Dans WP Rocket 3.10 et plus, l'option s'appelle désormais Chargement Asynchrone du CSS. Elle ne peut pas être activée en même temps que Supprimer les CSS inutilisés.

Supprimer les ressources CSS inutilisées est la méthode recommandée pour l'optimisation CSS. Charger CSS de manière asynchrone ne doit être utilisé qu'en cas de problème avec Remove Unused CSS.

Dans cette documentation

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 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.10, 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 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

Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.