Accélérer le chargement de CSS avec Jetpack Boost

Jetpack Boost aide votre site à se charger plus rapidement en optimisant la manière dont le CSS est diffusé. La fonctionnalité CSS critique déplace les informations de style les plus importantes en haut de vos pages, afin que votre contenu s’affiche plus tôt, en particulier sur mobile. Cela améliore l’expérience de vos visiteurs et le score de vitesse de votre site.

Selon votre forfait, cette fonctionnalité est disponible en deux versions : génération manuelle (forfait gratuit) et génération automatique (forfait payant).

Qu’est-ce que le CSS critique ?MD

Le CSS critique désigne les styles essentiels nécessaires au rendu de la partie visible d’une page. Jetpack Boost extrait ce CSS et l’insère directement dans le <head> de votre page afin de réduire les délais de chargement des éléments visuels essentiels.

Pour prendre en charge les mises en page sur ordinateur et mobile, Boost analyse votre site à plusieurs largeurs d’écran et génère un ensemble unique de CSS critique qui fonctionne sur tous les appareils.

Générer manuellement le CSS critiqueMD

Avec la version gratuite de Jetpack Boost, vous générez manuellement le CSS critique. Générez-le à nouveau après toute modification affectant la structure HTML ou CSS de votre site.

Comment activer et générer le CSS critiqueMD

1. Accédez à la section « Jetpack → Boost » dans l’administration de WP.
2. Développez la section « Chargement de la page ».
3. Activez l’option « Optimiser le chargement du CSS critique (manuel) ».
4. Cliquez sur le bouton Générer.

Restez sur le tableau de bord de Boost pendant la génération du CSS critique. Si vous quittez cette page, le processus se mettra en pause.

Quand régénérer le CSS critiqueMD

Régénérez le CSS critique après :

• Modification ou mise à jour de votre thème
• Ajout ou modification d’articles et de pages avec de nouvelles mises en page ou de nouveaux blocs
• Installation ou mise à jour d’extensions liées au design
• Mise à jour du cœur de WordPress

Un forfait payant Jetpack Boost vous permet d’automatiser la génération du CSS critique.

Générer automatiquement le CSS critiqueMD

Le CSS critique automatisé est disponible avec le forfait payant de Jetpack Boost ou avec le Jetpack Complete.

Pour générer automatiquement le CSS critique :

1. Accédez à la section « Jetpack → Boost » dans l’administration de WP.
2. Développez la section « Chargement de la page ».
3. Activez l’option « Optimiser le chargement du CSS critique (automatique) ».

Une fois cette option activée, Boost génère automatiquement le CSS critique lorsque vous apportez des modifications à votre site.

Avantages de la génération automatique du CSS critiqueMD

• Le CSS critique reste automatiquement à jour après les modifications apportées au site.
• Réduit le besoin de régénérer manuellement le CSS critique.
• Utilise une génération côté serveur pour des résultats plus homogènes.
• Aide à éviter l’utilisation d’un CSS critique obsolète après des modifications de design ou de mise en page.
• Vous donne accès à une assistance directe en cas de problème.

Messages d’étatMD

Jetpack Boost affiche des messages d’état sous le CSS critique pour vous indiquer si la génération s’est terminée correctement ou si votre intervention est nécessaire.

• La génération automatique est activée. Le CSS critique sera généré automatiquement par Boost avec les forfaits payants chaque fois que vous apporterez des modifications.
• Le CSS critique a été généré avec succès. Boost indique le nombre de fichiers générés et la date de leur dernière mise à jour.
• Certains fichiers n’ont pas pu être générés. Boost fournit des recommandations pour les pages concernées.
• Une page est uniquement accessible aux visiteurs connectés. Boost ne peut pas lire la page comme un visiteur déconnecté. Si la page est volontairement privée, vous pouvez ignorer ce message. Si elle doit être publique, vérifiez l’extension ou le réglage qui oblige les visiteurs à se connecter, puis réessayez.
• Une autre erreur de génération s’est produite. Suivez les recommandations affichées dans Boost ou consultez la section de dépannage du CSS critique dans le guide.

Désactiver le CSS critique automatique pour les développeursMD

Si vous disposez du forfait payant, mais préférez la version manuelle, vous pouvez désactiver la fonctionnalité automatique en ajoutant ce filtre à une extension indispensable (mu-plugin) :

add_filter( "jetpack_boost_has_feature_cloud-critical-css", '__return_false' );

Une fois cette option désactivée, l’option manuelle « Optimiser le chargement du CSS critique (manuel) » réapparaîtra sur votre tableau de bord.

DépannageMD

Si Jetpack Boost ne parvient pas à générer le CSS critique ou si un message signale un problème, suivez les étapes de notre guide complet :

Dépannage du CSS critique dans Jetpack Boost