1.  
2. Formations 

---

Améliorer les performances web

1650 €

à 13 KM

OXiane Luxembourg

Suivre

• Formation
• Business
• Internet
• Stratégie
• Technologie
• Programmation
• Data
• Informatique

Objectifs
● Comprendre les enjeux de la Performances des sites Web
● Savoir effectuer des tests et des diagnostics des pages
● Accélérer le chargement des pages
● Fluidifier l’expérience utilisateur
● Mettre en place une politique de surveillance des performances

Contenu

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, lazyevaluate…)
● 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

Bon à savoir

● Type d’action : Acquisition des connaissances
● Moyens de la formation : Formation présentielle – 1 poste par stagiaire – 1 vidéo projecteur – Support de cours fourni à chaque
stagiaire
● Modalités pédagogiques : Exposés – Cas pratiques – Synthèse
● Validation : Exercices de validation – Attestation de stages