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

Supprimer les Fichiers Javascript qui bloquent l'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. Pour optimiser la diffusion de vos fichiers CSS rendez-vous sur cet article.

Remove render-blocking JavaScript

La fausse solution

Plusieurs développeurs vous diront de simplement mettre les scripts dans le bas de page.

Ce n’est pas suffisant…

Les solutions

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 complètement le chargement du script 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.

Partagez cela
© 2017 , bulledev.com