JavaScript et CSS bloquant le rendu - PageSpeed

Remarque : Pour des informations générales sur les indications de PageSpeed et pourquoi vous ne devez pas vous soucier de votre "note", lisez cet article :  La note Google PageSpeed ne s'améliore pas

Dans cette documentation

Qu’est-ce que le JavaScript et le CSS bloquant le rendu ?

Avant que le navigateur puisse afficher une page Web, elle doit lui fournir son code HTML. Pendant ce processus, chaque fois que le navigateur rencontre un élément qui référence un script ou une feuille de style, il doit s'arrêter, demander le fichier, attendre le téléchargement du serveur et l'exécuter avant de pouvoir continuer à analyser ce code HTML. Avec la plupart des thèmes et plugins, WordPress ne se charge pas en une seule fois, mais plusieurs fichiers CSS et/ou JavaScript, et ce processus peut retarder considérablement le temps du rendu de la page.

Par conséquent, il est recommandé de retarder ("différer") le chargement des fichiers non critiques jusqu'à ce que le navigateur ait fini de rendre la page. Cela nécessite des ajustements à la source du HTML d'une page elle-même, ainsi qu'une connaissance précise de quel fichier est requis à quel stade de ce processus. Ça vous paraît compliqué ? Et bien ça l’est !

Néanmoins, des outils tels que Google PageSpeed Insights le tourne d’une manière à vous faire croire que c’est simple et facile : 

"Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison" (ou en Anglais "Eliminate render-blocking JavaScript and CSS in above-the-fold content")

Comme la plupart des recommandations données par Google PageSpeed, certaines d’entre elles sont soit impossibles, soit irréalisables, et ces même avec un plugin simplifié comme WP Rocket ! 

WP Rocket possède 2 options correspondant à ces recommandations :

  • Optimiser le chargement du CSS
  • Chargement différé des fichiers JS

Vous les trouverez dans l’onglet Optimisation des fichiers, en-dessous de Fichiers CSS et Fichiers JavaScript :

En activant ces options vous pourrez peut-être constater une amélioration de votre note PageSpeed ou de la note GT Metrix / Pingdom. Les résultats sont variables en fonction des sites. Rappelez-vous toujours de tester l'effet de ces options sur la vitesse de chargement de votre site.

Optimiser le chargement du CSS

L'option de chargement asynchrone des fichiers CSS de WP Rocket concerne cette  recommandation PageSpeed :

"Optimisez l'affichage des styles CSS" ou " Optimize CSS delivery"

Notre générateur de critical path CSS ne génère pas encore de CSS spécifique au mobile. Si vous avez un thème Responsive, le critical CSS devrait être semblable, mais si vous avez un thème séparé dédié au mobile, nous ne pouvons pas le générer encore.

Générer le Critical Path CSS

WP Rocket s'efforce de rendre aussi pratique que possible la gestion des optimisations de performance avancées comme le chargement asynchrone du CSS et le Critical CSS.

Lorsque vous activez l'option Optimiser le chargement du CSS, le CSS sera chargé de manière asynchrone sur votre site. En plus, le Critical Path CSS sera automatiquement généré en arrière plan et ajouté au prochain chargement de votre page.

Notre outil externe récupérera la première entrée de chaque type de publication publiée (articles, pages, produits, etc...), ainsi que les pages d'archives publiées (catégories, tags, catégories de produits, etc...). Il en extraira le Critical Path CSS pour chacun séparément, et renverra le code au plugin WP Rocket qui l'ajoutera ensuite aux pages respectives à la demande du visiteur, ou du pré-chargement du cache WP Rocket.

Ainsi, le CSS Critical Path généré par WP Rocket suit les fonctionnalités disponibles en front sur les différents types de pages de votre site Web.

Par exemple, s'il y a un Slider sur votre page d'accueil, le Critical Path CSS pour cette page reflétera cette fonctionnalité, tandis que leCritical Path CSS pour un article de blog pourra contenir un code légèrement différent.

Quand régénérer le Critical Path CSS ?

Lorsque vous faites des modification de votre feuille de style, que vous ajoutez/modifiez du custom CSS via l'outil de personnalisation de WordPress (ou un plugin), vous devriez régénérer le Critical Path CSS via le menu WP Rocket de la barre d'admin :

L'outil de génération du Critical Path CSS

