TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment générer du CSS critique dans un site WordPress ?

12

Il existe de nombreux constructeurs de sites Web par glisser-déposer disponibles sur Internet pour créer un site Web sans compétences techniques. Cependant, vous devez apprendre certains aspects techniques du référencement afin de maintenir votre site au sommet des pages de résultats des moteurs de recherche. Le CSS critique est l’un de ces sujets techniques pour optimiser la diffusion de votre contenu à tour de rôle, affectant directement la vitesse. L’écosystème WordPress rend cela plus compliqué pour les utilisateurs normaux qui utilisent plusieurs plugins sur leur site. Dans cet article, explorons comment créer un CSS critique pour un site WordPress afin d’améliorer le score Google PageSpeed.

Comprendre les bases

Avant de discuter du CSS critique, il est nécessaire de comprendre certaines terminologies telles que l’optimisation de la diffusion de contenu et au-dessus de la ligne de flottaison. De plus, vous devez également comprendre la méthode de base d’utilisation des feuilles de style externes sur WordPress.

Au-dessus du contenu du pli

Lorsque vous ouvrez un site Web sur un ordinateur de bureau ou un mobile, la partie visible que vous voyez à l’écran est la zone de contenu au-dessus de la ligne de flottaison. Il s’agit d’une terminologie de journal traditionnelle où vous pouvez voir le contenu au-dessus de la ligne de flottaison en haut de la première page. Généralement, les gens avaient l’habitude de plier le journal et au-dessus de la zone de pliage, il y avait un contenu important. De même, la partie visible supérieure de la page Web qui se charge en premier devrait offrir le contenu le plus précieux à l’utilisateur. Par conséquent, vous devez vous concentrer sur l’optimisation de la section supérieure visible pour qu’elle se charge à une vitesse fulgurante.

Optimisation de la diffusion de contenu

De nombreux outils de vitesse tels que Google PageSpeed ​​Insights mesurent la façon dont le site Web fournit un contenu au-dessus de la ligne de flottaison. Vous pouvez voir cela comme une mesure de First Contentful Paint (FCP). S’ils détectent un blocage, vous verrez un avertissement pour supprimer l’élément bloquant. L’une des suggestions populaires que vous verrez dans l’outil Google PageSpeed ​​Insights consiste à éliminer les ressources bloquant le rendu. Si vous cliquez sur cette suggestion, Google vous montrera l’optimisation de la livraison des CSS/JS critiques et différera tous les CSS/JS non critiques.

Comment générer du CSS critique dans un site WordPress ?

Suggestion CSS et JS critiques

La correction de JavaScript bloquant le rendu (jQuery) est assez simple car les thèmes/plugins chargent par défaut les scripts dans la section de pied de page. jQuery est le seul problème, qui peut être nécessaire pour que de nombreux sites chargent du contenu au-dessus de la ligne de flottaison. Étant donné que WordPress utilise également jQuery, vous pouvez ignorer cette erreur si elle n’est due qu’à jQuery. Sinon, utilisez des plugins comme WP Rocket pour combiner et livrer tous les scripts si cela ne perturbe pas la mise en page de votre site.

Cependant, le problème est de générer du CSS critique et de le charger en premier. Dans cet article, nous expliquerons comment gérer l’optimisation CSS pour améliorer le score de vitesse des pages.

Connexe : Paramètres appropriés du plug-in WP Rocket pour accélérer votre site.

Chargement CSS dans les sites Web

Il existe plusieurs façons d’ insérer du CSS dans votre page Web. Vous pouvez le faire de manière en ligne, interne ou externe. Le moyen le plus populaire et le plus recommandé consiste à lier des feuilles de style externes dans la section d’en-tête d’une page Web. Comme le contenu de la section d’en-tête se charge en premier avec la page Web, cela affecte considérablement le chargement du contenu au-dessus de la ligne de flottaison et donc la vitesse de la page.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Link Your Stylesheet URL Here"> </head> <body> Add Your Content Here <script src="Add Your Script URL Here"></script> </body> </html>

