Web Performance

Lionel Médini

MIF38 - Université Claude Bernard Lyon 1

licence Creative Commons BY-NC-SA

But de ce cours

  • Comprendre les problématiques de performance des applications Web
  • Posséder quelques techniques pour les améliorer

Que demande le peuple ?

Exemple des news en ligne :

80% des gens privilégient la performance sur la fonctionnalité.

Source : P. Kinlan, dec. 2014

Mesure de performance

Déroulement d'un échange HTTP

Resource network timing (Google)

Accélérer le chargement des ressources

Référence sur Google Developers

Optimiser les ressources

  • Compresser
  • Minifier
  • Grouper

…Et bien sûr : ?

Savoir utiliser le protocole HTTP

  • Codes de réponse
  • Cache
    • If-Modified-Since
    • ETag
  • CDN

Ordonner le chargement

  • D'abord les ressources les plus importantes
    • Mobile first
    • Scripts bloquants
  • Ensuite les ressources secondaires
    • images
  • Rendre asynchrone le moins important
  • “Découper” (chunk) les autres transferts

Améliorer le temps de réponse du serveur

  • Serveur simple : Google PageSpeed
  • Serveurs multiples : Load balancing, cluster…

Accélérer le rendu côté client

  • Une fois les ressources reçues
  • Dépend des capacités de calcul du client

Mais dans tous les cas :

Optimiser le chemin critique du rendu

  • Permettre le rendu progressif (HTML, CSS, JS)
  • Construire le DOM du document
  • Construire le CSSDOM

Optimiser les scripts

  • Prévenir l'inférence de types (cf. ASM.JS)
  • Déclarer / réutiliser les variables
  • Maîtriser les boucles et la récursion
  • Eviter les recalculs
  • Utiliser des bibliothèques optimisées

Mais le plus important…

Corriger les erreurs

  • Redirections
  • 404
  • Effets cascade
  • Ressources multiples
  • …

Références