Problèmes de Critical CSS et FOUC

Si vous remarquez que votre site se charge sans style pendant quelques instants avant de se corriger, vous pourriez être en train de vivre un FOUC, c'est-à-dire un "Flash Of Unstyled Content" et c’est lié à l'option Optimiser le chargement du CSS.

Les FOUC, ou autres problème relatifs au Critical CSS peuvent être réglés de l'une des manières suivantes :

Désactiver l'option sur des pages en particulier

Si vous ne rencontrez le problème que sur certaines pages, vous pouvez désactiver l'option Optimiser le chargement du CSS uniquement pour ces pages.

Générer un critical path CSS spécifique à une page

Lorsque les pages d'un même type de contenu ont une mise en page sur mesure et des feuilles de style différentes, il peut être utile de générer un Critical Path CSS à part pour ces pages. Veuillez consulter : Comment générer le Critical CSS pour une page/post spécifique

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

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);