Comment générer du CSS critique dans WordPress (2 méthodes)

Les personnes qui visitent votre site Web ne veulent pas attendre longtemps pour voir votre contenu. Si vous n'optimisez pas votre code, les ressources bloquant le rendu comme CSS peuvent contribuer à la perception des visiteurs de temps de chargement plus lents.

Heureusement, vous pouvez facilement générer des CSS critiques pour votre site Web. En installant un plugin comme Jetpack Boost, vous pourrez extraire tout le CSS nécessaire pour afficher le contenu au-dessus de la ligne de flottaison. Cela peut être essentiel pour rendre votre site Web plus rapide et plus convivial.

Dans cet article, nous expliquerons le CSS critique et pourquoi vous devriez envisager de le générer pour votre site Web. Ensuite, nous vous montrerons deux façons différentes de le faire dans WordPress.

Qu'est-ce que le CSS critique dans WordPress ?

Une fois qu'un visiteur clique sur un lien vers votre site Web, son navigateur doit traiter une série de tâches pour restituer entièrement le contenu. Toutes les étapes impliquées dans le téléchargement, le traitement et la conversion du code en pixels constituent le chemin de rendu critique.

Le navigateur lit le code HTML, CSS et JavaScript du site de haut en bas pendant ce processus de chargement. Puisqu'il ne saura pas automatiquement quelles ressources sont les plus importantes pour le rendu de la page, le navigateur pourrait se retrouver bloqué à traiter du code inutile.

Si un certain fichier CSS empêche le rendu de votre site Web, il devient une ressource bloquant le rendu. Même si cela n'est pas nécessaire pour afficher la page, les visiteurs ne verront pas le contenu tant que ce CSS bloquant le rendu n'aura pas été entièrement traité.

Le CSS critique fait référence au code CSS requis pour le contenu Web au-dessus de la ligne de flottaison. Essentiellement, c'est le code minimum dont le navigateur a besoin pour afficher la première section de contenu aux visiteurs.

Les avantages de générer du CSS critique

La génération de CSS critiques pour vos pages Web implique d'éliminer tout CSS bloquant le rendu et de permettre au navigateur de ne traiter que ce qui est nécessaire.

1. Optimiser la diffusion de contenu

Lorsque vous optimisez la livraison CSS pour votre site Web WordPress, cela peut améliorer le processus de rendu. Pour un visiteur frontal, il peut même sembler que vos pages se chargent plus rapidement.

Lorsqu'une personne arrive sur votre site Web, la première chose qu'elle voit est le contenu au-dessus de la ligne de flottaison. C'est tout affiché sur la page d'accueil sans avoir besoin de faire défiler.

En extrayant le CSS critique, vous optimisez les fichiers CSS nécessaires pour afficher cette section initiale. Sans cela, les utilisateurs peuvent voir des éléments partiels qui n'ont pas été entièrement rendus.

Une idée fausse courante est que le CSS critique diminue votre temps de chargement. Bien que ce ne soit pas vrai, la technique d'optimisation peut améliorer les performances perçues .

Essentiellement, les utilisateurs penseront que vos pages se chargent plus rapidement car le navigateur peut simplement afficher plus efficacement les éléments au-dessus de la ligne de flottaison.

En générant du CSS critique pour WordPress, les visiteurs auront une meilleure expérience utilisateur (UX) sur votre site. En conséquence, vous pouvez réduire les taux de rebond et encourager les visites de retour.

2. Améliorer les éléments vitaux Web de base

Bien que le CSS critique de WordPress n'augmente ni ne diminue le temps de chargement des pages, il peut améliorer vos Core Web Vitals. Ces mesures analysent l'expérience utilisateur d'un site Web.

Voici les Core Web Vitals :

• Largest Contentful Paint (LCP) : performances de chargement d'un site Web
• First Input Delay (FID) : L'interactivité d'un site web
• Cumulative Layout Shift (CLS) : Stabilité visuelle d'un site web

