Chargement différé des fichiers JavaScript

Dans cette documentation :

WP Rocket 3.8+

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é.

Mode sécurisé : applicable uniquement pour les versions antérieures à 3.8

Si vous avez 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é : 

En plus du fichier jQuery par défaut chargé par WordPress, nous détectons également les jQuery chargés par les sources externes suivantes et ceux-ci seront automatiquement exclus par le Mode sécurisé :

  • JetPack
  • ajax.googleapis.com
  • cdnjs.cloudflare.com
  • code.jquery.com

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

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

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 $(,

Mise à jour depuis les versions précédentes

Avant la version 3.8 de WP Rocket, seuls les fichiers JavaScript avec une extension .js étaient reportés et les scripts en ligne ne l'étaient pas. Cela pouvait poser des problèmes lorsque jquery.js était reportée, mais était nécessaire pour les scripts en ligne. L'option "Mode sécurisé" a été conçue pour résoudre facilement ce problème.

Avec WP Rocket 3.8, les scripts en ligne faisant référence à jQuery seront également reportés (techniquement, il ne s'agit pas de les reporter mais de les exécuter à un moment ultérieur du chargement de la page), ce qui signifie que jquery.js peut également être reporté dans un plus grand nombre de cas. L'option Mode Sécurisé n'est donc plus nécessaire et nous l’avons donc supprimée.

Si vous avez effectué une mise à jour à partir d'une version précédente de WP Rocket et que vous utilisiez l'option Mode Sécurisé, vous verrez que l'exclusion jQuery est préservée avec le modèle suivant :

Pour voir si votre site peut bénéficier de la mise à jour, supprimez cette ligne : 

/jquery-?[0-9.]*(.min|.slim|.slim.min)?.js

Ensuite, vérifiez soigneusement votre site dans une fenêtre de navigateur déconnectée/incognito pour vous assurer que tout fonctionne correctement, et qu’il n’y a pas d’erreur JavaScript.

Si vous trouvez des erreurs "jquery not defined", réintégrez l'exclusion dans les réglages et sauvegardez.

En plus du fichier jQuery par défaut chargé par WordPress, ce modèle détecte et exclut également les jQuery chargés par les sources externes suivantes :

  • JetPack
  • ajax.googleapis.com
  • cdnjs.cloudflare.com
  • code.jquery.com

Si vous devez toujours exclure jquery.js ou tout autre fichier, vous pouvez maintenant le faire directement à partir des réglages du plugin, au lieu d'utiliser un plugin d'aide.

Pour les nouvelles installations de WP Rocket, jQuery sera différé par défaut.

Ces changements devraient conduire à :  ;

  • Une meilleure compatibilité générale et moins de problèmes 
  • Plus de JavaScript différé, donc un meilleur score PageSpeed.

Autres modifications apportées à cette option dans WP Rocket 3.8

  • Les scripts sans extension .js sont désormais différés (ils ne l'étaient pas auparavant)
  • L'option Mode Sécurisé pour exclure jquery.js a été supprimée, comme indiqué ci-dessus
  • Les exclusions peuvent désormais être effectuées dans les réglages du plugin au lieu de nécessiter un plugin d'aide.
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.