Table des matières
Le problème du JavaScript inutilisé
A quoi sert le JS ?
JavaScript (JS) est un langage très utilisé sur le web. Il sert à contrôler tout ce qui relève d’une action ou d’un comportement.
Le HTML s’occupe des éléments d’une page, le CSS leur donne une apparence graphique, et le JS gère les interactions.
Par exemple,
- un widget pour voter sur la qualité d’un article utilise un script JS
- le bouton « envoyer » d’un formulaire se base sur un script JS
- le bouton « acheter » d’une fiche-produit est géré en JS
- l’animation d’un « swiper » (caroussel d’images) utilise JS
- les statistiques, Analytics, Matomo et autres, se gèrent en JS
- etc
Overdose de JS
Un même site peut donc charger des dizaines de scripts JS.
Sur WordPress, un bon nombre de plugins vont rajouter leurs scripts. Et ralentir toujours un peu plus le chargement d’une page.
De même, la plupart des thèmes WordPress ajoutent des fonctionnalités en JS :
- un menu responsive
- un bouton « Retour en haut »
- diverses animations
- etc
De même, les constructeurs de pages comme Elementor, vont ajouter des scripts bien lourds.
Or, si certains scripts sont très légers, d’autres pèsent un âne mort. Le script de Google Tag Manager d’Analytics pèse par exemple plus de 100 ko :
Quand on additionne tous les scripts JS, on arrive souvent facilement à plus de 500 ko, voire 1 mo, chargés sur chaque page.
Dont souvent 80 à 90% n’y seront jamais utilisés.
Un chargement massif et aveugle
Ce chargement des scripts se fait par défaut de manière globale.
Le thème va charger le JS de toutes ses fonctionnalités… même si on n’en utilise aucune.
Elementor va charger le JS de tous ses widgets… même si on n’en utilise que trois.
WooCommerce va charger son script d’ajout de produit au panier… partout, même sur les pages de blog.
Bref, chacun fait sa bêtise dans son coin. L’addition de ces bêtises cause une catastrophe dans les performances.
Tout cela aboutit au reproche formulé par PageSpeed Insights :
Réduisez les ressources JavaScript inutilisées
Réduisez les ressources JavaScript inutilisées et différez le chargement des scripts tant qu’ils ne sont pas requis afin de réduire la quantité d’octets consommés par l’activité réseau.
Vous pouvez envisager de réduire le nombre de plug-ins WordPress qui chargent des scripts JavaScript inutilisés dans votre page, ou désactiver certains de ces plug-ins. Pour déterminer les plug-ins qui ajoutent des scripts JavaScript superflus, exécutez une couverture de code dans Chrome DevTools. Vous pouvez identifier le thème ou le plug-in responsable à partir de l’URL du script. Recherchez les plug-ins pour lesquels un grand nombre de scripts présentent beaucoup d’éléments en rouge dans la couverture de code. Un plug-in ne doit mettre un script en file d’attente que s’il est effectivement utilisé dans la page.
Un chargement JS doublement inutile
Or, ce chargement de ressources JavaScript peut être inutile de deux manières différentes :
- parce que ce JS ne fera rien sur telle page
- parce que ce JS n’est pas vital lors du chargement de la page
Par exemple :
- Quand le navigateur s’occupe d’afficher la page demandée par l’internaute, à quoi sert de charger le bouton « retour en haut » ? A rien, puisque d’office on se trouve déjà en haut de page.
- A quoi sert de charger dès le début le script qui va gérer le bouton de paiement ? A rien, puisqu’on sait que le client potentiel ne va pas cliquer dessus en moins de 3 secondes.
Du JS utile sur une page est donc chargé dès le départ, à un moment où il est inutile.
Ce constat nous mène droit vers la solution.
Si l’optimisation du JS vous semble trop complexe, je peux m’en occuper pour vous :
Service d’optimisation des performances
Les solutions pour optimiser le chargement du JS
Le problème du JS inutile ayant plusieurs facettes, les solutions sont donc multiples.
Supprimer le JS gadget
D’abord, la meilleure manière de ne pas charger du JS inutile consiste à ne pas en avoir.
Donc, exit un certain nombre de plugins purement cosmétiques, qui plombent vos performances en ajoutant fort peu de choses.
Ainsi, vous pouvez supprimer carrément telle librairie de widgets si vous n’en utilisez que quelques-uns.
Reporter le chargement du JS
Pour éviter le chargement inutile d’un JS utile, on peut tout simplement le reporter. Il sera chargé, mais à la fin, quand la page sera affichée.
Pour cela, il suffit d’ajouter les attributs async ou defer.
Comment choisir entre async et defer ?
L’attribut async est correct pour tous les scripts tiers. Ex : Google Analytics ou Matomo peuvent attendre que la page soit rendue.
L’attribut defer est approprié pour les scripts du thème et des plugins qui changent quelque chose sur les pages du site.
| Attribut | Quand l’utiliser | Impact |
|---|---|---|
| async | Scripts indépendants (stats, pubs) | Exécution immédiate, ordre non garanti |
| defer | Scripts dépendants ou critiques (DOM complet) | Exécution après le HTML, ordre garanti |
Plugins pour gérer les attributs async et defer
Des plugins d’optimisation peuvent vous aider à gérer les attributs async et defer des scripts JS :
- LiteSpeed (mon préféré)
- Autoptimize
- WP Rocket
- Asset CleanUp
- etc
Déplacer les scripts JS vers le footer
Par défaut, WordPress charge les scripts dans l’en-tête. Pile quand on n’en a pas besoin.
Déplacez-les dans le footer sauf s’ils sont essentiels pour le rendu initial. Là aussi, des plugins peuvent vous y aider.
Limiter le chargement du JS aux pages sur lesquelles ils sont utiles
On l’a vu, du JS se charge de manière non-pertinente sur toutes les pages, alors qu’il n’est utile que sur certaines.
Si vous avez le niveau technique, vous pouvez régler ça en ajoutant une fonction à votre fichier functions.php :
function conditional_enqueue_scripts() {
if (is_page('contact')) {
wp_enqueue_script('contact-form-js');
}
}
add_action('wp_enqueue_scripts', 'conditional_enqueue_scripts');
WordPress permet d’utiliser divers sélecteurs, comme :
- is_front_page(). Cela vérifie si la page est la page d’accueil.
- is_page(). Cela vérifie si la page est de type « page » au sens de WordPress (et pas un article ou un produit).
- is_singular(). Cela vérifie si la page est un article.
- is_category(). Cela vérifie si la page est une page de catégorie d’articles.
- etc
Avec cette technique, vous pouvez :
- éliminer le script du formulaire de contact de toutes les pages qui ne sont pas la page Contact
- éliminer tout script de paiement ailleurs que sur les pages produit
- éliminer certains scripts des pages d’accueil et de catégorie
- etc
Minifier et concaténer ?
Il est souvent conseillé de minifier et concaténer le JS. Cela signifie : le compacter et réunir tous les fichiers en un seul.
D’expérience, je le déconseille. Cela casse le JS dans un trop grand nombre de cas.
Vous pouvez essayer, et voir avec l’inspecteur si ces opérations causent des erreurs dans la console.
La minification est moins risquée.
La concaténation se fait souvent dans un ordre illogique, qui cause des erreurs de type « Undefined ».
De plus, la concaténation est une idée idiote dès lors qu’un site utilise le protocole HTTP/2 qui permet d’envoyer des fichiers en parallèle. Rien ne sert de tout retarder avec un seul gros fichiers : l’envoi de plein de petits fichiers est plus efficace.
L’opti du JS, un calvaire
Très sérieusement, je pense, comme vous probablement, que l’optimisation du JS est juste un calvaire.
Tout cela est complexe, et peu intéressant au fond. En effet, ce que vous voulez, c’est vous occuper de votre métier, pas vous perdre dans des détails techniques ennuyeux.
Pourtant, si le succès d’un site dépend en partie de ses performances techniques, alors il est nécessaire de s’en occuper.
Si vous n’avez pas trop envie d’optimiser votre JS, je peux le faire pour vous :
Service d’optimisation des performances
