Rendre les sites WordPress plus rapides que jamais avec le nouveau CSS critique de Hummingbird
Publié: 2023-10-09Avec la fonctionnalité CSS critique très attendue de Hummingbird, vous pouvez vous attendre à des pages à chargement plus rapide et à des sites WordPress plus performants. Voici pourquoi les ressources bloquant le rendu appartiennent désormais au passé…
Si vous vous souciez de la vitesse de chargement des pages (et vous devriez le faire si vous souhaitez que les visiteurs restent sur votre site Web pendant plus de deux secondes), il est alors extrêmement important de comprendre comment CSS affecte les performances du site et comment accélérer le temps de chargement de vos pages à l'aide d'une optimisation. tâche connue sous le nom de Critical CSS .
Dans cet article, nous aborderons les sujets suivants :
- Qu’est-ce que le CSS critique et comment améliore-t-il les performances ?
- Comment optimiser WordPress à l'aide de la fonctionnalité CSS critique de Hummingbird
- Le CSS critique de Hummingbird est compatible avec tout WordPress
Plongeons-nous…
Qu’est-ce que le CSS critique et comment améliore-t-il les performances ?
Lorsque les utilisateurs arrivent sur un site Web, tout ce qu’ils peuvent voir dans un premier temps est le contenu affiché sur leur écran avant de le faire défiler.
Cette zone est appelée « au-dessus de la ligne de flottaison ».
Une expérience utilisateur positive peut être mesurée par la rapidité avec laquelle les utilisateurs perçoivent le chargement du contenu sur une page Web. Plus une page se charge rapidement (ou est perçue par l’utilisateur comme se chargeant rapidement), meilleure est l’expérience utilisateur. À l’inverse, plus la page se charge lentement (ou est perçue par l’utilisateur comme se chargeant lentement), plus l’expérience est mauvaise.
Étant donné que tout ce que le visiteur voit lorsqu'il arrive sur une page est le contenu au-dessus de la ligne de flottaison avant de commencer à faire défiler vers le bas, il est logique de charger le contenu au-dessus de la ligne de flottaison le plus rapidement possible avant de charger le reste de la page.
Critical CSS (également connu sous le nom de Critical Path CSS ou Critical CSS Rendering Path ) est une technique qui extrait le strict minimum de CSS requis pour restituer le contenu au-dessus de la ligne de flottaison le plus rapidement possible à l'utilisateur.
Alors que l'utilisateur qui consulte le contenu au-dessus de la ligne de flottaison perçoit que la page se charge rapidement, le reste du CSS peut se charger et l'expérience utilisateur n'est pas affectée.
Des techniques telles que le chargement différé des images, le retardement de l'exécution de JavaScript et les CSS critiques sont autant de moyens d'optimiser la séquence d'étapes suivies par le navigateur pour convertir le HTML, le CSS et le JavaScript en pixels à l'écran.
Cette séquence est appelée chemin de rendu critique (CRP) et comprend le modèle d'objet de document (DOM), le modèle d'objet CSS (CSSOM), l'arborescence de rendu et la mise en page.
L'optimisation du chemin de rendu critique améliore les performances de rendu.
Avantages du CSS critique
Les CSS critiques peuvent améliorer les performances du site grâce à :
- Rendu initial plus rapide
- Expérience utilisateur améliorée
- Meilleures performances SEO
- Poids des pages réduit
- Entretien simplifié
- Amélioration progressive
- Impact positif sur les Core Web Vitals (en particulier First Contentful Paint et Speed Index)
- Des scores PageSpeed Insights plus élevés
Remarque : Le contenu affiché au-dessus de la ligne de flottaison lors du chargement de la page avant le défilement diffère en fonction de l'appareil et de la taille de l'écran utilisé pour afficher les pages Web. Pour cette raison, il n’existe pas de hauteur de pixel universellement définie pour ce qui peut être considéré comme un contenu au-dessus de la ligne de flottaison.
Implémentation du CSS critique
Vous avez donc exécuté votre site via l'outil PageSpeed Insights et le rapport recommande d'éliminer les ressources bloquant le rendu.
Maintenant quoi? Comment mettez-vous concrètement en œuvre les recommandations ?
Eh bien, vous pouvez essayer de résoudre les problèmes manuellement (fastidieux, fastidieux et non recommandé), utiliser des outils de développement Web (si vous avez des compétences techniques) ou utiliser un plugin WordPress comme Hummingbird pour identifier, résoudre et résoudre automatiquement tout problème. .
Nous vous recommandons d'utiliser la méthode plugin. C'est l'option la plus rapide et la plus intelligente pour accomplir le travail.
Alors que Critical CSS fait principalement référence au CSS au-dessus de la ligne de flottaison, Hummingbird peut extraire et intégrer tous les CSS utilisés sur la page, tout en retardant/supprimant le reste.
Hummingbird s'attaque non seulement au blocage du rendu et aux CSS inutilisés pour l'optimisation de la page entière, mais il gère également l'optimisation au-dessus de la ligne de flottaison en éliminant les ressources bloquant le rendu à l'aide de fonctionnalités intégrées telles que Critical CSS (voir ci-dessous), Retarder l'exécution de JavaScript pour les actifs JavaScript. , et d'autres domaines qui affectent les résultats Core Web Vitals sur les sites WordPress.
Comment optimiser WordPress à l'aide de la fonctionnalité CSS critique de Hummingbird
Remarque : Critical CSS est une fonctionnalité Pro, alors assurez-vous que Hummingbird Pro est installé sur votre site.
Passons en revue les étapes permettant de tirer le meilleur parti de l'utilisation de la nouvelle fonctionnalité CSS critique de Hummingbird.
Tout d’abord, commencez par exécuter un test de performances.
Assurez-vous de noter les premiers résultats afin de pouvoir comparer les résultats avant et après.
Ensuite, accédez à Hummingbird > Asset Optimization > Extra Optimization et activez Critical CSS.
Après avoir activé la fonctionnalité, vous verrez différentes options pour charger le CSS critique et pour gérer le CSS inutilisé.
Chargement du CSS critique
Cette section vous donne la possibilité de sélectionner l'optimisation CSS pleine page (par défaut) ou l'optimisation CSS au-dessus de la ligne de flottaison .
Nous vous recommandons de choisir l'option par défaut d'optimisation CSS pleine page avec charge sur l'interaction utilisateur sélectionnée pour la plupart des sites, car elle fournira les meilleurs résultats et résoudra à la fois les problèmes d'élimination des ressources bloquant le rendu et de réduction des audits CSS inutilisés tout en préservant l'intégrité de tous les éléments du site. éléments visuels.
L'optimisation CSS pleine page intègre tous les CSS utilisés et retarde/supprime le chargement du reste.
Le choix de la méthode d'optimisation CSS au-dessus de la ligne de flottaison est recommandé pour les sites plus grands avec beaucoup de CSS complexes si l'option par défaut ne donne pas les résultats souhaités. Cette méthode intégrera tous les CSS au-dessus de la ligne de flottaison et chargera le reste de manière asynchrone.
LIVRE GRATUIT
Votre feuille de route étape par étape vers une entreprise de développement Web rentable. De l’acquisition de plus de clients à la croissance fulgurante.
LIVRE GRATUIT
Planifiez, créez et lancez votre prochain site WP sans accroc. Notre liste de contrôle rend le processus facile et reproductible.
Gestion des CSS inutilisés
Hummingbird vous offre la possibilité de charger le CSS inutilisé lors de l'interaction utilisateur pour résoudre tout problème de rendu ou de supprimer un utilisé qui supprime le CSS inutilisé, en ne conservant que ce qui est nécessaire et en le chargeant en ligne.
De plus, vous pouvez activer la fonctionnalité pour des types de publication spécifiques.
Bien que les options de type de publication soient disponibles pour les méthodes d'optimisation CSS pleine page et d'optimisation CSS au-dessus de la ligne de flottaison , seule la méthode CSS pleine page gère les CSS inutilisés.
Les deux méthodes d'optimisation fournissent également une option avancée pour ajouter manuellement du CSS personnalisé dans la section <head> de la ou des pages.
Remarque : Si vous avez utilisé l'ancienne fonctionnalité CSS au-dessus de la ligne de flottaison dans les versions antérieures de Hummingbird pour alimenter manuellement le CSS du chemin critique, les données existantes seront automatiquement migrées vers la zone Inclusions manuelles lorsque vous mettrez à niveau le plugin vers la dernière version et passerez à en utilisant la nouvelle fonctionnalité.
Après avoir configuré vos options, cliquez sur Enregistrer les modifications. Hummingbird commencera automatiquement à implémenter Critical CSS selon vos paramètres.
Après avoir vu le message de fin, visitez votre site et confirmez que tout sur le front-end s'affiche comme il se doit.
Actualisez la page, laissez le cache se reconstituer à nouveau, puis exécutez un autre test de performances dans Hummingbird afin de pouvoir comparer les résultats avant et après.
Régénérer le CSS critique
Après avoir appliqué Critical CSS sur votre site, un bouton « Régénérer le CSS critique » s'affichera en haut de l'écran d'optimisation supplémentaire.
Cliquez sur ce bouton pour purger le cache, effacer tous les actifs locaux ou hébergés et régénérer automatiquement tous les actifs requis pour votre site ou votre page d'accueil.
Le CSS critique de Hummingbird est compatible avec tout WordPress
Nous avons testé de manière approfondie la fonctionnalité Critical CSS de Hummingbird et avons constaté qu'elle était compatible avec toutes les versions et thèmes WordPress, les constructeurs de pages, les polices, WooCommerce, les systèmes de gestion de l'apprentissage (LMS), etc.
Il est toutefois important de noter que l'installation de thèmes ou de plugins mal codés contenant du CSS avec du code ou des chaînes non valides sur votre site peut provoquer des problèmes et entraîner un message d'erreur CSS critique.
Si vous rencontrez des erreurs lors de l'utilisation de Critical CSS, essayez ce qui suit :
- Cliquez sur le bouton « Régénérer le CSS critique » et voyez si cela résout le problème.
- Si vous obtenez à nouveau la même erreur, nous vous suggérons de changer de thème (utilisez un site intermédiaire si votre site est en ligne) et d'exécuter Critical CSS sur le nouveau thème. S’il n’y a aucun problème, le problème vient probablement du thème.
- Si vous rencontrez des problèmes après avoir installé un thème différent, nous vous recommandons de dépanner vos plugins.
- Si l'erreur persiste après avoir essayé tout ce qui précède, notez le message d'erreur, désactivez temporairement Critical CSS sur votre site et contactez notre équipe d'assistance pour obtenir de l'aide pour résoudre le problème.
Vous pouvez cependant être rassuré, car la fonctionnalité CSS critique de Hummingbird a été conçue dans le but de préserver l'intégrité visuelle de votre site tout en améliorant les performances. La fonctionnalité gère bien les erreurs et interrompra rarement un site, même en cas d'erreurs.
Pour plus d'informations sur l'utilisation de la fonctionnalité Critical CSS, reportez-vous à la documentation du plugin.
Activez toutes les fonctionnalités d'optimisation de Hummingbird pour de meilleurs résultats
Si obtenir une vitesse et des performances maximales de votre (vos) site(s) WordPress est d'une importance cruciale pour vous, l'utilisation du CSS critique de Hummingbird est certainement une fonctionnalité que vous ne devriez pas ignorer.
Pour de meilleures performances et économies, nous vous recommandons d'utiliser Critical CSS avec la mise en cache des pages et toutes les fonctionnalités d'optimisation des actifs mises à disposition par le plugin, y compris CDN et Delay JavaScript Execution.
Dans la plupart des cas, la combinaison de toutes les fonctionnalités d'optimisation de Hummingbird devrait aider votre site à atteindre des scores PageSpeed de 90+ ou à le rapprocher d'un parfait 100 si votre site fonctionne déjà bien.
Comme mentionné précédemment, Critical CSS est une fonctionnalité Hummingbird Pro et est disponible pour tous les membres de WPMU DEV.
Si vous utilisez actuellement notre plugin gratuit Hummingbird, envisagez de devenir membre pour un accès abordable et sans risque à notre plateforme WordPress tout-en-un. Il contient tout ce dont vous avez besoin pour lancer, gérer et développer votre activité de développement Web.
Et si vous êtes membre de l'agence, vous pouvez même en marque blanche et revendre Hummingbird (plus l'hébergement, les domaines, toute notre suite de plugins PRO, et plus encore) le tout sous votre propre marque.