TP 6 : Web Performance

Objectifs pédagogiques du TP

• Utiliser des outils d'analyse de performance des applications Web
• Utiliser les APIs de performance des navigateurs

Outils

• Machines de TP (connectées en filaire) sous Linux
• Navigateur Chrome / Chromium et outils de développement Web (Performance / Timeline)
• Application en ligne : WebPageTest
• Specs
  • Web Performance Timing API
  • Navigation Timing Level 2
  • Performance Timeline Level 2

Remarque : si vous n'arrivez pas à démarrer Chromium sous Linux, essayez de supprimer le répertoire .config/chromium dans votre home directory.

À faire avant de débuter le TP : désactiver le cache et les plugins de blocage de contenus (Adblock, Ghostery...) de votre navigateur.

Rendu du TP

Vous répondrez dans un document réalisé avec un traitement de texte selon ce modèle. Vous uploaderez ce document en PDF dans Tomuss, sur la page de l'UE, à la fin du TP.

Dans ce TP, vous allez réaliser l'analyse d'une application Web existante : celle de l'Université Claude Bernard Lyon 1.

Utilisation de la console du navigateur

Les temps demandés dans cette partie sont à partir du départ de la première requête HTTP.

Ouvrez les Dev Tools de Chrome (onglet Performance ou Timeline, selon les versions). Lancez le chargement de l'application (page d'accueil de l'université) et identifiez les différents temps indiqués pour un même jeu de mesures :

• récupération de la page HTML (transaction HTTP)
• récupération de la / des feuille(s) CSS (transaction(s) HTTP à partir du début de la navigation) ; ne tenez pas compte des CSS demandées par YouTube et TarteAuCitron
• fin du premier rendu (de la page blanche au premier contenu)
• fin du rendu de l'app shell (cadre applicatif sans contenu)
• fin du chemin critique de rendu (cf. cours)
• durée totale du chargement

Utilisation des APIs de performance

Les temps demandés dans cette partie sont à partir du départ de la première requête HTTP.

Opérations à réaliser

• À l'aide du document Performance Timing Primer et de la spec Navigation Timing Level 2, créez un script qui vous permettra d'obtenir les temps de récupération de la page HTML et de création du DOM.
  Aide : le comptage du temps commence à timeOrigin.
• À l'aide de la spec Performance Timeline, déterminez comment obtenir les temps de chargement des données nécessaires à la création du CSSDOM, de l'app shell et du CRP.

Vous exécuterez ces scripts dans la console de votre navigateur. Pour chaque valeur, il vous est demandé d'effectuer une série de 10 mesures, de supprimer les 2 extrêmes et de calculer la moyenne des 8 restantes.

Mesures en conditions normales

Modification du contexte client

Renouvelez maintenant ces opérations en simulant un réseau 3G rapide (network throttling), puis un terminal de type ipad (settings -> devices) avec un réseau normal.

Dans votre tableur, faites un graphique permettant de comparer les valeurs correspondantes pour chacune de ces conditions. Tirez-en une synthèse / conclusion.

Analyse avec WebPageTest

Allez sur le site WebPageTest.

Analyse d'une application

• Lancez le chargement de la page d'accueil de l'université, sans simuler de perturbations, mais à partir de plusieurs endroits du globe (Amérique, Asie...). Notez les valeurs des temps correspondants.
• Dans l'onglet "Performance Review", observez ce qui s'est bien passé, et ce qui pourrait être amélioré, pour vous en souvenir à la question suivante...

Comparaison d'applications Web

Retournez à la page d'accueil de WebPageTest. Dans l'onglet "Visual Comparison", comparez le démarrage des pages d'accueil des universités Lyon 1 et Lyon 2. Si vous deviez donner un conseil aux Webmasters de votre université au sujet de l'optimisation du chemin critique de rendu, quel serait-il ?