Les scripts bloquants : c’est quoi et comment les éliminer ?
Si vous avez déjà analysé votre site web avec Google Page Insights, vous avez probablement vu un avertissement vous invitant à éliminer les scripts bloquants ou render-blocking. Peut-être même que c’est pour cela que vous êtes en train de lire cet article. Les scripts bloquants, c’est quoi ? Comment les éliminer ? Voici les questions que vous vous posez probablement et auxquelles nous allons répondre dans la suite de cet article.
Les scripts bloquants ou « render-blocking », c’est quoi ?
Les scripts bloquants sont des portions de code présents dans les fichiers d’un site Web, généralement CSS et JavaScript, qui empêchent le chargement rapide d’une page Web. Ces ressources, qui prennent un temps relativement long à être traitées par le navigateur, peuvent ne pas être nécessaires pour l’expérience immédiate de l’utilisateur. Les render-blocking peuvent être supprimées ou retardées jusqu’à ce que le navigateur ait besoin de les traiter.
Ne vous méprenez pas : CSS et JavaScript sont excellents. Sans le CSS, les sites Web ressembleraient uniquement à des pavés de texte. Sans JavaScript, nous ne serions pas en mesure d’ajouter des éléments dynamiques, interactifs et attrayants à nos sites Web. Mais, s’ils sont utilisés au mauvais moment, CSS et JavaScript peuvent nuire aux performances de votre site Web.
Voici pourquoi : Lorsqu’un navigateur charge une page Web pour la première fois, il analyse tout le code HTML de la page avant de l’afficher à l’écran du visiteur. Lorsque le navigateur rencontre un lien vers un fichier CSS, un fichier JavaScript ou un script en ligne (c’est-à-dire du code JavaScript dans le document HTML lui-même), il interrompt l’analyse HTML pour récupérer et exécuter le code, ce qui ralentit l’ensemble du processus.
Pourquoi les scripts bloquants sont mauvais pour votre site web ?
Les scripts JavaScript et CSS qui bloquent le rendu ralentissent vos pages, ce qui est mauvais pour plusieurs raisons. La vitesse du site joue un rôle dans de nombreux aspects essentiels de votre site Web, notamment la convivialité et l’optimisation sur les moteurs de recherche (SEO). Lorsque votre site se charge lentement, vous risquez de perdre des visiteurs et d’être moins bien classé sur les moteurs de recherche.
Bien sûr, la vitesse d’un site n’est pas seulement affectée par les render-blocking. Cela dit, c’est un facteur qui peut faire une différence significative dans les temps de chargement. N’oubliez pas que chaque ressource d’une page Web occupe des octets, et qu’une quantité plus importante de ces octets peut entraîner des temps de téléchargement plus longs. Moins votre site comporte de scripts, plus il est léger, mieux c’est.
En général, il est préférable de s’assurer que le code de votre site soit aussi propre et minimal que possible pour en améliorer les performances globales. Cependant, il y aura toujours des « restes » de code. Par défaut, les navigateurs essaient de tout charger en même temps, y compris les scripts bloquants.
C’est à vous de vous assurer que votre site charge d’abord les scripts nécessaires pour qu’il soit correct et utilisable lorsqu’un visiteur arrive sur une page. Ce n’est qu’ensuite que le reste des scripts doit être chargé.
Identifier les scripts bloquants
Avant de procéder à des modifications à l’intérieur de votre site web, vous devez d’abord identifier et localiser les scripts bloquants. Le meilleur moyen d’y parvenir est d’utiliser un outil gratuit en ligne, comme l’outil PageSpeed Insights de Google. Collez l’URL de votre site et cliquez sur Analyser.
Une fois l’analyse terminée, Google attribue à votre site un score de vitesse global, allant de 0 (le plus lent) à 100 (le plus rapide). Un score compris entre 50 et 80 est moyen, vous devez donc vous situer dans la partie supérieure de cette fourchette, ou au-dessus.
Pour identifier les scripts bloquants qui ralentissent votre page, faites défiler l’écran jusqu’à la rubrique « Opportunité », puis ouvrez l’accordéon « Éliminer les ressources qui bloquent le rendu ».
Vous verrez une liste de fichiers ralentissant la « première visualisation » de votre page – ces fichiers affectent le temps de chargement de tout le contenu qui apparaît lors du chargement initial de la page. C’est ce qu’on appelle aussi le contenu « au-dessus du pli ». Prenez note de tous les fichiers se terminant par les extensions .css et .js. et supprimez-les.
Supprimer les scripts bloquants : manuellement ou avec un plugin
Maintenant que vous avez identifié le problème, il y a deux façons de le résoudre : manuellement, ou avec un plugin.
Les plugins peuvent très bien éliminer les scripts bloquants à votre place. Mais, les plugins eux-mêmes ne sont que des fichiers supplémentaires ajoutés à votre serveur Web. Si vous voulez limiter le nombre de ces fichiers, ou si vous préférez simplement vous occuper des modifications vous-même, vous pouvez traiter manuellement le render-blocking. Pour ce faire, dans les fichiers de votre site Web, localisez les balises <script> identifiées lors de votre analyse PageSpeed.
Les balises <script> indiquent au navigateur de charger et d’exécuter le script identifié par l’attribut src (source). Le problème avec ce processus, est que ce chargement et cette exécution retardent l’analyse de la page Web par le navigateur, ce qui a une incidence sur le temps de chargement global de votre site.
Pour résoudre ce problème, vous pouvez ajouter l’attribut async (asynchrone) ou defer aux balises de script pour les scripts bloquants. async et defer sont placés comme suit :
<script src= »ressource.js » async>
<script src= »ressource.js » defer>
Bien qu’ils aient des effets similaires sur les temps de chargement, ces attributs indiquent au navigateur de faire des choses différentes. L’attribut async signale au navigateur de charger la ressource JavaScript, tout en analysant le reste de la page, et exécute ce script immédiatement après son chargement. L’exécution du script met en pause l’analyse du code HTML.
Les scripts dotés de l’attribut defer sont également chargés pendant l’analyse de la page. Cependant, le chargement de ces scripts est retardé jusqu’à la fin du premier rendu ou jusqu’au chargement des parties les plus essentielles.
Les attributs defer et async ne doivent pas être utilisés ensemble, sur la même ressource. Mais, l’un peut être mieux adapté à une ressource en particulier que l’autre. En général, si un script non essentiel dépend de l’exécution d’un script avant lui, utilisez defer. L’attribut defer garantit que le script sera exécuté après le script nécessaire précédent. Sinon, utilisez async.
Après avoir effectué vos modifications, effectuez une dernière analyse de votre site Web via PageSpeed Insights et voyez l’impact de vos modifications sur votre score. Vous constaterez probablement une amélioration notable, mais ne vous inquiétez pas si ce n’est pas le cas. De nombreux facteurs peuvent nuire aux performances d’une page, et vous devrez peut-être creuser un peu plus pour trouver la source des mauvaises performances.
Enfin, vérifiez bien vos pages pour vous assurer que votre site fonctionne correctement. La page se charge-t-elle rapidement ? Tous les éléments s’affichent-ils ? Si vous êtes arrivé à un point où vous avez essayé plusieurs techniques sans obtenir de gains notables, il est peut-être préférable d’envisager d’autres moyens d’accélérer vos pages, plutôt que de risquer de casser complètement votre site.
