(+33)1 55 60 76 72

Améliorer les performances web

Accueil » Formations » Front / Mobile » Améliorer les performances web
1650 € HT 3 jours DW-PERF

Mettre en place une politique de surveillance des performances, et réaliser des tests et diagnostics

Programme

Introduction

Performances et Business

  • Seulement un problème technique ?
  • La relation temps d’affichage / chiffre d’affaire
  • Référencement : la vision de Google
  • Ergonomie : la performance perçue par l’utilisateur

Le futur

  • La 4G et la fibre
  • Les besoins des sites

Les métriques, les outils

  • Pourquoi le temps de chargement total ne suffit pas
  • Comprendre Time To First Byte, Time To Render, Time to Interaction, $.ready()
  • Outils de diagnostic et de monitoring gratuits

TP

  • Clone des sites du client en local
  • Diagnostiquer avec WebPageTest, programmer des tests

Backend ou Frontend : où passe le temps ?

  • Les checklists ySlow, PageSpeed et Opquast
  • Faire du profiling côté client, sur tous les navigateurs
  • Détecter le danger des widgets tiers (Facebook, Google+, Twitter …)
  • Que voient vos utilisateurs, avec le Real User Monitoring
  • Utiliser Google Analytics, Boomerang JS, la Navigation API
  • Outils commerciaux

Sentir et comprendre les limites de HTTP

  • Les problèmes de HTTP 1.1 et TCP
  • Débit et latence : quelle influence ?
  • Changer de protocole ? HTTP2 et SPDY

Comment marche un navigateur ?

  • Quels OS / navigateurs tester ?
  • Parallélisation, pipelining, Keep-Alive

TP configuration de serveur:

  • Keep-Alive
  • gzip

Le piège de la technique du domain-sharding

Outils de R&D : Browserscope et Cuzillion

Le chemin critique, les ressources bloquantes

  • CSS et JavaScript : que faire ?
  • TP : les actions sur les fichiers CSS et JavaScript
  • TP : action de base sur les polices

Maîtriser le cache

  • TP : activation du cache
  • Les problèmes communs ou le syndrome du « Vide ton cache »
  • Invalidation standard (eTag et autre)
  • Maîtriser le cache des utilisateurs
  • TP : Implémentation d’un système efficace de cache

Le cache client ultime : HTML5 offline

  • Principe
  • API
  • Limites

Les solutions de cache serveur

  • Les solutions de cache serveur
  • TP : La technique du flush serveur
  • La stratégie de la page semi dynamique
  • Comment tricher avec les délais longs côté serveur
  • L’exemple de Facebook

Savoir charger JavaScript

  • Chargement en haut de page
  • Chargement en milieu de page
  • Chargement en bas de page
  • Les attributs natifs async et defer
  • Le chargement asynchrone, ses librairies
  • Les stratégies de chargement

TP : Chargement JS par modules

  • Autres méthodes de chargement (XHR, LocalStorage, lazy-evaluate…)
  • Le problème des publicités

Surveiller les performances

  • Exemple d’installation de WebPageTest Monitor
  • TP: programmer des tests
  • Les compléments en open-source : Graphite et compagnie
  • La connexion type des utilisateurs ?
  • TP : scénarios complexes de navigation

Les images

  • Utilisation de CSS3 et des caractères unicode
  • Embarquer le contenu d’une image en CSS ou HTML
  • La technique du spriting
  • Le chargement Just In Time
  • La compression (manuelle et automatique)
  • TP : se passer d’images sur mobile. Tester les outils de compression

Le code des tiers

  • Comprendre l’impact bloquant de Google+, Facebook, Twitter
  • Le problème des publicités, trackers et widget
  • La solution : l’asynchrone
  • TP: inclure sans risque du code tiers
  • L’outil : SPOF-O-MATIC

Interfaces fluides, ce qui ralentit une page

  • outil pour surveiller, symptômes à observer
  • expérimentation avec des vieux navigateurs ou des modernes
  • manipulation off-DOM
  • setTimeout(0), le sauveur méconnu
  • délégation d’événements
  • Les outils de profiling côté client

Les techniques modernes avec HTML5

  • WebSocket et Server Sent Event
  • localStorage
  • Les WebWorkers
  • Prefetch, prerender, next

Les petites choses qui font mal

  • CSS @import
  • les filtres CSS
  • les dimensions des images
  • favicon
  • les 404
  • les redirections
  • expressions CSS
  • le charset
  • les scripts .htc

Solutions avancées

  • Faut-il se payer un CDN ?
  • domain sharding : pour quelles situations ?
  • Stratégies de chargement du contenu
  • Organiser son CSS en modules ?
  • L’influence des iframes
  • Construire un cache agressif sur mobile

Analyses de sites

Conclusion

Tour de table des participants et critiques sur la formation reçue.