CSS critique dans WordPress : qu'est-ce que c'est et comment optimiser la livraison du CSS

Lors de l'exécution d'un audit de performance sur Google PageSpeed ​​Insights, vous constaterez que Google vous recommande «d'éliminer les ressources bloquant le rendu» presque à chaque fois. Cela signifie que vous devez toujours charger vos CSS et JavaScript critiques en priorité.

Mais comment décider quel CSS est critique et lequel ne l'est pas ? Quelle partie de votre site Web devriez-vous « retarder » pour en accélérer une autre ? Il s'agit de priorités et de trouver quelles ressources CSS sont essentielles et comment optimiser leur livraison.

Plongeons dedans.

Qu'est-ce que le CSS critique et pourquoi est-ce important pour les performances ?

Le CSS critique est une technique qui extrait le CSS au-dessus du pli pour afficher la page le plus rapidement possible. C'est comme prendre le strict minimum de CSS pour afficher le contenu visualisé par un visiteur.

En d'autres termes, le CSS critique est essentiel pour optimiser les performances. Avant de rendre la page, votre navigateur doit télécharger et analyser les fichiers CSS, faisant de ces fichiers une ressource bloquant le rendu. Plus vos fichiers CSS sont volumineux, plus le navigateur mettra de temps à les traiter. Toutes ces requêtes créées par des fichiers CSS lourds augmenteront le temps de chargement d'une page Web, ce qui dérangera les visiteurs. et Google.

La vitesse de la page peut également affecter vos performances de référencement en raison du nouveau facteur de classement, y compris les Core Web Vitals. Il s'agit d'un ensemble de facteurs mis en œuvre par Google pour mesurer l'expérience utilisateur, y compris la vitesse d'une page. Plus l'expérience est bonne, meilleur sera votre classement.

Connaissez-vous les six métriques Lighthouse qui mesurent les performances ? Deux d'entre eux - First Contentful Paint (FCP) et First Input Delay (FID) - mesurent la vitesse perçue de votre site Web. Si ces mesures sont en bon état, votre expérience utilisateur mesurée par Google le sera également. Cependant, si les deux KPI sont dans le rouge, vous feriez mieux d'optimiser votre CSS critique.

CSS critique expliqué en langage simple

En clair, le CSS critique est une tâche d'optimisation. C'est comme dire à votre navigateur de ne charger que le CSS visualisé par le visiteur. Cela contribue à améliorer la vitesse perçue, c'est-à-dire la vitesse à laquelle le site Web apparaît à un visiteur.

Faisons un exercice rapide avec l'image ci-dessous. Imaginez que vous êtes un utilisateur mobile accédant à un site Web.

Scénario #1 - En haut, il y a une page avec CSS bloquant le rendu. Vous voyez une page vierge jusqu'à ce que l'intégralité du fichier CSS soit chargée.

Scénario #2 – En bas, le CSS critique est rendu en premier. Vous commencez à voir la page bien plus tôt puisque le navigateur a déjà commencé à charger la feuille de style la plus importante.

Question : Quel scénario vous semble le plus rapide ?

Réponse : Nous sommes tous d'accord pour dire que la vitesse perçue du résultat net est meilleure.

Votre visiteur ressentira une diminution perçue du temps de chargement de la page en raison d'un rendu plus rapide de la page lorsqu'il est fait correctement.

Pourquoi le CSS critique est-il nécessaire ?

Le chargement d'une feuille de style CSS est généralement la façon dont vous stylisez votre site WordPress. CSS est le langage utilisé pour décrire une page Web, comme les couleurs, la mise en page et les polices. Sans CSS, le Web ressemblerait à notre colonne de gauche ci-dessous :

Site de WP Rocket sans CSS	Site de WP Rocket avec CSS

Que signifie le chemin de rendu CSS critique ?

Le chemin de rendu critique est la série de tâches que le navigateur doit effectuer pour afficher une page sur l'écran du visiteur. Par exemple, ces tâches incluent le téléchargement de photos, les polices et le texte à afficher sur la page Web.