Après avoir scanné votre site Web pour un rapport Core Web Vitals, vous pouvez voir des mesures supplémentaires comme First Contentful Paint (FCP) ou Time to First Byte (TTFB). Ceux-ci ont un impact sur le LCP et jouent un rôle important dans le processus de chargement.

Le CSS critique a un impact direct sur le FCP. En termes simples, FCP mesure le temps nécessaire pour afficher le premier élément d'une page Web après le début du chargement. Si votre site a un mauvais score FCP, les visiteurs verront souvent une page blanche pendant un certain temps.

En tant que propriétaire de site Web WordPress, vous devriez viser à obtenir un FCP inférieur à 1,8 seconde, mais de nombreux éléments peuvent avoir un impact négatif sur ce score, notamment :

• JavaScript et CSS bloquant le rendu
• Un serveur lent
• Fichiers de polices volumineux
• Taille du modèle d'objet de document (DOM) volumineux

Étant donné que les CSS bloquant le rendu contribuent au FCP, la génération de CSS critiques peut améliorer ce score. Au cours de ce processus, vous intégrerez tous les CSS nécessaires pour afficher le contenu au-dessus de la ligne de flottaison.

Comment tester votre site Web pour les CSS bloquant le rendu

Avant de générer le CSS critique de WordPress, vous devez savoir s'il est nécessaire pour votre site Web. Étant donné que les fichiers CSS volumineux sont considérés comme des ressources bloquant le rendu, vous pouvez les rechercher avec un outil d'optimisation de la vitesse.

Pour commencer, saisissez l'URL de votre site Web dans PageSpeed ​​Insights. Ce logiciel Google analysera les performances de votre site avec différents audits de vitesse.

En haut de la page, vous verrez votre évaluation Core Web Vitals. Il comprend des métriques pour la plus grande peinture de contenu, le premier délai d'entrée, le décalage de mise en page cumulé, la première peinture de contenu, l'interaction avec la prochaine peinture et le temps jusqu'au premier octet.

Comme vous l'avez appris précédemment, le CSS bloquant le rendu est étroitement lié au score FCP. Assurez-vous que vos résultats d'évaluation sur mobile et sur ordinateur sont de 1,8 seconde ou moins.

Si vous recevez un mauvais score, vous pouvez avoir des fichiers CSS volumineux et non optimisés sur votre site Web. Pour vérifier si cela est vrai, faites défiler jusqu'à Opportunités . Cette section fournit des suggestions spécifiques pour améliorer le temps de chargement de votre site Web.

Ici, vous remarquerez peut-être une alerte vous invitant à éliminer les ressources bloquant le rendu . Bien que ce message puisse faire référence à un fichier JavaScript, il peut également signaler que vous devez générer un CSS critique.

Comment générer du CSS critique dans WordPress

Maintenant que vous en savez plus sur le CSS critique de WordPress et pourquoi il est important, il est temps de le générer ! Quel que soit votre niveau de compétence, vous pouvez facilement apprendre à optimiser la diffusion CSS dans WordPress en suivant notre didacticiel adapté aux débutants.

Méthode 1 : générer du CSS critique avec un plugin

Bien que vous puissiez le générer vous-même, optimiser la livraison CSS avec un plugin WordPress est souvent plus facile. Le bon outil peut automatiquement différer les CSS moins importants. De plus, vous n'aurez pas à modifier le code manuellement.

Jetpack Boost peut rapidement améliorer les performances de chargement de votre site. Après un simple processus de configuration, vous pouvez utiliser ce plugin pour générer du CSS critique, différer le JavaScript non essentiel, etc.

Pour commencer à utiliser Jetpack Boost, installez-le et activez-le dans WordPress. Ensuite, vous recevrez un score basé sur les performances actuelles de votre site Web.

Avec le plugin gratuit, vous verrez une option pour optimiser le chargement CSS . Alternativement, vous pouvez passer à un abonnement payant pour générer automatiquement des CSS critiques. Cela vous évitera d'avoir à régénérer le CSS à chaque modification.

