|
|
# Analyser un site pour la performance
|
|
|
|
|
|
## Aperçu de la mission
|
|
|
|
|
|
L'analyse de la performance est une compétence essentielle pour les développeurs web modernes. Dans cette mission, vous réaliserez un audit complet de la performance d'un site réel, en utilisant à la fois des outils intégrés au navigateur et des services tiers pour identifier les goulots d’étranglement et proposer des stratégies d'optimisation.
|
|
|
|
|
|
Votre tâche consiste à fournir un rapport détaillé de performance démontrant votre compréhension des principes de la performance web et votre capacité à utiliser efficacement des outils d’analyse professionnels.
|
|
|
|
|
|
## Instructions de la mission
|
|
|
|
|
|
**Choisissez un site web** pour l’analyse - sélectionnez une des options suivantes :
|
|
|
- Un site populaire que vous utilisez fréquemment (site d'actualité, réseau social, e-commerce)
|
|
|
- Un site d’un projet open-source (pages GitHub, sites de documentation)
|
|
|
- Un site d’entreprise locale ou un portfolio
|
|
|
- Votre propre projet ou un travail de cours précédent
|
|
|
|
|
|
**Réalisez une analyse multi-outils** en utilisant au moins trois approches différentes :
|
|
|
- **Outils DevTools du navigateur** - Utilisez l’onglet Performance de Chrome/Edge pour un profilage détaillé
|
|
|
- **Outils d’audit en ligne** - Essayez Lighthouse, GTmetrix, ou WebPageTest
|
|
|
- **Analyse réseau** - Examinez le chargement des ressources, la taille des fichiers, et les schémas de requêtes
|
|
|
|
|
|
**Documentez vos résultats** dans un rapport complet incluant :
|
|
|
|
|
|
### Analyse des métriques de performance
|
|
|
- **Mesures du temps de chargement** provenant de plusieurs outils et perspectives
|
|
|
- **Scores Core Web Vitals** (LCP, FID, CLS) et leurs implications
|
|
|
- **Répartition des ressources** montrant quels éléments contribuent le plus au temps de chargement
|
|
|
- **Analyse du diagramme en cascade réseau** identifiant les ressources bloquantes
|
|
|
|
|
|
### Identification des problèmes
|
|
|
- **Goulots d'étranglement spécifiques** étayés par des données
|
|
|
- **Analyse des causes profondes** expliquant pourquoi chaque problème survient
|
|
|
- **Évaluation de l’impact utilisateur** décrivant comment les problèmes affectent les utilisateurs réels
|
|
|
- **Classement des priorités** des problèmes selon leur gravité et la difficulté à les corriger
|
|
|
|
|
|
### Recommandations d’optimisation
|
|
|
- **Améliorations spécifiques et réalisables** avec impact attendu
|
|
|
- **Stratégies de mise en œuvre** pour chaque changement recommandé
|
|
|
- **Bonnes pratiques modernes** pouvant être appliquées (chargement paresseux, compression, etc.)
|
|
|
- **Outils et techniques** pour le suivi continu de la performance
|
|
|
|
|
|
## Exigences de recherche
|
|
|
|
|
|
**Ne vous fiez pas uniquement aux outils navigateur** - élargissez votre analyse en utilisant :
|
|
|
|
|
|
**Services d’audit tiers :**
|
|
|
- [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) - Audits complets
|
|
|
- [GTmetrix](https://gtmetrix.com/) - Analyse de performance et optimisation
|
|
|
- [WebPageTest](https://www.webpagetest.org/) - Tests en conditions réelles
|
|
|
- [Pingdom](https://tools.pingdom.com/) - Surveillance globale de la performance
|
|
|
|
|
|
**Outils d’analyse spécialisés :**
|
|
|
- [Bundle Analyzer](https://bundlephobia.com/) - Analyse de la taille des bundles JavaScript
|
|
|
- [Outils d’optimisation d’images](https://squoosh.app/) - Opportunités d’optimisation des ressources
|
|
|
- [Analyse des en-têtes de sécurité](https://securityheaders.com/) - Impact sur la performance de la sécurité
|
|
|
|
|
|
## Format des livrables
|
|
|
|
|
|
Créez un rapport professionnel (2-3 pages) incluant :
|
|
|
|
|
|
1. **Résumé exécutif** - Principaux constats et aperçu des recommandations
|
|
|
2. **Méthodologie** - Outils utilisés et approche des tests
|
|
|
3. **Évaluation de la performance actuelle** - Mesures et métriques de référence
|
|
|
4. **Problèmes identifiés** - Analyse détaillée des problèmes avec données à l’appui
|
|
|
5. **Recommandations** - Stratégies d’amélioration priorisées
|
|
|
6. **Feuille de route de mise en œuvre** - Plan d’optimisation étape par étape
|
|
|
|
|
|
**Inclure des preuves visuelles :**
|
|
|
- Captures d’écran des outils et métriques de performance
|
|
|
- Graphiques ou diagrammes montrant les données de performance
|
|
|
- Comparaisons avant/après lorsque c’est possible
|
|
|
- Diagrammes en cascade réseau et répartition des ressources
|
|
|
|
|
|
## Grille d’évaluation
|
|
|
|
|
|
| Critères | Exemplaire (90-100%) | Adéquat (70-89%) | À améliorer (50-69%) |
|
|
|
|-------------------------|--------------------------------------------------------------------------------------|-------------------------------------------------------------------------------|-----------------------------------------------------------------------------|
|
|
|
| **Profondeur de l’analyse** | Analyse complète utilisant 4+ outils avec métriques détaillées, analyses causes profondes, et impact utilisateur | Bonne analyse avec 3 outils, métriques claires et identification basique des problèmes | Analyse basique avec 2 outils et profondeur limitée, identification minimale des problèmes |
|
|
|
| **Diversité des outils** | Utilisation des outils navigateur + 3+ services tiers avec analyses comparatives et perspectives | Utilisation des outils navigateur + 2 services tiers avec quelques analyses comparatives | Utilisation des outils navigateur + 1 service tiers avec comparaison limitée |
|
|
|
| **Identification des problèmes** | Identification de 5+ problèmes spécifiques avec analyses causes profondes détaillées et impact quantifié | Identification de 3-4 problèmes avec bonne analyse et mesure partielle de l’impact | Identification de 1-2 problèmes avec analyse basique |
|
|
|
| **Recommandations** | Recommandations spécifiques, réalisables, avec détails de mise en œuvre, impact attendu, et bonnes pratiques modernes | Bonnes recommandations avec certaines indications de mise en œuvre et résultats attendus | Recommandations basiques avec peu de détails sur la mise en œuvre |
|
|
|
| **Présentation professionnelle**| Rapport bien organisé avec structure claire, preuves visuelles, résumé exécutif, et mise en forme professionnelle | Bonne organisation avec quelques preuves visuelles et structure claire | Organisation basique avec preuves visuelles minimales |
|
|
|
|
|
|
## Résultats d’apprentissage
|
|
|
|
|
|
En réalisant cette mission, vous démontrerez votre capacité à :
|
|
|
- **Appliquer** des outils et méthodologies professionnels d’analyse de performance
|
|
|
- **Identifier** les goulots d’étranglement via une analyse basée sur les données
|
|
|
- **Analyser** le lien entre qualité du code et expérience utilisateur
|
|
|
- **Recommander** des stratégies d’optimisation spécifiques et réalisables
|
|
|
- **Communiquer** des résultats techniques sous un format professionnel
|
|
|
|
|
|
Cette mission renforce les concepts de performance abordés en cours tout en développant des compétences pratiques que vous utiliserez tout au long de votre carrière en développement web.
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**Avertissement** :
|
|
|
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant autorité. Pour les informations critiques, une traduction professionnelle effectuée par un humain est recommandée. Nous décline toute responsabilité en cas de malentendus ou d’interprétations erronées résultant de l’utilisation de cette traduction.
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