Comme vu précédemment, le navigateur doit également télécharger vos fichiers CSS pour restituer la bonne mise en page de la page. Si vos fichiers sont vraiment volumineux, les visiteurs finiront par attendre que le fichier entier ait été téléchargé.

Mais que se passerait-il si le navigateur pouvait commencer à rendre le CSS au fur et à mesure que le téléchargement progresse ?

Imaginez un moyen d'atténuer le blocage et de commencer la livraison CSS dès que possible. Cette technique est précisément connue sous le nom d'optimisation du chemin critique de rendu.

Le navigateur suit cinq étapes jusqu'à ce qu'il rende la page aux visiteurs. Beaucoup de choses peuvent se passer pendant ce processus. C'est pourquoi nous devons nous assurer que chaque étape est complétée le plus rapidement possible.

Deux questions se posent désormais : comment optimiser chaque étape ? Comment s'assurer que nous avons la livraison CSS la plus efficace ?

Ces questions nous amènent à la section suivante. Vous apprendrez à améliorer les temps de rendu avec la technique CSS critique (optimiser la livraison CSS) et à éliminer les erreurs CSS bloquant le rendu.

Les 3 étapes pour optimiser la livraison CSS

CSS contrôle la mise en forme visuelle et le style de votre site WordPress, mais si le fichier CSS n'est pas livré de manière optimale, vous risquez de vous retrouver avec une page Web lente.

Ainsi, l'un des meilleurs moyens d'améliorer les performances de votre site WordPress consiste à optimiser comment et quand le code CSS est livré. Il existe trois étapes principales pour optimiser la livraison CSS pour votre site WordPress, à savoir :

Étape 1 : Trouvez et générez le CSS critique — c'est-à-dire l'identification du code CSS minimum dont vous avez besoin pour afficher le contenu au-dessus de la ligne de flottaison. Vous devez savoir ce que l'utilisateur peut voir dans la fenêtre d'affichage lorsqu'il charge la page pour la première fois. Déterminer le bon CSS critique pour une page peut être complexe car les visiteurs utilisent de nombreuses tailles d'écran différentes, telles que les ordinateurs de bureau, les tablettes et les mobiles.

Comment trouver le CSS critique

WebDev vous propose trois outils permettant d'identifier les CSS critiques :

