TP 01 - Optimisation de l'Utilisation des Polices Web

Objectif -

Dans ce TP, vous allez optimiser l’utilisation des polices web sur le site du Bureau des Étudiants de l’ESIROI. L’objectif est de réduire la charge des ressources liées aux polices, d’améliorer les performances du site et de limiter son empreinte écologique.

Temps imparti : 1 heure et 30 minutes

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

Informations +

Une utilisation inefficace des polices web peut ralentir le chargement des pages, augmenter le poids des ressources téléchargées et dégrader les performances globales du site.

Ce TP vous apprendra à mieux sélectionner les polices utilisées, à réduire les fichiers chargés, à privilégier des formats plus légers et à améliorer leur intégration dans une démarche d’écoconception numérique.

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 , réalisée dans le TP 04 (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 +

Étape 1 : Analyse initiale de l’utilisation des polices web
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. Inspectez les fichiers CSS et HTML afin d’identifier les polices web utilisées sur le site.
2. Notez les polices importées depuis des services externes comme Google Fonts et celles chargées localement.
3. Utilisez Lighthouse ou WebPageTest pour analyser l’impact des polices sur les performances du site : temps de chargement, poids des fichiers et affichage des textes.
4. Prenez des captures d’écran des résultats afin de les intégrer à votre rapport.
Étape 2 : Optimisation des polices web
1. Analysez les polices utilisées pour déterminer si elles sont toutes réellement nécessaires.
2. Supprimez les polices superflues ou redondantes.
3. Si plusieurs styles ou graisses d’une même police sont chargés, réduisez leur nombre lorsque cela est possible.
4. Créez un sous-ensemble de police afin de conserver uniquement les caractères nécessaires au site.
5. Utilisez un format optimisé comme WOFF2, plus léger que des formats tels que TTF ou OTF.
6. Vérifiez que les fichiers WOFF2 sont bien servis en priorité.
7. Configurez la mise en cache des polices sur une durée adaptée afin d’éviter des téléchargements répétés.
Étape 3 : Analyse post-optimisation
1. Refaites une analyse avec Google Lighthouse après les optimisations réalisées.
2. Comparez les nouveaux résultats avec ceux obtenus avant modification.
3. Effectuez une nouvelle analyse SonarQube pour vérifier qu’aucun nouveau problème n’a été introduit.
4. Documentez les gains obtenus et les recommandations supplémentaires éventuelles.

Conclusion : rédaction du rapport +

Documentez les résultats de votre analyse et proposez des recommandations précises pour améliorer l’utilisation des polices sur le site. Estimez l’impact de ces optimisations sur les performances générales et sur l’empreinte écologique.

TP 01 : Optimisation de l'Utilisation des Polices Web