Comment supprimer les fichiers JavaScript ?

Comment supprimer les fichiers JavaScript pour augmenter la vitesse de chargement ?

Que sont ces fameux fichiers ? JavaScript est un langage informatique qui vous aide à ajouter des éléments esthétiques pour améliorer l’expérience utilisateur sur votre site web mais il peut aussi consommer beaucoup de temps.

Ce temps monopolisé a deux effets néfastes : il ennuie vos visiteurs et il peut par conséquent nuire au référencement de votre site internet dans les résultats des moteurs de recherche car depuis 2010, le temps de chargement d'un site est un facteur de référencement sur Google.

1 - Identifier les fichiers JavaScript

La première étape du processus consiste à identifier le fichier JavaScript concerné. Pour effectuer cette tâche, l’une des méthodes les plus simples est d’utiliser PageSpeed Insights.

Cet outil de Google affiche rapidement la liste des fichiers spécifiques qui bloquent actuellement l’affichage d’une page précise et qui sont situés au-dessus de la ligne de flottaison.

Vous pouvez également utiliser l'outil Website Grader afin d'obtenir des informations sur les performances de votre site web, et notamment afin de vous assurer que vos fichiers JavaScript aient une taille optimale.

Qu'est-ce que la ligne de flotaison ? Tout ce qui s’affiche en premier sur l’écran d’un visiteur se trouve au-dessus de cette ligne de flottaison. Cela signifie que si un élément JavaScript ne fonctionne pas dès que les visiteurs chargent une page, il ne devrait pas être inclus dans l’en-tête de cette page.

L’élément JavaScript le plus fréquemment utilisé est JQuery et vous le verrez sans doute très souvent.

2 - Choisir la meilleure méthode pour corriger les fichiers JavaScript

Une fois que vous avez identifié les scripts à déplacer, il est temps de décider comment vous voulez les corriger.

Deux principales méthodes s’offrent à vous : la première consiste à inclure les scripts. De cette façon, leur contenu est ajouté directement dans le code HTML de la page et il n’est chargé que quand il devient nécessaire. C’est la meilleure option quand il s’agit d’un script appliqué à une seule page.

L’autre méthode est de reporter le script : en reportant le fichier JavaScript, vous retardez le chargement de tous les scripts non-essentiels jusqu’au premier affichage, ou du moins jusqu’au chargement des éléments les plus essentiels. Cette option est préférable quand le script n’est pas crucial et que son chargement peut attendre.

3 - Décider où déplacer votre fichier JavaScript

Vous pouvez maintenant appliquer cette nouvelle méthode à votre site, mais quelle que soit l’option choisie, vous devez supprimer les éléments JavaScript de l’en-tête et les ajouter aux sections individuelles du code HTML.

Trouver l’en-tête de votre site web dépendra du CMS utilisé. Vous le trouverez généralement dans les paramètres généraux d’une page ou, s’il s’agit d’un site conçu avec WordPress, dans les options de thème de la page ou un fichier header.php de l’éditeur. 

Attention : Si vous n’êtes pas un utilisateur expérimenté, vous ne devez pas modifier le fichier header.php car vous risquez de créer des erreurs inutiles sur votre site.

L’endroit où vous déplacez un script dépend du timing de celui-ci : doit-il se déclencher à un point précis de la page ou peut-il attendre que toute la page soit affichée ? Dans le premier cas, placez le script dans la balise HTML Body ou le module HTML personnalisé ; dans le second cas, mettez-le dans la section du pied de page.

4 - Déplacez le script

L’étape suivante est assez simple : il vous faut ajouter le script à l’endroit voulu.

5 - Testez l'intégration

Cette étape est l’une des plus importantes du processus.

Après avoir effectué tous ces changements, vérifiez l’aperçu pour vous assurer que le site fonctionne encore. La page se charge-t-elle correctement ? Les éléments sont-ils tous bien affichés ? Si un élément est rompu ou ne charge pas correctement, vous pouvez résoudre le problème à l’aide de différents outils de développement : testez-en quelques-uns et choisissez votre préféré. Dès que vous avez trouvé les erreurs, vérifiez votre code avec attention afin de voir si vous n’avez pas oublié de composants essentiels, comme des points-virgules ou des accolades.

6 - Mettre en ligne le fichier JavaScript

Vous pouvez attester qu’il n’y a aucun problème avec votre page après avoir appliqué des changements ? Vous pouvez maintenant la mettre en ligne.

Maintenant que vous avez supprimé les fichiers JavaScript bloquant l’affichage, vous pouvez continuer à améliorer la vitesse de votre site web en analysant les autres éléments réputés pour ralentir la performance.

Pour pousser ce postulat encore plus loin, un test régulier de la vitesse des sites de vos clients devrait être un point fréquent dans tout planning de développement.

Pour aller plus loin, découvrez comment évaluer votre site web en utilisant l'outil website grader ; ou découvrez les modèles de site web gratuits de HubSpot.