Chargement différé des fichiers JavaScript

Vous voyez toujours l'audit Éliminez les ressources qui bloquent le rendu dans PageSpeed?

Il est possible que vous excluiez des scripts essentiels de la transmission différée, veuillez envisager de réduire les exclusions pour prioriser les performances.

Lorsque la fonctionnalité de chargement différé de JavaScript est activée, le navigateur affichera la page et chargera les scripts ultérieurement. Cet article contient plus d'informations sur cette fonctionnalité, une section pour résoudre les problèmes courants et des notes techniques.

Vous pouvez l'activer à partir de l'onglet Optimisation des fichiers, comme indiqué ci-dessous :

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

Cette option contribue à la recommandation PageSpeed " Éliminez les ressources qui bloquent le rendu".

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 pas le site. 

En activant cette option, tous vos fichiers JS, ceux minifiés par WP Rocket inclus, seront chargés avec :

• L'attribut defer
• L'attribut customisé data-rocket-defer, pour identifier WP Rocket comme l'auteur de cette optimisation.

Comme indiqué ci-dessous :

<script src="https://example.com/wp-content/webpack.runtime.min.js" id="webpack-runtime-js" data-rocket-defer defer></script>
<script src="https://example.com/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js" data-rocket-defer defer></script>
<script src="https://example.com/wp-includes/js/jquery/jquery-migrate.min.js" id="jquery-migrate-js" data-rocket-defer defer></script>
<script src="https://example.com/js/frontend-modules.min.js" id="frontend-modules-js" data-rocket-defer defer></script>

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.

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

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