Le CSS critique est l’une de ces choses que je vois dans mes rapports de performances mais que je semble toujours ignorer. Je sais ce que cela veut dire. Cela signifie mettre uniquement le CSS nécessaire pour rendre les choses immédiatement visibles dans un balise dans le il apparaît donc dans la première requête réseau, puis charge le reste de manière asynchrone, ce qui aidera la page à se charger plus rapidement.
Vous avez probablement aussi vu le bourrin dans les rapports de performances de Lighthouse :
Lighthouse me dit que le CSS critique est une opportunité et me donne même quelques conseils spécifiques à WordPress.
Je ne suis pas du genre à créer un processus de construction complexe et, malheureusement, de nombreux outils pour le CSS critique impliquent de l’inclure dans un processus de construction existant.
J’ai eu vent de Jetpack Boost et il est conçu pour (entre autres choses performantes) rendre les CSS critiques faciles pour les sites WordPress. Avoir un plugin (gratuit ! ) qui s’occupe de cela m’attire vraiment.
Jetpack Boost est disponible gratuitement dans le répertoire des plugins WordPress, il s’installe donc comme n’importe quel autre plugin.
Recherchez, installez et activez ! 🚀
L’activation du plugin ajoute un élément «Jetpack Boost» au menu d’administration de WordPress, ce qui conduit à un écran pratique qui s’exécute en quelque sorte comme Lighthouse, mais dans WordPress. Et ne le sauriez-vous pas, il existe une option pour générer du CSS critique là-bas. Tout ce que j’avais à faire était d’activer la fonction et Jetpack Boost commence à fonctionner.
Mon score ne peut qu’augmenter à partir d’ici, non ? !
Il ne faut pas longtemps pour que le processus s’exécute. J’ai changé de fenêtre pour vérifier mes e-mails pendant une minute et c’était déjà fait au moment où je suis revenu. Et, hé, regarde ce que ça m’a fait pendant que je me relâchais :
Pas trop mal pour cliquer sur un bouton ! Mais nous devons comparer des pommes avec des pommes, n’est-ce pas ? Retournons dans Lighthouse pour voir ce qu’il dit.
Maintenant, si seulement je pouvais réduire le temps de réponse initial du serveur. 🧐
On peut même voir la source pour voir que la preuve est bien dans le pudding :
Waouh, c’est plus que ce à quoi je m’attendais !
C’est vraiment cool de voir l’équipe Jetpack si concentrée sur les performances, et dans la mesure où ils lui ont dédié un plugin entier. Les performances ont toujours fait partie des paramètres de Jetpack. Mais le mettre au premier plan comme celui-ci permet vraiment à Jetpack de faire des choses plus intéressantes avec des performances, comme la notation et le CSS critique, d’une manière qui va au-delà des paramètres de base. J’imagine que nous verrons plus de paramètres de performance de Jetpack passer au nouveau plugin à un moment donné.
Bravo à l’équipe Jetpack ! C’est une très belle amélioration, et certainement opportune, compte tenu de la récente poussée de Google sur Core Web Vitals et de la façon dont ils affecteront le référencement.