Pour activer le CSS critique, utilisez simplement le commutateur sur le côté gauche. De même, vous pouvez différer le JavaScript non essentiel et activer le chargement paresseux pour les images. Combinés, ces paramètres peuvent réduire considérablement le temps de chargement des pages et permettre aux visiteurs de voir votre contenu plus tôt.

Méthode 2 : générer manuellement le CSS critique

Si vous ne souhaitez pas utiliser de plugin, vous pouvez également générer manuellement du CSS critique. Il est important de se rappeler que cette méthode implique la modification du code de votre site, ce qui peut être un processus plus compliqué pour les débutants.

Étape 1 : Sauvegardez votre site Web

Pour commencer, vous voudrez créer une sauvegarde de votre site WordPress. Si vous faites une erreur dans les fichiers de votre site, vous pouvez facilement revenir à cette version enregistrée. De cette façon, vous ne perdrez aucune donnée importante.

Si vous avez besoin de gérer facilement vos sauvegardes, vous pouvez installer le plugin Jetpack VaultPress Backup. Cet outil stocke les sauvegardes hors site et fournit des restaurations en un clic, même si votre site est complètement indisponible.

Voici comment commencer :

Allez dans Plugins → Ajouter un nouveau dans votre tableau de bord WordPress. Recherchez "Jetpack VaultPress Backup" et cliquez sur Installer maintenant → Activer .

Ensuite, vous verrez une nouvelle fenêtre qui vous permettra de configurer le plugin. Cliquez sur Configurer Jetpack .

Ensuite, connectez votre site à votre compte WordPress.com. Une fois que vous êtes redirigé vers votre site, cliquez sur Mettre à niveau maintenant pour afficher plusieurs options pour les plans de sauvegarde Jetpack VaultPress.

Au minimum, vous aurez besoin du plan de sauvegarde, mais Sécurité et Complet fournissent des outils supplémentaires pour protéger, développer et accélérer votre site.

Votre première sauvegarde démarrera automatiquement et vous pourrez vérifier sa progression en accédant à Jetpack → Sauvegarde dans votre tableau de bord WordPress.

Si des erreurs se produisent au cours des prochaines étapes, revenez simplement sur cette page et cliquez sur Restaurer jusqu'à ce point . Cela ramènera votre site à l'ancienne version, éliminant ainsi toutes les erreurs qui se sont produites.

Étape 2 : Utiliser un générateur CSS critique

Une fois que vous savez que votre site Web est sauvegardé, vous pouvez commencer à générer votre CSS critique. L'un des moyens les plus simples de le faire est d'utiliser un générateur CSS critique. Cet outil produira automatiquement votre CSS critique, vous évitant d'avoir à créer manuellement du code.

Tout d'abord, ouvrez le CoreWebVitals Critical CSS Generator. Entrez l'URL de votre site Web ou d'une page spécifique que vous souhaitez optimiser. Ensuite, appuyez sur Générer un CSS critique .

Une fois le chargement terminé, vous verrez le code CSS généré dans la zone de texte. Copiez ce code.

Après avoir enregistré ce code, vous pouvez l'intégrer sur votre site Web !

Étape 3 : CSS critique en ligne

Lorsqu'une personne visite votre site Web, son navigateur récupère les fichiers de votre site à partir du serveur. Il vérifiera d'abord la section <head> pour le contenu nécessaire pendant le processus d'analyse. Ensuite, il continuera à rendre le contenu <body>.

Pour prioriser les CSS critiques, placez-les dans la section <head> de vos fichiers. C'est ce qu'on appelle l'inlining. Lorsque vous inline CSS, le navigateur demande que cette feuille de style soit récupérée avant de rendre le reste de la page.

Essentiellement, l'inlining CSS placera le code là où il doit être utilisé. Ainsi, le navigateur d'un visiteur n'aura pas à analyser les fichiers bloquant le rendu avant d'afficher le contenu cible.

Une fois que vous avez copié le CSS critique généré, vous pouvez l'intégrer dans vos fichiers. Accédez à votre dossier public_html via FTP. Ensuite, allez dans wp-content → thèmes → votre thème actif et ouvrez le fichier header.php .

