Optimiser le chargement du CSS

Dans cette documentation

• Générer le Critical Path CSS
• Quand régénérer le Critical Path CSS ?
• Empêcher la génération automatique du Critical Path CSS
• Modifier le Critical Path CSS généré
• Critical Path CSS de Secours
• Exclure un fichier du chargement asynchrone

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.

Ainsi, le CSS Critical Path généré par WP Rocket suit les fonctionnalités disponibles en front sur les différents types de pages de votre site Web.

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.

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.

Modifier le Critical Path CSS généré

Si vous souhaitez modifier le Critical Path CSS généré par notre outil, suivez les instructions suivantes :

1

Utilisez l’outil pour générer automatiquement le critical path CSS pour votre site.

2

Désactivez les futures génération automatique en ajoutant le plugin d’aide ci-dessus.

3

Les fichiers CSS générés sont stockés sur votre serveur : /wp-content/cache/critical-css
Si vous êtes développeur et que vous comprenez le CSS, vous pouvez les modifier directement.

4

Videz le cache de WP Rocket

Critical Path CSS de Secours

Au cas où notre outil ne peut pas générer le critical path CSS, vous pouvez utiliser ce champs de secours pour y mettre le vôtre. Il sera appliqué à chaque fois que le critical path CSS n'existe pas déjà pour la page. Pour créer le code CSS nécessaire, vous pouvez utiliser cet outil  Critical Path CSS Generator :

1

Désactivez WP Rocket avant d'utiliser cet outil !

2

Entrez votre URL dans l'outil et copiez le CSS généré dans le champ Critical path CSS de WP Rocket : 

Remarque : Vous n'aurez pas besoin du code JavaScript fourni par l'outil. Copiez juste le CSS dans les réglages de WP Rocket qui se chargera de la partie JS automatiquement.

3

Attention ! Vous aurez besoin probablement de transformer toutes les URLs relatives de ce bout de code en URLs absolues manuellement (ex : pour les images background, fonts etc.)

Par exemple, si le CSS généré contient un chemin relatif à une police, comme ceci :

@font-face{font-family:droid_serifregular;src:url(../DroidSerif-webfont.eot);
	

Le chemin relatif (indiqué ici par  ../ dans l'URL) ne sera pas bon lorsqu'il sera retiré de son contexte. Vous avez alors besoin de le remplacer par son URL absolue, avec le chemin correct, par exemple :

@font-face{font-family:droid_serifregular;src:url(http://example.com/wp-content/themes/neutro/font/droid_serif_regular/DroidSerif-webfont.eot);
	

Exclure un fichier du chargement asynchrone

Si vous avez besoin d'exclure un fichier CSS particulier du chargement asynchrone, suivez-ce guide :  Exclure des fichiers CSS du chargement Asynchrone