Chargement différé des fichiers JS

Dans cette documentation :

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 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"

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é

  • 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

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

Seuls les fichiers qui sont présents dans le HTML de la page au moment de son chargement se verront appliquer la balise defer. Dans certains cas, un fichier JS crée une requête dans laquelle il charge un autre fichier JS qui ne peut alors pas être différé. Exemples courants :
  • 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
Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.