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

L’un des problèmes avec les recommandations données par Google PageSpeed vient du fait que certaines d’entre elles sont soit impossibles, soit irréalisables. 

Une des recommandations que PageSpeed fait souvent : "É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")

WP Rocket à désormais 2 options correspondant à ces recommandations. Vous les trouverez dans l'onglet Fichiers Statiques, à CSS et JS bloquant le rendu :

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.


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. Note that Google does not take into consideration that sometimes it’s not possible to defer all JavaScript – at least not without breaking your site. Tous les fichiers que vous exclurez alors du chargement différé seront pointé du doigt par PageSpeed ; Mais vous ne pourrez rien y faire !

Options obsolètes : Si précédemment vous utilisiez les options avancées Fichiers JS avec chargement différé ou Fichiers JS à inclure dans le footer pendant le processus de minification, alors vous verrez toujours ces options lors de la mise à jour vers WP Rocket 2.10.x. Cependant ces options seront obsolètes dans une future version, nous vous recommandons donc d'utiliser la nouvelle option Chargement différé des fichiers JS ; Elle remplace désormais ces anciennes options.

Chargement asynchrone des fichiers 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"

Attention ! Elle est considérée comme une option avancée. Il vous faudra probablement mettre les mains dans le cambouis pour qu'elle fonctionne correctement.

Charger de manière asynchrone du CSS signifie que votre page débutera son chargement et sera visible alors même que les styles CSS n'auront pas encore été chargés. Ça veut dire aussi que l'aspect de votre site pourra être un peu étrange pendant quelques instants pendant son chargement :

On appelle ça un FOUC : un Flash Of Un-styled Content. Pour l'éviter, vous devez utiliser ce qu'on appelle du Critical Path CSS, du code CSS destiné au contenu devra être placé directement dans le HTML, tout en haut de votre page lors de son chargement. 

Générer le Critical Path CSS

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.

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