🠔 Retour

TP 02 : Détection et Réduction des Scripts Inutilisés

Durée : 2h
•
Difficulté : ⭐⭐
•
Thème : JavaScript & performance

Objectif -

Dans ce TP, vous allez identifier et éliminer les scripts JavaScript inutilisés ou redondants sur le site web du Bureau des Étudiants de l’ESIROI. L’objectif est de réduire la taille des fichiers JavaScript, d’améliorer les performances du site et de limiter son empreinte écologique.

Temps imparti : 2 heures

Date et lieu de dépôt : À déterminer

Informations +

Les scripts JavaScript non utilisés ou redondants peuvent rallonger les temps de chargement, consommer des ressources inutilement et augmenter l’impact environnemental d’un site.

Ce TP vous apprendra à les repérer, à les supprimer ou à les optimiser, puis à mesurer les effets de ces changements sur les performances globales du site.

Prérequis nécessaires +

  • Connaissances de base en HTML, CSS et JavaScript
  • Docker et Docker Compose installés sur votre machine
  • Accès à une machine avec Ubuntu, Windows ou macOS
  • Installation de SonarQube et SonarScanner (optionnel)

Ressources utiles +

Livrable +

À la fin de ce TP, vous devrez compléter une section de votre rapport individuel décrivant les optimisations effectuées, les résultats avant et après optimisation, ainsi qu’une évaluation de leur impact sur les performances et l’empreinte écologique du site.

Rappel des critères du rapport :

  • Longueur : 10 pages maximum
  • Organisation du rapport :
    • Introduction : Présentation générale du projet et de ses objectifs
    • Section 1 : Optimisation de l’utilisation des polices web
    • Section 2 : Détection et réduction des scripts inutilisés
    • Section 3 : Optimisation des ressources web
    • Conclusion : Résumé des apprentissages et recommandations principales

Étapes du TP +

  1. Étape 1 : Analyse initiale des scripts

    1. Si ce n’est pas déjà fait, clonez le dépôt contenant le site vitrine du BDE : 
    git clone https://github.com/courdier/ecoconception.git
    1. Déplacez-vous dans le répertoire du projet :
    cd pages/en-pratique/bde-esiroi
    1. Réalisez un audit des scripts avec Chrome DevTools :
    • Ouvrez le site dans Google Chrome.
    • Accédez à Chrome DevTools avec F12 ou Ctrl + Shift + I.
    • Allez dans l’onglet Sources, puis ouvrez Coverage.
    • Cliquez sur Start Instrumenting Coverage pour démarrer l’analyse.
    • Naviguez sur les différentes pages du site pour mesurer l’utilisation réelle des scripts.
    • Analysez le rapport obtenu afin d’identifier le pourcentage de code JavaScript réellement exécuté.
    • Prenez des captures d’écran pour les intégrer au rapport.

  2. Étape 2 : Suppression ou optimisation des scripts inutilisés

    1. Supprimez les scripts inutilisés :
    • Retirez les fichiers JavaScript inutiles du projet.
    • Si seules certaines portions d’un fichier sont inutilisées, supprimez uniquement ces parties sans altérer les fonctionnalités.
    1. Optimisez les scripts conservés :
    • Refactorisez les scripts partiellement utilisés pour les rendre plus efficaces.
    • Si une bibliothèque JavaScript est trop lourde pour l’usage réel, envisagez une alternative plus légère.
    1. Testez le site après modification :
    • Vérifiez que les suppressions n’ont causé aucun dysfonctionnement.
    • Contrôlez avec les outils de développement que les scripts restants sont utiles.

  3. Étape 3 : Analyse post-optimisation

    1. Réalisez une nouvelle analyse avec Chrome DevTools :
    • Refaites l’analyse de couverture des scripts après optimisation.
    • Comparez les nouveaux résultats avec ceux obtenus avant modification.
    1. Complétez avec une nouvelle analyse SonarQube :
    • Lancez à nouveau l’analyse du site avec SonarQube.
    • Documentez les éventuelles recommandations supplémentaires.

Check-list de réalisation du TP +

Cette check-list vous accompagne tout au long du TP. Elle permet de vérifier que chaque action attendue a bien été réalisée et de suivre votre progression.

  • Audit des scripts JavaScript présents sur la page
  • Identification des scripts inutilisés ou redondants
  • Suppression ou optimisation des scripts identifiés
  • Test de fonctionnement après modifications
  • Mesure des indicateurs de performance : taille JS, temps de chargement, score écologique
  • Rédaction du rapport : tableau, captures d’écran et commentaires

Synthèse des résultats : avant / après optimisation +

Remplissez le tableau ci-dessous au fur et à mesure de votre travail. Il vous aidera à comparer la situation avant et après optimisation, puis à présenter clairement les gains obtenus dans votre rapport.

Tableau comparatif des scripts JavaScript

Script Action réalisée Taille initiale (Ko) Taille finale (Ko) Temps avant (ms) Temps après (ms) Score écologique avant Score écologique après Commentaire / justification
script1.js Supprimé 100 0 1200 900 45 55 Script inutilisé détecté, gain de performance et d’écoconception.
script2.js Optimisé 60 40 900 650 50 62 Minification et suppression de fonctions non appelées.

Ces lignes sont données à titre d’exemple. Adaptez le tableau avec vos propres résultats.

Conclusion : rédaction du rapport +

Documentez les résultats de l’analyse et proposez des recommandations précises pour améliorer le site. Estimez l’impact des optimisations réalisées sur les performances et sur l’empreinte écologique.