Chargement du CSS dans WordPress

WordPress utilise style.css comme fichier externe pour fournir les styles de thème. Il s’agit d’un fichier obligatoire (en plus de functions.php) pour exécuter un site Web WordPress. De plus, chaque plugin sur votre site peut ajouter un fichier CSS supplémentaire. Ouvrez votre site Web dans le navigateur Chrome et affichez le code source (assurez-vous qu’aucun plug- in de mise en cache n’est installé ou que la mise en cache désactivée pour la page).

Comment générer du CSS critique dans un site WordPress ?

Feuilles de style dans l’en-tête

Vous pouvez voir les liens WordPress vers toutes les feuilles de style externes sous la section d’en-tête de la page. Cela peut poser plusieurs problèmes du point de vue de l’optimisation :

  • Certains thèmes utilisent des styles CSS lourds avec peu de Mo. Vous n’avez pas besoin que tous ces styles soient chargés lorsqu’un utilisateur ouvre une page Web sur un ordinateur de bureau ou un mobile.
  • Il existe différents types de publications, comme des produits, qui peuvent utiliser des styles complètement différents. Dans ce cas, vous n’avez pas besoin de l’autre CSS pour le chargement initial (au-dessus de la ligne de flottaison).

Chaque page de votre site a besoin d’un CSS minimum pour charger le contenu au-dessus de la ligne de flottaison. Ce CSS minimum nécessaire au chargement de la page est appelé CSS critique en terme technique. Dans tous les cas ci-dessus, Google PageSpeed ​​Insights et d’autres outils vous afficheront un avertissement pour optimiser la livraison CSS.

N’oubliez pas que la suppression des CSS et des scripts inutilisés est également liée à l’utilisation de trop de CSS / scripts sur la page. Cependant, cela est assez différent de l’optimisation CSS critique. Vous ne pouvez même pas utiliser certains plugins sur une page spécifique. Par exemple, vous n’avez pas besoin du plugin CSS du formulaire de contact sur toutes les pages du site. Dans ce cas, les fichiers CSS/JS des fichiers de formulaire de contact sont inutiles sur un article de blog régulier et vous verrez un avertissement de suppression CSS/JS inutilisé. Consultez notre article sur la façon de désactiver les CSS/JS inutilisés dans WordPress et d’ optimiser les pages WooCommerce pour les appels AJAX d’administration.

Comment générer du CSS critique dans WordPress ?

Maintenant que vous savez à quel point le CSS critique est important pour améliorer la vitesse de chargement des pages. Il existe deux façons de générer des CSS critiques pour votre site.

  • Générez des CSS critiques manuellement et insérez-les sur votre site
  • Utilisez le plugin WP Rocket pour optimiser la diffusion de contenu

Nous vous expliquerons à la fois le processus en détail et vous pourrez choisir celui qui convient le mieux à votre site.

Connexe : WP Rocket fonctionnera-t-il avec l’hébergement SiteGround ?

Génération CSS critique manuelle

Il existe de nombreux outils tiers disponibles sur Internet pour générer manuellement des CSS critiques. Cependant, cela a du sens lorsque toutes les pages de vos sites sont similaires et n’ont pas de contenu personnalisé dans la zone au-dessus de la ligne de flottaison. Vous pouvez essayer d’autres services gratuits de génération de CSS critiques comme Sitelocity.

  • Accédez au site Web Sitelocity et entrez l’URL de votre page.
  • Cliquez sur le bouton « Générer le CSS du chemin critique ».
  • Vous pouvez obtenir le CSS critique minifié pour votre page.

Comment générer du CSS critique dans un site WordPress ?

Générer un CSS critique

Maintenant que vous avez généré un CSS critique, la tâche suivante consiste à l’insérer dans la section d’en-tête de votre site. En théorie, vous pouvez insérer les styles dans votre fichier header.php entre les balises et. Il existe des plugins pour aider à insérer des styles dans la section d’en-tête sans modifier les fichiers de modèle. Autoptimize est l’un des plugins que nous pouvons recommander à cet effet. Si vous utilisez déjà Autoptimize à des fins de mise en cache, vous pouvez également utiliser le même plugin pour insérer des CSS critiques.

