🠔 Retour

TP 03 : Optimisation des Ressources Web

Durée : 2h30
•
Difficulté : ⭐⭐
•
Thème : Performance web

Objectif -

Dans ce TP, vous allez optimiser les ressources du site web du Bureau des Étudiants de l’ESIROI afin de réduire son empreinte écologique et d’améliorer ses performances. L’objectif est de mettre en œuvre différentes techniques d’optimisation : compression d’images, minification des fichiers CSS et JavaScript, concaténation des ressources et mise en cache.

Temps imparti : 2 heures et 30 minutes

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

Informations +

L’optimisation des ressources web est essentielle pour améliorer les performances d’un site tout en réduisant la consommation de bande passante et son empreinte écologique.

Dans ce TP, vous appliquerez ces techniques sur le site du BDE afin de diminuer le poids des pages, d’accélérer leur chargement et de mesurer les effets concrets des optimisations réalisées.

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 performances

    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. Ouvrez le projet dans un navigateur et utilisez Google Lighthouse pour analyser les performances du site.
    • Notez les scores pour les catégories suivantes : Performance, Accessibilité, Bonnes pratiques, SEO et Éco-conception si disponible.
    • Capturez les résultats afin de les comparer après optimisation.

  2. Étape 2 : Optimisation des images

    1. Identifiez les images les plus volumineuses du site et analysez leur taille, leur format et leur impact sur le chargement.
    2. Compressez les images avec des outils comme TinyPNG ou ImageOptim, sans perte de qualité visible.
    3. Remplacez les images originales par les versions optimisées dans le projet.
    4. Vérifiez que les images restent correctement affichées et que la qualité visuelle demeure acceptable.

  3. Étape 3 : Minification et concaténation des fichiers CSS et JavaScript

    1. Minifiez les fichiers CSS du projet avec un outil comme cssnano.
    2. Minifiez les fichiers JavaScript avec UglifyJS.
    3. Combinez les fichiers CSS et JavaScript lorsque cela est pertinent afin de réduire le nombre de requêtes HTTP.
    4. Modifiez les références dans le code HTML pour pointer vers les nouveaux fichiers optimisés.

  4. Étape 4 : Mise en cache

    1. Configurez la mise en cache des ressources statiques telles que les images, les fichiers CSS et les scripts JavaScript.
    2. Si vous utilisez un serveur web local, modifiez ses paramètres pour activer un cache adapté.
    3. Testez de nouveau le site avec Google Lighthouse afin de vérifier le fonctionnement du cache.
    4. Notez les améliorations observées après cette optimisation.

Conclusion : rédaction du rapport +

Documentez les résultats de l’analyse et les optimisations appliquées. Comparez les performances du site avant et après intervention, puis estimez l’impact de ces améliorations sur son empreinte écologique.