Comment optimiser la livraison CSS dans WordPress

Si vous êtes ici, c’est probablement parce que vous avez reçu cet avis dans le test PageSpeed ​​Insights de Google :

Bien qu’il puisse être difficile d’éliminer tous les fichiers bloquant le rendu, ce n’est pas si difficile avec les bons outils.

Dans ce guide, je vais vous montrer trois façons d’ accélérer votre site avec une diffusion CSS optimisée. Il existe des options pour les nouveaux et les développeurs WordPress inclus ici.

Commençons par le haut – qu’est-ce que cela signifie exactement d’optimiser la diffusion de CSS sur votre site WordPress ?

Que signifie « optimiser la diffusion CSS » ?

Permettez-moi d’être très clair sur ce que je veux dire en premier.

Les fichiers CSS sont utilisés pour styliser les pages Web. Chaque thème WordPress charge un fichier style.css et vous avez probablement une poignée de feuilles de style supplémentaires (fichiers CSS) ajoutées par des plugins. Par exemple, si vous avez un plugin qui ajoute un nouveau widget, il devra charger une autre feuille de style pour styliser ce widget.

Tous les fichiers CSS sont chargés avant que votre site ne soit rendu.

Cela signifie que les visiteurs verront un écran blanc vierge jusque-là. Maintenant, voici la chose…

La majorité du CSS chargé n’est pas nécessaire pour la page sur laquelle se trouve le visiteur, et encore moins pour ce qu’il peut voir immédiatement. Par exemple, pourquoi les faire attendre pendant le chargement des styles pour le pied de page ? Il faudra probablement au moins quelques secondes avant qu’ils ne le voient (s’ils le voient jamais).

En différant nos fichiers CSS ou en les chargeant de manière asynchrone, nous pouvons permettre au site de s’afficher dans le navigateur du visiteur avant la fin du chargement des feuilles de style.

Dans ce guide, je vais partager trois approches différentes pour différer vos feuilles de style et optimiser votre livraison CSS.

Chemins de rendu critiques optimisés en action

Si vous visitez la page d’accueil de Compete Themes, gardez un œil sur l’indicateur de chargement dans l’onglet du navigateur pendant le chargement du site. Vous remarquerez qu’une fois que le site est visible et semble chargé, l’indicateur de chargement continue de tourner pendant un instant de plus.

C’est un exemple de ce à quoi ressemble une livraison CSS optimisée dans la pratique.

Si vous souhaitez voir un exemple de chemin de rendu critique hautement optimisé, visitez Amazon. L’ensemble du site ne se charge pas d’un coup. Au lieu de cela, au cours de quelques secondes, vous verrez différents éléments apparaître tout au long de la page grâce au chemin de rendu soigneusement optimisé.

1 fusée WP

J’utilise le plugin WP Rocket ici chez Compete Themes et le recommande avant toutes les autres solutions pour l’optimisation du chemin de rendu critique.

Optimiser votre livraison CSS avec WP Rocket ne pourrait vraiment pas être plus simple. Dans le menu Optimisation des fichiers, il y a une case à cocher pour activer cette fonctionnalité.

Une fois coché, WP Rocket différera automatiquement toutes vos feuilles de style afin qu’elles ne soient chargées qu’une fois le site affiché dans le navigateur du visiteur. Maintenant, si tout le CSS était différé, votre site aurait l’air terrible jusqu’à ce qu’il soit chargé, et les développeurs de WP Rocket ont résolu ce problème avec élégance avec leur plugin.

Lorsque vous activez cette option, WP Rocket trouvera automatiquement le CSS nécessaire pour styliser les parties de votre site que les visiteurs voient au moment où votre site se charge, et ce code est ajouté en ligne au document.

En d’autres termes, votre site s’affiche plus rapidement dans le navigateur et semble être entièrement chargé tandis que le CSS différé est ensuite chargé au cours de la seconde ou des deux suivantes.

À mon avis, c’est de loin la meilleure solution pour optimiser la livraison CSS avec WordPress.