• Critique - extrait le CSS au-dessus du pli (et aussi l'intègre et le minimise)
• CriticalCSS - un autre module qui extrait le CSS critique
• Penthouse – un bon choix si votre site contient beaucoup de CSS

Étape 2 : Inline ce CSS critique — c'est-à-dire ajouter le CSS critique dans le <head> du document HTML pour éliminer toutes les requêtes supplémentaires pour récupérer ces styles.

Dans l'exemple WebDev ci-dessous, ils ont intégré le CSS critique dans le fichier <head> afin que le navigateur puisse le livrer plus rapidement et rendre quelque chose aux utilisateurs le plus rapidement possible.

Étape 3 : Chargez le reste du CSS de manière asynchrone — cela retarde le CSS non critique afin qu'il puisse être chargé une fois que vos visiteurs ont pu voir le contenu de votre page Web. Cette technique est également connue sous le nom de « chargement différé ». WebDev explique très bien tout le processus manuel.

En suivant ces trois étapes manuelles, vous optimiserez votre livraison CSS et votre chemin de rendu critique. Cependant, il existe des méthodes plus simples pour optimiser la livraison du CSS WordPress : en utilisant un plugin WordPress !

Comment générer du CSS critique et optimiser le chemin de rendu critique avec un plugin

Heureusement, vous pouvez optimiser la livraison de votre CSS critique et différer les ressources moins importantes à l'aide d'un plugin WordPress. Cela vous fera gagner du temps et vous évitera de modifier manuellement vos fichiers de code. Nous avons dressé une liste afin que vous puissiez tester quel outil est le meilleur pour vous.

• WP Rocket – Le plugin de cache le plus complet qui détecte votre CSS critique à intégrer et le reporte de la manière la plus simple. Vous passerez en revue un exemple pratique dans la section suivante.

• Autoptimize - Injecte le CSS dans l'en-tête de page par défaut et peut également intégrer et différer le CSS critique.

• Nettoyage des actifs - Fichiers CSS intégrés (automatiquement et en spécifiant le chemin d'accès aux feuilles de style).

Comment optimiser la livraison CSS avec WP Rocket

Dans WP Rocket 3.10, l'option Charger CSS de manière asynchrone répond à la recommandation de vitesse de page que nous avons vue précédemment : "Éliminer les ressources bloquant le rendu". WP Rocket couvre deux principales optimisations CSS :

1. Il génère le CSS critique nécessaire pour rendre la partie visible de votre site Web (le contenu au-dessus de la ligne de flottaison).
2. Il charge tous les autres fichiers CSS de manière asynchrone (en donnant la priorité à celui qui doit être chargé en premier).

Pour optimiser la livraison CSS, suivez simplement ces étapes dans le tableau de bord de WP Rocket :

• Allez dans Paramètres > WP Rocket
• Cliquez sur l'onglet Optimisation des fichiers .
• Faites défiler jusqu'à la section Fichiers CSS et cliquez sur la case intitulée Optimiser la livraison CSS .
• Sélectionnez l'option Supprimer le CSS inutilisé (option recommandée ). Cela extraira uniquement le CSS nécessaire sur la page et l'intégrera également.

Alternativement, WP Rocket vous permet également de charger le CSS de manière asynchrone et offre une option de secours pour le CSS critique. Utilisez ce champ de secours au cas où le plugin ne peut pas générer le CSS critique correct.

Enfin, WP Rocket répond également aux recommandations « Réduire les CSS inutilisés » de PageSpeed ​​Insights.

Les CSS inutilisés affectent le temps de chargement de la page car le navigateur doit encore les charger. Les mesures de performances de Google telles que le Largest Contentful Paint (LCP) et le Total Blocking Time (TBT) seront également impactées. LCP et TBT ont un poids total de 55 % sur la note Google PageSpeed ​​et Core Web Vitals, il est donc crucial de maintenir ces mesures en bonne santé.

Testons ces options WP Rocket sur un site WordPress avec une mauvaise note sur PSI (mobile). Vous verrez comment WP Rocket nous aidera dans notre processus d'optimisation de la vitesse des pages.

Avant d'optimiser mon CSS critique, ma note de performance n'était que de 43/100, ce qui mettait mon site mobile dans le rouge :

Je reçois également deux avertissements : "Réduire le CSS inutilisé" et "Éliminer les ressources bloquant le rendu".

Maintenant, installons WP Rocket et activons l'option " Supprimer le CSS inutilisé" .

Les résultats de performance sont désormais excellents sur mobile . Nous avons atteint 94/100 juste en quelques clics. WP Rocket a optimisé mon chemin de rendu et s'est également occupé de mon CSS critique.

Les avertissements « Éliminer les ressources bloquant le rendu » et « Réduire les CSS inutilisés » se trouvent désormais dans la section « Audits réussis ».

Tout comme moi, vous pouvez utiliser WP Rocket pour optimiser la livraison de notre CSS critique. C'est un plugin fiable et efficace qui m'a aidé à atteindre des objectifs de performances incroyables en quelques clics.

Emballer

Optimiser votre CSS critique semble intimidant, mais ce n'est pas nécessaire, grâce à des plugins comme WP Rocket. Nous avons vu que WP Rocket a aidé à éliminer les avertissements rouges liés aux ressources bloquant le rendu sur Google PageSpeed ​​Insights.

Vous gagnerez un temps précieux car WP Rocket applique automatiquement 80 % des meilleures pratiques en matière de performances Web — et vous constaterez une amélioration instantanée de la vitesse lors de l'activation .

De plus, vous pouvez toujours compter sur notre garantie de remboursement à 100 %. Bien que nous ne pensions pas que vous en voudriez un jour, nous nous ferons un plaisir de vous rembourser si vous en faites la demande dans les 14 jours suivant l'achat.