Chargement différé des fichiers JavaScript

Que fait l’option Chargement différé des fichiers JavaScript ?

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 de différé de manière à ce qu’ils ne bloquent pas le chargement d’autres ressources de votre site, et donc 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 : 

Cela inclut les scripts chargés avec un attribut src même s'ils n'ont pas d'extension .js.

Nous recherchons également tous les scripts en ligne liés à jQuery, et nous les reportons également. Cela permet une meilleure compatibilité, de sorte que jquery.js peut être reporté dans un plus grand nombre de cas.

Cela vous permettra d'améliorer un peu plus votre score PageSpeed.

Résolution de problèmes

En fonction de votre site, vous devrez peut-être aussi empêcher certains fichiers d’être différés : Exclure des fichiers JS du chargement différé

Notez que Google ne prend pas en considération le fait qu'il n'est parfois pas possible de reporter tous les JavaScripts, du moins pas sans casser votre site. Tout fichier que vous excluez du chargement différé entraînera une plainte de PageSpeed, mais dans certains cas, il est préférable de préserver la fonctionnalité.

GT Metrix - Defer parsing of JavaScript

Lorsque vous effectuez un test GT Metrix, vous pouvez constater qu'il ne vous donne pas un score parfait pour cette recommandation, même lorsque Chargement différé des fichiers JSt est activée. Voici les raisons les plus courantes. Pour savoir si celles-ci s'appliquent à votre site, assurez-vous de cliquer sur la recommandation pour faire apparaître la liste des fichiers.

Fichiers exclus pour des raisons de compatibilité

• Tous les fichiers que vous avez dû exclure pour des raisons de compatibilité seront signalés par GTMetrix

• jquery.js
  Si vous avez activé le Mode Sécurisé, jQuery.js est exclu pour éviter tous problèmes sur votre site. Vous pouvez essayer de désactiver le mode sécurisé, mais assurez-vous de vérifier soigneusement tout en étant déconnecté de WordPress, afin de vous assurer que tout fonctionne comme prévu.

• https://www.google.com/recaptcha/api.js
  Nous excluons automatiquement ce fichier Google Recaptcha pour éviter un problème. 
• Il y a quelques autres exclusions automatiques dans le but d'éviter les problèmes reconnus. Liste des fichiers exclus

• L’attribut defer ne sera pas appliqué si jamais l’un des attributs suivant est présent : 

  • async 
  • data-cfasync="false"

Fichiers injectés par Cloudflare

Si vous avez activé certaines options dans Cloudflare, elles injecteront des fichiers JS lors du chargement de la page. Nous n'avons aucun contrôle sur eux et ils ne seront pas différés. Par exemple, si vous avez activé leur option d'obfuscation d'adresse email ( Email Address Obfuscation), vous trouverez ce fichier listé par GT Metrix :

• cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js

Fichiers chargés indirectement

• Fichiers Google Recaptcha, ex.: https://www.gstatic.com/recaptcha/releases/wk6lx42JIeYmEAQSHndnyT8Q/recaptcha__en.js
• Fichiers Youtube, ex:
• https://www.youtube.com/yts/jsbin/www-embed-player-vfl4oVEZe/www-embed-player.js
• https://www.youtube.com/yts/jsbin/player-vflzQZbt7/en_US/base.js

Fichiers sans extension .js

Les fichiers doivent avoir une extension .js pour être différées. Exemples courants de fichiers signalés par GT Metrix, sans l'extension .js:

• Fichiers Google Maps, ex: https://maps.googleapis.com/maps/api/js?key=
• Fichiers Youtube, ex:. https://www.youtube.com/embed/KEh_6XMF4jY?feature=oembed

Notes Techniques

Pour permettre de différer jquery.js, WP Rocket recherche les scripts en ligne qui le nécessitent, et ils sont reportés.

Nous les encapsulons avec le code suivant :

window.addEventListener('DOMContentLoaded', function() { wrapped_script });

Techniquement, les scripts en ligne ne sont pas "différés" - vous ne verrez pas la balise defer. Mais cela exécute les scripts plus tard, avec DOMContentLoaded.

Nous ignorons, c'est-à-dire que nous ne reportons pas les scripts en ligne qui :

• contiennent DOMContentLoaded ou document\\.write
• ne contiennent pas jQuery ou $.( or $(,