Retarder le chargement de vos scripts est une des techniques les plus payantes en ce qui concerne l’amélioration des performances de votre site.

Plusieurs développeurs ignorent cette technique prétextant que le chargement “async” ou l’inclusion dans le pied de page est suffisant.

Je suis en désaccord.

Le chargement de fichiers JavaScript a un impact majeur sur le “Critical Rendering Path”. Ce qui veut dire que l’utilisation de script retarde l’affichage du contenu pour l’utilisateur.

Comment différer le chargement en JavaScript

Le code ci-dessous est à intégrer juste avant la fermeture de la balise </body> de votre site.

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "scripts.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

En résumé, cela dicte au navigateur d’attendre le chargement complet avant de charger le fichier “scripts.js”.

N’oubliez pas de remplacer “scripts.js” par le nom de votre fichier JavaScript.

Dans quel contexte utiliser cette technique

Vous devez vous demander (pour chaque script intégré dans votre site) si votre script est vraiment utile au chargement de la page.

Par exemple, est-ce que jQuery doit être chargé immédiatement ou bien peut-il l’être après?

Vous vous rendrez alors compte que la plupart de vos scripts peuvent être chargés après le chargement de la page.

Que faire pour un site WordPress

Dans le cas d’un site WordPress, il est un peu plus compliqué de différer les scripts.

La façon facile

Certaines extensions telles que WP-Rocket, permettent de différer le chargement de vos scripts.

À la dure

Vous devez désactiver tous les scripts manuellement dans votre thème et vos extensions en recherchant la fonction “wp_enqueue_script”.

Par exemple:

wp_enqueue_script( 'contact-form-7', wpcf7_plugin_url( 'contact-form-7.js' ), array('jquery', 'jquery-form'), WPCF7_VERSION, $in_footer );

Ajouter ensuite la désactivation dans votre fichier “functions.php”.

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
	wp_deregister_script( 'contact-form-7' );
}