Vous pouvez insérer des CSS critiques sous « Options CSS » du plugin Autoptimize. Cochez d’abord la case « Inline and Defer CSS » et collez le CSS critique dans la zone de texte qui apparaît.

Comment générer du CSS critique dans un site WordPress ?

Options CSS

Comme vous pouvez le voir, le plugin Autoptimize peut également automatiquement insérer du CSS au-dessus de la ligne de flottaison tout en différant d’autres styles. Cependant, cela augmentera rapidement la taille du cache à 100% et vous n’avez aucune option dans le plugin pour purger automatiquement le cache. De plus, cela brisera le site dans la plupart des cas. Vous pouvez opter pour le module complémentaire Autoptimize CriticalCSS Power-Up qui vous aidera mieux. Pour utiliser ce module complémentaire, vous devez obtenir l’API de Criticalcss.com pour 10 $ par mois.

Pourquoi la génération de CSS critique manuelle ne fonctionnera pas ?

Bien que le processus d’insertion manuelle ci-dessus semble facile, ce n’est pas une tâche facile. Voici quelques-unes des raisons pour lesquelles votre CSS critique ne fonctionnera pas.

  • Vous pouvez avoir un contenu différent comme des pages, des articles de blog, des produits, etc. Chaque type de contenu sur votre site a besoin d’un CSS critique différent pour se charger au-dessus du contenu de la ligne de flottaison. L’utilisation d’un plugin ou d’une insertion manuelle chargera le CSS critique sur toutes les pages et cassera du contenu.
  • Vous devez générer des CSS critiques à chaque fois que vous mettez à jour le thème, le plugin et le noyau WordPress. Sinon, l’utilisation d’anciens CSS critiques casserait la mise en page de votre site. C’est une tâche impossible pour les utilisateurs normaux de mettre à jour en permanence les CSS critiques pour chaque mise à jour du site. Avec les options de mise à jour automatique disponibles, vous devez être très prudent avant de mettre à jour plugin/thème/core sur votre installation.
  • Vous aurez peut-être besoin de CSS critiques distincts pour les appareils mobiles et de bureau.

Avec tous ces problèmes, la seule option qui reste est d’utiliser un plugin qui s’en occupera et générera des CSS critiques dynamiquement et automatiquement.

Créez des CSS critiques pour WordPress avec WP Rocket

Heureusement, vous disposez d’un plugin de mise en cache qui effectue exactement cette génération CSS critique dans WordPress. WP Rocket est l’un des plugins de mise en cache les plus populaires pour WordPress en raison de ses paramètres simplifiés. Encore une fois, la génération CSS critique est l’une des beautés du plugin dont tout utilisateur normal peut bénéficier sans casser le site.

  • Vous devez d’abord acheter le plugin premium WP Rocket.
  • Après avoir installé et activé WP Rocket, allez dans «Paramètres > WP Rocket» et accédez à la section «Optimisation des fichiers ».
  • Faites défiler vers le bas et cochez la case «Optimiser la livraison CSS ».

Comment générer du CSS critique dans un site WordPress ?

Activer le CSS critique dans WP Rocket

Cela permettra au plugin de générer automatiquement des CSS critiques pour chaque type de publication sur votre site WordPress. Il comprend la page d’accueil. Page d’accueil, page, publication et tout autre type de publication personnalisé que vous utilisez sur votre site. Si nécessaire, vous pouvez ajouter un CSS critique de secours que vous générez manuellement à l’aide d’un outil tiers. En règle générale, vous pouvez laisser cette case CSS critique de secours vide. Vous pouvez également activer la mise en cache mobile distincte dans la section « Cache ».

