Le coût du JavaScript inutile

Le JavaScript inutilisé peut non seulement gaspiller de la bande passante, mais aussi nuire aux performances de votre site web. Ce surplus de code entraîne des coûts en termes de ressources serveur et d’expérience utilisateur.

Raisons fréquentes d’un audit négatif

Des outils comme Lighthouse identifient souvent les fichiers JavaScript dont une grande partie du code n’est pas utilisée. Cela sert de signal d’alarme indiquant que des optimisations sont possibles.

L’importance de l’audit

Au-delà du simple score de performance, comprendre les détails de votre audit peut vous aider à prendre des décisions plus éclairées pour l’optimisation.

Stratégies pour éliminer le JavaScript inutile

Analyser le code avec précision

Utilisez les outils de développement de Chrome pour identifier le code JavaScript inutilisé en suivant ces étapes :

  1. Ouvrez les outils de développement (F12 ou Ctrl+Shift+I / Cmd+Option+I sur Mac).
  2. Allez dans l’onglet "Sources", puis cliquez sur "Filesystem".
  3. Attachez le dossier de votre projet pour accéder à vos fichiers.
  4. Ouvrez le fichier JavaScript que vous souhaitez inspecter.
  5. Cliquez sur le bouton de couverture de code (icône en forme de carré coloré).
  6. Actualisez votre page web.

Cela générera un rapport montrant le code qui a été exécuté en vert et le code non exécuté en rouge.

Utiliser des outils de build intelligents

Des outils de build comme Webpack peuvent vous aider à éliminer le code inutilisé grâce à des fonctionnalités comme le "tree-shaking". Voici comment activer cette fonctionnalité dans Webpack :

  1. Assurez-vous que votre fichier de configuration Webpack (webpack.config.js) est en mode "production".
  2. Ajoutez l’option d’optimisation pour supprimer le code mort :
// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};

Exécutez ensuite le build, et Webpack éliminera le code qui n’est pas utilisé.

WordPress et Joomla

Dans WordPress, il est possible de désactiver les scripts sur des pages spécifiques en utilisant des fonctions dans le fichier functions.php de votre thème :

// Désactiver un script sur une certaine page
function dequeue_my_script() {
  if (is_page('ma-page')) {
    wp_dequeue_script('mon-script');
  }
}
add_action('wp_print_scripts', 'dequeue_my_script', 100);

Dans Joomla, vous pouvez utiliser des extensions comme "JCH Optimize" pour combiner et minimiser les fichiers JavaScript, et même de les désactiver sur des pages spécifiques.

Conseils spécifiques selon la plateforme ou le framework utilisé

Angular

Si vous utilisez Angular, les cartes source peuvent grandement faciliter la tâche de diagnostic du code JavaScript :

  1. Allez dans votre fichier angular.json.
  2. Localisez l’option "sourceMap" et réglez-la sur true.
  3. Exécutez à nouveau votre build pour générer des cartes source.
  4. Utilisez ces cartes dans les outils de développement du navigateur pour identifier le code inutilisé.

Drupal

La gestion des bibliothèques dans Drupal peut souvent être optimisée de la manière suivante :

  1. Ouvrez votre fichier .libraries.yml dans le thème ou le module concerné.
  2. Utilisez l’option dependencies pour ne charger que les bibliothèques nécessaires à une page donnée.
  3. Utilisez hook_page_attachments_alter() pour conditionnellement attacher ou détacher des bibliothèques.

Magento

Dans Magento, la désactivation du bundling intégré peut souvent résoudre des problèmes de performances :

  1. Accédez à votre tableau de bord d’administration.
  2. Naviguez vers "Stores" > "Settings" > "Configuration" > "Advanced" > "Developer".
  3. Recherchez l’option pour le bundling JavaScript et désactivez-la.

React et Vue

Pour les projets basés sur React ou Vue, le chargement paresseux des composants peut être mis en œuvre comme suit :

  1. React : Utilisez React.lazy et Suspense pour charger dynamiquement les composants.
  2. Vue : Utilisez la syntaxe import() dans vos routes pour activer le découpage du code.

PrestaShop

Si vous utilisez PrestaShop, plusieurs options sont à votre disposition pour optimiser le JavaScript sur votre site :

  1. Désactiver les modules inutilisés : Accédez à votre tableau de bord, puis naviguez vers "Modules" > "Gestionnaire de modules". De là, vous pouvez désactiver ou désinstaller les modules qui injectent du JavaScript inutile.
  2. Utiliser la mise en cache Smarty : Cette fonctionnalité, intégrée dans PrestaShop, permet de mettre en cache certaines parties du code, y compris le JavaScript. Pour activer cette fonction, allez dans "Paramètres avancés" > "Performances" et cherchez la section "Mise en cache Smarty".
  3. Compression et minification : PrestaShop propose également des options pour la compression et la minification des fichiers CSS et JavaScript. Ces options sont également disponibles dans "Paramètres avancés" > "Performances".
  4. Audit de performance : Considérez l’utilisation d’outils tiers pour évaluer la performance du JavaScript sur votre site PrestaShop. Des plugins comme GTmetrix ou PageSpeed Insights de Google peuvent fournir des indications précieuses.

Bootstrap

Si vous utilisez Bootstrap, optimiser l’utilisation du JavaScript est également possible et recommandé :

  • Utilisez seulement les composants nécessaires : Plutôt que d’importer tout le fichier JavaScript de Bootstrap, vous pouvez importer uniquement les composants que vous utilisez. Cela réduira la taille de votre fichier JavaScript final.
  • Activez la minification : Assurez-vous que les fichiers JavaScript de Bootstrap sont minifiés pour réduire leur taille.
  • Asynchrone ou différé : Utilisez les attributs async ou defer pour les scripts de Bootstrap afin de ne pas bloquer le rendu de la page.