Règle de vitesse: Supprimer les fichiers JavaScript qui bloquent l’affichage

Dernière mise à jour le 20 décembre 2021 Publié le 9 janvier 2015

supprimer-fichiers-javascript-bloquent-affichage

Cette règle se déclenche dans Google PageSpeed Insights lorsqu’un ou plusieurs scripts bloque l’affichage de la page.

Le problème

Puisque les fichiers JavaScript peuvent modifier le HTML de la page, le navigateur doit attendre leurs chargements complets, avant d’afficher quoique ce soit à l’utilisateur.

Comment identifier les fichiers qui bloquent l’affichage

Analyser simplement votre site avec Google PageSpeed Insights. Si l’analyse détecte des scripts bloquant l’affichage de la page, l’erreur suivante sera affichée: « Elimitate render-blocking JavaScript ans CSS in above-the-fold content ».

Et oui, les fichiers CSS bloquent également le rendu de la page. Consulter mon article sur comment optimiser la diffusion de vos fichiers CSS.

La fausse solution et la solution

Plusieurs développeurs vous diront de simplement mettre les scripts dans le bas de page. Ce n’est pas suffisant…

Trois solutions sont possibles pour supprimer les scripts qui bloquent l’affichage de la page. À vous de voir quelles solutions s’adaptent le mieux à votre projet.

1. Intégrer les ressources JavaScript peu volumineuses

Si les scripts sont peu volumineux, il est préférable de les inclure directement dans le HTML. De cette façon, le navigateur n’a pas à attendre le chargement du script avant d’afficher le contenu à l’utilisateur.

Par exemple, disons que votre HTML est semblable à celui-ci.

<html>
    <head>
        <script type="text/javascript" src="small.js"></script>
    </head>
    <body>
        <div>Hello, world!</div>
    </body>
</html>

Vous devez remplacer le script de cette manière.

<html>
    <head>
        <script>
            /* Contenu de mon fichier JavaScript */
        </script>
    </head>
    <body>
        <div>Hello, world!</div>
    </body>
</html>

De cette manière, aucun script ne bloque l’affichage de la page.

2. Rendre async les ressources JavaScript

Le chargement « async » est la recommandation de Google. L’ajout de l’attribut « async » à vos scripts informe le navigateur qu’il n’a pas à attendre le chargement du script avant d’afficher le contenu à l’utilisateur.

Vous devez ajouter l’attribut de cette façon:

<script async src="my.js">

Pour les sites WordPress

WordPress inclut les fichiers JavaScript grâce à la fonction wp_enqueue_script() et à l’heure où j’écris ces lignes, il n’est pas facile d’ajouter l’attribut « async », à moins d’utiliser une extension comme WP Rocket ou W3 Total Cache.

Pour ajouter l’attribut « async » à vos scripts et cela sans extension. Utilisez le bout de code suivant qui est à placer dans le fichier functions.php de votre thème.

add_filter( 'script_loader_tag', 'add_async', 10, 2 );
function add_async( $tag, $handle ) {
    return str_replace( ' src', ' async src', $tag );
}

Avec ce filtre, il est possible d’ajouter des conditions pour ajouter l’attribut uniquement sur certaines pages ou bien cibler uniquement certains scripts.

3. Différé complètement le chargement des scripts

La dernière technique consiste à différer le chargement de vos scripts après le chargement de la page. Plus difficile à implémenter, cette technique offre toutefois les meilleurs résultats.

Pour conclure

Soyez vigilant avec les techniques deux et trois, car leur implémentation pourrait causer des erreurs. Vous ne pouvez pas différer le chargement d’un fichier si vous en avez besoin plus tôt lors du chargement de la page.

Démarrer votre site WordPress en quelques minutes