Notez que WP Rocket est un plugin premium avec une licence de site unique disponible pour 49 $. À notre avis, il vaut la peine d’acheter ce plugin car il offre une solution de mise en cache de bout en bout pour l’optimisation de la vitesse. Le plugin est livré avec un an de support et de mises à jour. Après cela, il continuera à fonctionner et vous pourrez utiliser le CSS critique et d’autres fonctionnalités sans renouvellement. Vous pouvez renouveler avec une remise de 30 % afin d’obtenir de l’aide et d’obtenir des fonctionnalités supplémentaires. C’est une bien meilleure option par rapport à 10 $ par mois pour l’API Criticalcss à utiliser avec Autoptimize.

Régénérer le CSS critique

Lorsque vous mettez à jour le noyau du thème/plugin/WordPress ou que vous ajoutez des types de publication personnalisés sur votre site, il est nécessaire de régénérer le CSS critique. Sinon, WP Rocket utilisera l’ancien CSS critique et cassera la mise en page de votre site. Par conséquent, assurez-vous de régénérer les CSS critiques sans oublier.

  • Cliquez sur le menu "WP Rocket" dans la barre supérieure et sélectionnez l’option "Régénérer le CSS critique".
  • Alternativement, vous pouvez accéder au tableau de bord du plugin et cliquer sur le bouton "Régénérer le CSS critique".

Comment générer du CSS critique dans un site WordPress ?

Régénérer le CSS critique

CSS critique personnalisé pour une page spécifique

Comme mentionné, vous pouvez avoir une page d’accueil ou une autre page créée avec un plugin de création de page. Cette page aura un CSS critique complètement différent par rapport à tous les autres articles de blog sur votre site. Dans ce cas, vous devez créer un CSS critique séparé et charger conditionnellement uniquement sur cette page. WP Rocket peut vous aider à y parvenir en quelques clics.

  • Accédez à la page / éditeur de publication de la page sur laquelle vous souhaitez générer des CSS critiques distincts.
  • Dans le panneau de document de la barre latérale, recherchez le panneau "Options WP Rocket". Si vous ne trouvez pas, cliquez sur le bouton à trois points dans le coin supérieur droit et sélectionnez « Préférences ». Dans la fenêtre contextuelle, vous pouvez activer les panneaux de documents requis disponibles sur votre site.
  • Cochez la case «Optimiser la livraison CSS» et cliquez sur le bouton «Générer un CPCSS spécifique ».
  • Cela générera un CSS critique spécifique pour cette page et le plugin chargera ce CSS critique lorsque les utilisateurs visiteront la page.

Comment générer du CSS critique dans un site WordPress ?

Générer un CSS critique pour une page spécifique

Connexes: Examen du plugin de mise en cache WP Rocket.

Tester le CSS critique

Après avoir implémenté la méthode manuelle ou utilisé le plugin WP Rocket, vous pouvez tester la page en affichant la source de la page. Assurez-vous de vous déconnecter de votre panneau d’administration ou d’activer la mise en cache pour les utilisateurs connectés dans le plugin. Comme vous pouvez le voir dans la capture d’écran ci-dessous, WP Rocket ajoute un CSS critique dans l’en-tête.

Comment générer du CSS critique dans un site WordPress ?

CSS critique WP Rocket

Vous pouvez également vérifier les pages dans l’outil Google PageSpeed ​​Insights. Si tout se passe bien, vous verrez éliminer les ressources bloquant le rendu et d’autres erreurs CSS sous les résultats passés. Cela indique que vous avez correctement implémenté le CSS critique sur le site.

Derniers mots

Nous espérons que cet article aurait souligné l’importance du CSS critique dans le site WordPress. Vous pouvez utiliser l’option manuelle lorsque vous avez un site plus petit qui contient peu de pages. Cependant, pour un blog en cours d’exécution qui contient un grand nombre de publications et différents types de publications, vous pouvez essayer le plugin WP Rocket. Bien que cela vous coûte de l’argent, vous pouvez obtenir une solution complète de mise en cache pour votre site.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails