Lorsqu’il s’agit de la vitesse de votre site Web, il est important de considérer la vitesse comme une caractéristique nécessaire, et non comme un luxe, et de la traiter en conséquence. Il y a beaucoup de choses qui entrent dans l’équation qui déterminent la vitesse à laquelle les visiteurs du site commencent à voir le contenu lorsqu’ils visitent votre site Web. Certaines de ces choses que vous ne pouvez pas contrôler : la vitesse de leur connexion Internet, leur emplacement géographique, la congestion du réseau, etc. Cependant, il y a d’autres choses que vous pouvez et devriez contrôler.

Un outil que vous pouvez utiliser pour identifier les problèmes de réduction de vitesse qui sont sous votre contrôle est Google PageSpeed Insights. Vous avez sûrement déjà utilisé PageSpeed Insights (si vous ne l’avez pas encore fait, c’est le moment d’y aller avant de lire le reste de cet article). Il s’agit de questions gratuites et précises qui ralentissent la livraison de vos sites Web, comme le JavaScript et le CSS bloquant le rendu.

Problème commun : JavaScript et CSS bloquant le rendu

Il y a dix règles de vitesse utilisées pour analyser les sites exécutés par PageSpeed Insights. Deux de ces règles ont trait au blocage des ressources par JavaScript et CSS. Si vous ne respectez pas l’une ou l’autre de ces deux règles – et beaucoup de sites n’en respectent pas une ou les deux – vous verrez apparaître un message « Should Fix » vous indiquant que vous devriez le faire : Éliminez le JavaScript et le CSS bloquant le rendu dans le contenu ci-dessus.

Toujours à la recherche de cet hébergeur WordPress parfait ?

Essayez l'hébergement WordPress Premium de Kinsta pour découvrir votre site sans problèmes.
  • Contrôles stylisés représentant la gestion Entièrement infogéré
  • Bouclier avec une tique représentant la sécuritéSécurisé comme le fort knox
  • Fusionner des lignes représentant des migrationsMigrations gratuites
  • Trois chevrons droits représentant la vitesse du serveurVitesse ultime
  • Flèche circulaire avec un point central représentant les sauvegardesSauvegardes quotidiennes
  • Hexagones décalés représentant notre pile de serveursPlatforme Google Cloud
Éliminer le JavaScript et le CSS bloquant le rendu dans le contenu ci-dessus.

Éliminer le JavaScript et le CSS bloquant le rendu dans le contenu ci-dessus.

Qu’est-ce que ça veut dire ? Voici une explication plus approfondie.

Lorsqu’un navigateur charge une page Web, les ressources JavaScript et CSS empêchent généralement l’affichage de la page Web jusqu’à ce qu’elles soient téléchargées et traitées par le navigateur. Dans certains cas, c’est une bonne chose. Par exemple, affichez du HTML pur avant le téléchargement d’un CSS et vous obtiendrez un flash de contenu sans style (FOUC), ce qui est probablement une expérience pire pour vos utilisateurs que d’attendre quelques centièmes de seconde de plus pour que le contenu apparaisse.

Certaines ressources doivent être téléchargées et traitées avant d’afficher quoi que ce soit. Cependant, de nombreuses ressources CSS et JavaScript sont conditionnelles – c’est-à-dire qu’elles ne s’appliquent que dans des cas précis – ou ne sont tout simplement pas nécessaires pour afficher le contenu au-dessus de la ligne de flottaison. Pour produire l’expérience la plus rapide possible pour vos utilisateurs, vous devriez essayer d’éliminer toutes les ressources bloquant le rendu qui ne sont pas nécessaires pour afficher le contenu au-dessus de la ligne de flottaison.

Je veux être clair sur un point : il se peut qu’il y ait trop d’efforts ou simplement qu’il soit impossible de supprimer toutes les ressources bloquant le rendu. Cela pourrait même produire le redouté FOUC (vers le haut) que j’ai mentionné il y a une minute. Rappelez-vous simplement que notre but n’est pas d’atteindre un score PageSpeed parfait. Au lieu de cela, notre objectif est d’offrir la meilleure expérience utilisateur possible, ce qui signifie un site Web qui se charge aussi vite que possible sans afficher le contenu non stylisé.

En d’autres termes, utilisez PageSpeed Insights pour identifier les fichiers de bloquant le rendu que vous pouvez essayer d’éliminer, mais laissez l’UX être votre ligne directrice. Vous pouvez également voir ce message apparaître dans d’autres outils de test de vitesse. Par exemple, dans GTmetrix, il apparaît sous la forme « Defer Parsing of JavaScript ».

Comment éliminer le JavaScript et le CSS bloquant le rendu

Il y a une extension pour ça, non ? Bien sûr, mais vous devez comprendre ce qui se passe avant de commencer à brancher des extensions. De nombreuses extensions sont hautement configurables, et savoir comment les ressources bloquant le rendu sont éliminées vous aidera à travailler plus efficacement avec l’extension de votre choix.

Effacer JS du chemin de rendu critique

Tout d’abord, parlons de JavaScript. L’idée de base est de déplacer les ressources JavaScript et jQuery inutiles hors du chemin de rendu critique. Cela se fait généralement en ajoutant l’attribut deferou l’attribut async aux éléments HTML script qui appellent des ressources JavaScript.

Les attributs defer et async ne sont pas identiques et les différences peuvent être importantes à comprendre.

  • L’attribut async indique au navigateur de commencer à télécharger la ressource immédiatement sans ralentir l’analyse HTML. Une fois que la ressource est disponible, l’analyse HTML est mise en pause pour que la ressource puisse être chargée.
  • L’attribut defer indique au navigateur de ne pas télécharger la ressource jusqu’à ce que l’analyse HTML soit terminée. Une fois que le navigateur a fini avec le HTML, il téléchargera et rendra tous les scripts différés dans l’ordre dans lequel ils apparaissent dans le document.

La grande différence entre les deux est que defer garantit que les scripts sont téléchargés et appliqués à la page Web dans l’ordre dans lequel ils apparaissent dans le document HTML, contrairement à async. Le résultat est que si async est utilisé sur toutes les ressources JavaScript, il peut souvent casser les ressources qui dépendent des ressources qui apparaissent plus tôt dans le document. Le problème le plus commun qu’ async produit est de casser les ressources jQuery qui essaient de charger avant que jquery.js n’ait été ajouté au document.

Optimiser la livraison des ressources CSS

Le rendu bloquant le CSS peut également être difficile, voire impossible à éliminer entièrement. L’arrangement idéal est de :

  • Identifier les styles qui sont nécessaires pour afficher le contenu au-dessus de la ligne de flottaison et deliver those styles inline with the HTML.
  • Utiliser l’attribut media sur les éléments de link qui poussent les fichiers CSS pour identifier les ressources CSS qui sont conditionnelles, c’est-à-dire qui ne sont nécessaires que pour des dispositifs ou des situations spécifiques.
  • Les ressources CSS restantes devraient être chargées de manière asynchrone, cela se fait généralement en ajoutant defer ou async avec JavaScript. Pour être honnête, nous sommes vraiment en train de nous dépasser, n’est-ce pas ? C’est définitivement le territoire de l’ingénieur en amont. Ce qui est génial si vous êtes un ingénieur en amont, mais pas la plupart d’entre nous. La bonne nouvelle est qu’il s’agit d’un article sur WordPress, et vous pouvez éliminer ou au moins réduire de manière significative le nombre de ressources JS et CSS bloquant le rendu affectant votre site avec le(s) bon(s) plugin(s).

Plugins pour réduire le rendu bloqué par le JavaScript et CSS

En préparation de cet article, j’ai parcouru une douzaine de plugins WordPress populaires conçus pour réduire et éliminer le blocage du rendu par les ressources JavaScript et CSS et j’en ai choisi cinq qui ont produit une réduction mesurable.

Je dois également mentionner que je n’ai pas utilisé de plugins de mise en cache pendant ce processus. Mon site de test a été mis en place sur un plan Kinsta qui est livré avec une mise en cache intégrée au niveau du serveur. Si vous n’êtes pas un client de Kinsta, la mise en place d’un bon plugin de mise en cache améliorera les performances de votre site.

Cependant, avant d’arriver aux plugins, nous avons besoin d’un score de référence. Ce que j’ai fait, j’ai mis en place un site de test simple sur Kinsta et installé un thème populaire, gratuit, un thème de WordPress.org qui aime jQuery : Sydney. Sans rien faire d’autre, voilà où nous en sommes.

PageSpeed Insights sans plugins

PageSpeed Insights sans plugins

Pas trop mal, mais il y a certainement place à l’amélioration. Il y a deux ressources JavaScript et cinq ressources CSS dans une position bloquant le rendu.

Un autre test que nous utiliserons comme point de référence est le ce test Pingdom. En particulier, nous voulons prendre note du nombre de requêtes nécessaires pour charger la page web et voir comment ce nombre change avec les différents plugins activés. Chaque demande supplémentaire signifie un autre aller-retour vers le serveur, donc de nombreux plugins combineront les ressources CSS et JavaScript dans moins de fichiers pour accélérer les performances du site Web.

Depuis que mon site de test est hébergé sur Kinsta, le site est en plein essor dès le départ et a nécessité 24 requêtes pour charger la page d’accueil.

Test de vitesse sans plugins

Test de vitesse sans plugins

Voyons comment nous pouvons améliorer cette performance en essayant quelques plugins.

Speed Booster Pack

Le premier est Speed Booster Pack. Ce plugin est actif sur plus de 40 000 sites WordPress et obtient une note de 3,6 sur 5 étoiles sur WordPress.org.

Plugin Speed Booster pack

Plugin Speed Booster pack

Les paramètres du plugin se trouvent sous Paramètres >Speed Booster Pack et le menu est raisonnablement simple tout en offrant simultanément plusieurs options de configuration.

Le menu des options générales peut déplacer les scripts vers le pied de page et différer l’analyse des fichiers javascript. En combinaison, ces deux options devraient supprimer entièrement le JavaScript bloquant le rendu. Un autre menu intitulé Still need more speed ? permet le chargement asynchrone des CSS. Alors que cela aurait dû éliminer tous les CSS bloquant le rendu, l’activation de cette option a produit le redouté FOUC, donc je n’ai pas laissé cette option activée.

Avec le plugin configuré, voici comment le site s’est comporté sur PageSpeed Insights.

PageSpeed Insights avec le plugin Speed Booster

PageSpeed Insights avec le plugin Speed Booster

As anticipated, there are no render-blocking JavaScript resources left. However, since asynchronous CSS loading produced a FOUC and has to be left disabled, all five CSS resources are still blocking above-the-fold content.

Test de vitesse avec le plugin Speed Booster

Test de vitesse avec le plugin Speed Booster

Curieusement, le nombre de requêtes a augmenté. Bien que rien n’indique que le nombre aurait dû diminuer, l’augmentation du nombre de requêtes est une surprise. La note de performance globale s’est un peu améliorée, donc je n’appellerai pas Speed Booster Pack un fiasco. Cependant, il existe des options plus efficaces.

JCH Optimize

Ensuite, jetons un coup d’oeil à JCH Optimize. Bien que le plugin ait moins d’installations actives que Speed Booster Pack, il obtient une impressionnante note de 4,6 étoiles sur 5.

JCH Optimize plugin

JCH Optimize plugin

Ce plugin combine et minifie JavaScript et CSS, et avec de nombreuses autres fonctionnalités, est conçu pour accélérer le chargement des pages. Bien que l’élimination des ressources bloquant le rendu ne soit pas spécifiquement mentionnée nulle part, la combinaison de fichiers JavaScript et CSS devrait signifier qu’il y a moins de ressources nécessaires pour charger la page et moins de ressources JS et CSS dans une position bloquant le rendu.

Le plugin ajoute un menu Settings > JCH Optimize. Le menu Paramètres comporte plusieurs pages avec de nombreuses options de configuration différentes. Pour rendre les choses relativement simples, j’ai sélectionné les réglages automatiques Moyen dans le menu Options de base.

Les résultats étaient un peu déroutants.

PageSpeed Insights avec le plugin JCH

PageSpeed Insights avec le plugin JCH

Toutes les ressources JavaScript ont été combinées, ce qui signifie qu’une seule ressource JS bloque le rendu du contenu au-dessus de la ligne de flottaison. Jusqu’à présent, tout va bien. Les résultats du CSS donnent un peu mal à la tête. Il y a encore cinq ressources CSS dans une position bloquant le rendu. Il semble que le plugin a combiné et minimisé le contenu des fichiers CSS. Cependant, les fichiers de polices ont été exclus, et JCH a chargé trois fichiers CSS différents plutôt que de combiner les trois dans un seul fichier CSS.

Ce n’est pas ce à quoi je m’attendais. Voyons ce que Pingdom pense des changements.

Test de vitesse avec le plugin JCH

Test de vitesse avec le plugin JCH

Comme prévu, le nombre de requêtes a été réduit de moitié puisque deux ressources JavaScript ont été combinées. À part cela, le test montre que la performance est pratiquement inchangée.

Je m’attendais à une amélioration plus mesurable de la part de JCH. Je m’attendais à ce que tous les fichiers CSS soient combinés et qu’il ne reste que deux ressources bloquant le rendu : un fichier JavaScript combiné et un fichier CSS combiné. Je ne sais pas pourquoi cela ne s’est pas produit. Une version premium de JCH Optimize est disponible. Il est donc possible que certaines des fonctionnalités avancées permettent de combiner davantage les fichiers CSS et de réduire le nombre de ressources bloquant le rendu.

En l’état actuel des choses, JCH Optimize n’est pas très utile pour optimiser ce site d’essai en particulier.

Autoptimize

Avec plus de 600 000 installations actives et une cote de 4,7 sur 5 étoiles, Autoptimize est l’un des plugins d’optimisation de la vitesse les plus populaires dans le répertoire des plugins WordPress. Il obtient également de bonnes notes dès le départ grâce à l’attitude charitable et généreuse de l’auteur du plugin.

autoptimize plugin

Autoptimize plugin

Ce plugin est conçu pour être simple à utiliser et il tient cette promesse. Alors que beaucoup d’autres options que j’ai regardées avaient des menus très complexes, Autoptimize est très simple. Tout ce que j’ai fait, c’est d’aller dans Strong > Autoptimize et de sélectionner les trois options à cocher principales affichées sur cette page.

Paramètres Autoptimize

Paramètres Autoptimize

Voici comment mon site de test s’est comporté su PageSpeed Insights après cette simple optimisation de 30 secondes à peine.

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités
PageSpeed Insights avec le plugin Autoptimize

PageSpeed Insights avec le plugin Autoptimize

Nous avons réussi à réduire le nombre de ressources bloquant le rendu d’un total de sept à quatre. Très bien. Maintenant, pour voir comment le nombre de requêtes a changé.

Test de vitesse avec le plugin Autoptimize

Test de vitesse avec le plugin Autoptimize

Le nombre total de requêtes a considérablement diminué, passant de 24 à 17, et la note de performance a grimpé à 92, ce qui est très impressionnant. Il semble que Autoptimize soit populaire pour une très bonne raison. Je dois mentionner que Kinsta a remarqué que Autoptimize a tendance à être incompatible avec certains sites qui utilise le CSS personnalisé inline dans header.php. Par exemple, si vous avez personnalisé le code CSS dans le fichier header.php de votre thème, faites très attention si vous essayez Autoptimize.

Async Javascript

Le suivant sur la liste est Async Javascript. Ce plugin est devenu très populaire en peu de temps et est maintenu par le même développeur d’Autoptimize. Il est passé de 4 000 installations à plus de 40 000 installations en moins d’un an, avec une cote très élevée : 4.4 sur 5 étoiles. Il s’agit d’un autre plugin simple. Il suffit de l’installer et de l’activer. Allez à l’option Async Javascript ajoutée au menu Admin. Cochez la case à côté de Activer JavaScript asynchrone. Sélectionnez le bouton radio pour la méthode Defer ou Async. Sauvegardez ensuite les modifications et voyez comment votre site fonctionne.

Dans le cas de mon site de test, async ended up loading some jQuery files before jquery.js a fini par charger quelques fichiers jQuery avant jquery.js, ce qui a fini par casser le site. J’ai donc opté pour la méthode du defer. Une fois ces options sélectionnées, voici comment se sont déroulés les tests. Tout d’abord, PageSpeed Insights.

PageSpeed Insights avec le plugin Async

PageSpeed Insights avec le plugin Async

Comme prévu, tout JavaScript a été effacé, mais le CSS n’a pas été touché. C’est bien parce que ce plugin est conçu pour s’adresser uniquement à JavaScript.

Test de vitesse avec le plugin Async

Test de vitesse avec le plugin Async

La performance du site sur Pingdom’s Website Speed Test est restée pratiquement inchangée avec le plugin installé. Une fois de plus, cela confirme que ce plugin fait exactement ce qu’il dit qu’il fera : éliminer le JavaScript bloquant le rendu.

Combinaison d’Async JS et d’Autoptimize

Le menu de Async Javascript attire l’attention sur le fait qu’il est conçu pour jouer avec Autoptimize. Comme j’avais déjà Autoptimize installé, j’ai fait un essai. Après avoir activé l’option Autoptimiser automatiquement, une nouvelle case à cocher est apparue dans le menu Paramètres Async Javascript pour activer le support de l’optimisation automatique. Avec cette case à cocher activée, voici comment le site s’est comporté.

PageSpeed Insights avec les plugins Async et Autoptimize

PageSpeed Insights avec les plugins Async et Autoptimize

Excellent. Avec l’installation des deux plugins, nous avons réussi à réduire le nombre total de ressources bloquant le rendu à seulement trois ressources CSS. Comment avons-nous influé sur le nombre de requêtes ?

Test de vitesse avec les plugins Async et Autoptimize

Test de vitesse avec les plugins Async et Autoptimize