WP Rocket est un plugin premium, mais si des temps de chargement plus rapides vous rapportent plus de revenus sur votre site, j’envisagerais certainement de l’obtenir pour votre site. J’ai un aperçu beaucoup plus détaillé de WP Rocket que vous pouvez lire si vous voulez en savoir plus. Sinon, vous pouvez consulter leur site ici.

2 Optimisation automatique

La deuxième approche que je recommanderais est le plugin Autoptimize.

Ce plugin de performance riche en fonctionnalités fournit quelques approches pour optimiser la livraison CSS. L’option la plus simple consiste simplement à insérer tous les CSS. Cela prendra tout le CSS trouvé dans vos feuilles de style et l’ajoutera directement dans le document de la page afin qu’aucune feuille de style ne soit chargée.

Pour trouver cette option, vous devez cliquer sur le bouton Afficher les paramètres avancés en haut.

Vous verrez alors l’option d’intégrer tous les CSS.

Bien que cette option puisse améliorer les performances, si vous avez ajouté trop de CSS au document de la page, cela peut en fait ralentir votre site à la place. Cela vaut peut-être la peine d’expérimenter.

Sinon, une approche intéressante consiste à activer l’option Inline et Defer CSS à la place. Cela différera toutes les feuilles de style et uniquement le CSS critique. Cependant, il ne trouvera pas automatiquement le CSS critique pour vous comme WP Rocket.

Alors, comment obtenez-vous le CSS critique de votre site ? Même pour un développeur WP chevronné, cela peut être une sorte de casse-tête.

Bien que je n’aie pas testé la fiabilité de cet outil moi-même, cet outil gratuit Critical Path CSS Generator serait une approche viable. Entrez l’URL de votre site et il vous renverra le CSS que vous devez absolument charger.

Vous pouvez ensuite copier et coller ce code dans la zone CSS du chemin critique dans Autoptimize.

Si vous utilisez cette approche, vous devrez peut-être ajouter du CSS supplémentaire pour différentes pages de votre site, et cela peut nécessiter que vous connaissiez très bien le CSS de votre thème pour assurer un style cohérent.

Une autre approche

Il existe un plugin appelé Autoptimize criticcss.com power-up. C’est tout à fait la bouchée, mais ce plugin supplémentaire vous permettra de générer automatiquement le CSS critique de votre site en utilisant le service criticcss.com.

Vous devrez vous inscrire auprès de CriticalCSS pour un compte payant pour utiliser cette option.

3 Accélérer

Cette dernière option est très rapide et sera simple à mettre en œuvre pour un développeur WordPress.

Speed ​​Up est un plugin léger qui vous permet de différer toutes les feuilles de style non critiques.

Bien que cela n’optimise pas complètement votre livraison CSS, cela vous aidera.

Disons que votre thème ajoute une feuille de style, puis cinq autres feuilles de style sont ajoutées par les plugins. Si seule la feuille de style du thème est critique à charger avant d’afficher le site, vous pouvez différer les cinq autres.

Speed ​​Up vous offre un filtre simple que vous pouvez ajouter au fichier functions.php d’un thème enfant (ou à un plugin) pour différer les feuilles de style de votre choix. Tout ce dont vous avez besoin, ce sont les poignées de chaque feuille de style en cours de chargement. Vous pouvez trouver ici quelques fonctions simples pour afficher les descripteurs de toutes les feuilles de style enregistrées sur votre site.

Encore une fois, ce sera rapide et facile pour un développeur, mais je ne recommanderais pas cette solution si vous n’écrivez pas de code.

Conclusion

J’espère que vous avez appris une ou deux choses sur l’ optimisation des performances de WordPress dans cet article.

Bien que chacune des trois solutions ci-dessus puisse bien fonctionner, je dois donner un dernier cri au plugin WP Rocket. En tant que blogueur et développeur de thèmes WordPress, je trouve qu’il est si facile et indolore de travailler avec.

Si vous souhaitez d’autres conseils pour accélérer votre site, vous aimerez peut-être ce guide sur l’optimisation des images ou ma revue WP Engine sur laquelle Compete Themes s’appuie pour des temps de chargement rapides.