Dans ce fichier d'en-tête, localisez la balise <title>. En dessous, ajoutez le CSS critique en utilisant les balises <style>. Enfin, sélectionnez Mettre à jour le fichier .

Foire aux questions (FAQ)

Jusqu'à présent, nous avons discuté du CSS critique et de la manière de le générer. Si vous avez encore des questions sur l'intégration de CSS sur votre site Web, nous y répondrons ici !

La génération de CSS critiques peut-elle briser l'apparence de votre site ?

Si cela n'est pas fait correctement, la génération de CSS critiques pourrait avoir un impact négatif sur l'apparence et la mise en page de votre site. Heureusement, vous pouvez annuler toute modification en restaurant simplement une sauvegarde enregistrée de votre site WordPress. À l'aide de Jetpack VaultPress Backup, vous pouvez afficher un journal d'activité et restaurer les anciennes versions de votre site en un seul clic.

De plus, vous pouvez utiliser un plugin comme Jetpack Boost pour activer et désactiver le CSS critique chaque fois que nécessaire. Ces paramètres simples ont été construits selon les meilleures pratiques de WordPress, ils sont donc moins susceptibles d'affecter votre site sur le front-end.

Que puis-je faire d'autre pour optimiser mon code CSS ?

Si vous souhaitez optimiser davantage le CSS sur votre site, envisagez de le réduire. Vous supprimerez le code inutile lors de la minification CSS pour réduire la taille des fichiers CSS.

Votre code CSS contient probablement des espaces et des sauts de ligne pour faciliter la lecture. Comme un navigateur peut traiter du code sans ces éléments supplémentaires, vous pouvez les supprimer. Cela réduit les ressources et le temps nécessaires pour exécuter les fichiers.

Vous pouvez également supprimer complètement les CSS inutilisés. En réduisant vos fichiers au seul code nécessaire, votre site Web commencera à se charger plus rapidement.

Que puis-je faire d'autre pour améliorer la vitesse de ma page ?

L'un des meilleurs moyens d'accélérer votre site consiste à améliorer vos Core Web Vitals. À l'aide d'un outil tel que PageSpeed ​​Insights, vous pouvez identifier les éléments non optimisés tels que les ressources bloquant le rendu.

Étant donné que les navigateurs chargent le code de votre site de haut en bas, le processus de chargement peut facilement être interrompu par JavaScript. En différant l'analyse JavaScript, les visiteurs n'auront pas à attendre que les scripts se chargent avant de voir votre contenu.

De plus, envisagez d'implémenter le chargement paresseux pour les images. Avec ce paramètre dans Jetpack Boost, les images sous le pli ne se chargeront pas tant que les visiteurs ne défileront pas vers le bas. Cela peut empêcher votre site Web de charger toutes les images simultanément, ce qui retarde le processus de rendu.

Enfin, un réseau de diffusion de contenu (CDN) peut considérablement accélérer votre site Web. Au lieu de s'appuyer sur un serveur, un CDN utilise un système de centres de données dans le monde entier. Une option comme le CDN de Jetpack peut améliorer la diffusion de contenu pour les images et les fichiers statiques.

Optimiser la livraison CSS dans WordPress

Si vous essayez d'améliorer la diffusion du contenu de votre site Web, il est important d'éliminer toutes les ressources bloquant le rendu. Étant donné qu'un CSS non optimisé peut retarder le processus de rendu, il vaut la peine de générer un CSS critique. Bien que cela n'améliore pas directement le temps de chargement, cela permettra aux visiteurs de voir le contenu au-dessus de la ligne de flottaison beaucoup plus rapidement.

Pour passer en revue, voici comment générer du CSS critique dans WordPress :

1. Générez du CSS critique avec un plugin comme Jetpack Boost.
2. Utilisez un générateur CSS critique.

Avec Jetpack Boost, vous pouvez optimiser le CSS sans modifier le code. Après avoir téléchargé et activé le plugin, vous pourrez générer du CSS critique en un seul clic !