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 possède 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.

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 charger 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 chemins relatifs des images et des polices seront automatiquement transformés en URLs absolues.
  3. 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.

Critical Path CSS de

In cases where our tool cannot generate critical path CSS, you can use the fallback field to specify your own. This will be applied in any case where the critical css does not already exist.To generate the necessary CSS you can use this  Critical Path CSS Generator tool:

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