Quelques remarques sur le fonctionnement de cet outil : 

  1. Votre site doit être public et accessible pour que ça fonctionne, ça ne fonctionnera donc pas en local. 
  2. Les IPs de l’outil ne doivent pas être bloquées par votre serveur ou un plugin de sécurité : 
    167.114.226.142 et 54.37.31.6
  3. Les chemins relatifs des images et des polices seront automatiquement transformés en URLs absolues.
  4. Le Critical Path CSS sera découpé et minifié avec soin. Cela signifie que les espaces requis (comme à l'intérieur des opérations calc ()) ou les backslashes (comme '\ f311' pour un glyphe dans une police d'icônes) seront conservés.

Empêcher la génération automatique du Critical Path CSS

Vous pouvez empêcher le génération automatique du Critical Path CSS en installant le plugin d’aide suivant :

📥   Télécharger (.zip):  WP Rocket | No Auto-generated Critical CSS

Développeurs : vous trouverez le code de ce plugin sur GitHub.

Modifier le Critical Path CSS généré

Si vous souhaitez modifier le Critical Path CSS généré par notre outil, suivez les instructions suivantes :

1
Utilisez l’outil pour générer automatiquement le critical path CSS pour votre site.
2
Désactivez les futures génération automatique en ajoutant le plugin d’aide ci-dessus.
3
Les fichiers CSS générés sont stockés sur votre serveur : /wp-content/cache/critical-css
Si vous êtes développeur et que vous comprenez le CSS, vous pouvez les modifier directement.
4
Videz le cache de WP Rocket

Critical Path CSS de Secours

Au cas où notre outils ne peut pas générer le critical path CSS, vous pouvez utiliser ce champs de secours pour y mettre le vôtre. Il sera appliqué à chaque fois que le critical path CSS n'existe pas déjà pour la page. Pour créer le code CSS nécessaire, vous pouvez utiliser cet outil  Critical Path CSS Generator :

1
Désactivez WP Rocket avant d'utiliser cet outil !
2
Entrez votre URL dans l'outil et copiez le CSS généré dans le champ Critical path CSS de WP Rocket : 

Remarque : Vous n'aurez pas besoin du code JavaScript fourni par l'outil. Copiez juste le CSS dans les réglages de WP Rocket qui se chargera de la partie JS automatiquement.
3
Attention ! Vous aurez besoin probablement de transformer toutes les URLs relatives de ce bout de code en URLs absolues manuellement (ex : pour les images background, fonts etc.)

Par exemple, si le CSS généré contient un chemin relatif à une police, comme ceci :
@font-face{font-family:droid_serifregular;src:url(../DroidSerif-webfont.eot);
	

Le chemin relatif (indiqué ici par  ../ dans l'URL) ne sera pas bon lorsqu'il sera retiré de son contexte. Vous avez alors besoin de le remplacer par son URL absolue, avec le chemin correct, par exemple :

@font-face{font-family:droid_serifregular;src:url(http://example.com/wp-content/themes/neutro/font/droid_serif_regular/DroidSerif-webfont.eot);
	

Si vous avez besoin d'exclure un fichier CSS particulier du chargement asynchrone, suivez-ce guide :  Exclure des fichiers CSS du chargement Asynchrone

Chargement différé des fichiers JS

Cette option concerne cette  recommandation de PageSpeed :

"Supprimez les ressources JavaScript qui bloquent l'affichage" ou  “Remove render-blocking JavaScript”

Il est préférable pour des questions de performance que les fichiers JavaScript soient chargés dans le bas de page de votre site, ou asynchronisé de manière à ce qu’ils ne bloquent pas le chargement d’autres atouts de votre site, et par là ne ralentissent le site.

En activant cette option, tous vos fichiers JS, ceux minifiés par WP Rocket inclus, seront chargés avec l'attribut  defer :

Si vous aves des problèmes sur votre site suite à l'activation de cette option, vous devriez activer le Mode Sécurisé, ceci empêchera jQuery d'être différé, pour des raisons de comptabilité :

Cela dépendra de votre site mais vous aurez peut-être besoin d'exclure certains fichiers JS du chargement différé :  Exclure des fichiers JS du chargement différé

Mais Google ne prend pas en considération que parfois, il est impossible de tout charger dans le bas de page (footer) - au moins sans casser votre site. Tous les fichiers que vous exclurez alors du chargement différé seront signalés par PageSpeed ; Mais vous ne pourrez rien y faire !

Les fichiers sur lesquels le chargement différé n’est pas appliqué

Le différemment ne sera pas appliqué si jamais l’un des attributs suivant est présent :

  • async 
  • data-cfasync="false"