Le site est rapide et n’envoie que 17 requêtes.

Considéré comme tel, je ne suis pas un grand fan d’Async Javascript. Il utilise plus d’espace dans le menu des paramètres pour la publicité pour la version Premium du plugin que pour les paramètres du plugin. Il ajoute un élément primaire au menu Admin plutôt que de l’ajouter en tant qu’élément de sous-menu dans le menu Paramètres où il appartient vraiment. Il se trompe d’orthographe JavaScript en l’écrivant Javascript. Ok, j’admets que la dernière plainte est triviale, mais si le P dans WordPress est important, alors le S dans JavaScript l’est aussi.

Mise à jour : L’auteur du plugin a répondu à ces préoccupations après la publication de notre message en réduisant la taille de l’annonce, en déplaçant l’emplacement du plugin dans le menu Admin, et même en corrigeant l’orthographe de JavaScript. Cela nous a impressionnés. Indépendamment de mes pensées sur Async Javascript seul, lorsqu’il est associé à Autoptimize, il permet d’éliminer complètement le JavaScript bloquant le rendu et de réduire la quantité de CSS bloquant le rendu.

Hummingbird

Le dernier plugin que j’ai testé était Hummingbird de WPMU DEV. C’est un plugin que j’utilise sur certains de mes propres sites web. C’était un plugin premium mais il est maintenant disponible gratuitement ! Il s’agit de la réduction la plus importante des ressources bloquant le rendu, ce qui mérite d’être mentionné.

Plugin WordPress Hummingbird

Plugin WordPress Hummingbird

Hummingbird est un plugin complexe, mais aussi assez convivial compte tenu de tout ce qu’il offre. Pour déplacer les ressources bloquant le rendu, allez dans Hummingbird > Minification et sélectionnez Check Files. A partir de l’écran résultant, vous pouvez sélectionner les fichiers CSS et JavaScript à déplacer vers le pied de page ou l’en-tête de page, ainsi que les fichiers à combiner et à minifier.

J’ai combiné et minifié tous les fichiers et je les ai tous déplacés vers le pied de page avec deux exceptions : le fichier style.css primaire du thème et jquery.js. J’ai trouvé que ces deux fichiers doivent apparaître dans leur emplacement d’origine pour éviter de casser le site ou de produire un FOUC. Avec ces paramètres, voici comment le site s’est comporté dans PageSpeed Insights.

PageSpeed Insights avec le plugin Hummingbird

PageSpeed Insights avec le plugin Hummingbird

Comme prévu, nous n’avons plus que deux ressources bloquant le rendu : style.css et jquery.js. Super. Voyons ce que Pingdom peut nous dire.

Test de vitesse avec le plugin Hummingbird

Test de vitesse avec le plugin Hummingbird

Bien que la note de performance globale ne soit pas aussi élevée qu’avec Autoptimize, nous avons réussi à réduire le nombre total de demandes à la valeur la plus basse que nous avons vue jusqu’à présent : 16.

Async JS fonctionne bien avec Hummingbird

Bien que les choses se présentent vraiment bien, il me vient à l’esprit qu’Async Javascript pourrait nous aider à déplacer jquery.js sans rien casser. Après avoir activé Async Javascript et relancé le test PageSpeed Insights, je vois que nous avons presque complètement éliminé toutes les ressources bloquant le rendu.

Éliminer le JavaScript bloquant le rendu.

Éliminer le JavaScript bloquant le rendu.

Tout ce qui reste est style.css. La dernière étape pour nous permettre d’éliminer complètement toutes les ressources bloquant le rendu serait de mettre le style.css en inline. Cependant, nous avons réussi à passer d’un message Should Fix à un message Consider Fixing dans PageSpeed Insights. Je vais m’en remettre à la définition de Google pour savoir quand s’inquiéter au sujet d’un message Consider Fixing et dire que ce que nous avons accompli jusqu’à présent est un succès retentissant.

Résumé

Tous les plugins qui prétendent traiter et éliminer les problèmes bloquant le rendu JavaScript et CSS ne sont pas créés égaux. Autoptimize utilisé en combinaison avec Async Javascript est la meilleure option gratuite que j’ai trouvée pour mon site de test. Le plugin Hummingbird et Async Javascript ont donc également produit des résultats qui ont finalement satisfait PageSpeed Insights.
Cet article est loin d’être exhaustif, et il existe de nombreux plugins supplémentaires que vous pouvez utiliser pour traiter les ressources bloquant le rendu. Quels plugins utilisez-vous et recommandez-vous pour supprimer le JavaScript et le CSS bloquant le rendu ?