accélération des pages web : les bases en exemple
DESCRIPTION
Il y a plusieurs centaines de techniques pour accélérer ses pages côté client, mais à travers ce retour d'expérience nous allons voir qu'en ayant simplement appliqué les bases on a pu diviser les temps d'affichage utilisateur par 5. Présenté à la soirée Webperf de novembre 2013TRANSCRIPT
Les soirées Performance
Auto-organisées
Irrégulières
Ateliers ou conférences
La WebPerf en France
@WebPerfParis
@webperf_fr
Google Group : performance-web
http://www.webperf-france.net/
diigo web performance
Bonjour, je m’appelle Jean-Pierre
l 13 ans de Webl PHP, JavaScript, HTML5, CSSl Ex :
● startups, Yahoo!, houra.fr
l Expert frontend indépendantl Veilleur :
● braincracking.org● @theystolemynick
Performance Web ?
Les 14 premiers commandements
http://developer.yahoo.com/performance/rules.html
Performances Web ?
Performances classiques :– Tenir la charge– Haute disponibilité
Performances Frontend :– Accélérer l'affichage d'une page
Passer des règles aux outils
Règles● Yahoo! Best Practices
(35 règles)● Google PageSpeed (31
règles)● Test Opquast (41 règles)● …● Jusqu'à 400+ pratiques
● Outils● Analyse réseau● Profiling● Bonnes pratiques● Monitoring● RUM● Intégration continue
Combien coûte une seconde ?
Combien coûte une seconde ?
Tunnel d’achat :
1s = -7% de conversion
Tagman, 2012
Combien coûte une seconde ?
Vidéo :
1s = -6% de vue
Akamai 2012
Combien coûte une seconde ?
e-commerce
1 s = - 50 % de conversion
Walmart 2012
Combien coûte une seconde ?
Search
l Bing : 1 s = l - 3 % de CAl Yahoo! : 1 s = l + 10 % de rebond
Études Bing et Google Velocity 2009 : http://velocityconf.com/velocity2009/public/schedule/detail/8523
Combien coûte une seconde ?
Mobile
l 1 s = -10% de pages vues
l Après 4 s : 60% d'abandon
/
http://www.themediabriefing.com/article/2012-10-02/speed-is-a-feature-why-a-slow-mobile-web-experience-means-lost-revenuehttp://www.strangeloopnetworks.com/resources/infographics/2012-state-of-mobile-ecommerce-performance/poster
Chantier Webperf
Retour d'expérience client
Chantier Webperf
● Fixer des objectifs● Mesurer pour l'utilisateur● Coder !● Surveiller
Objectifs
L'utilisateur type (Chine, IE 8)● accède à la fonctionnalité (Focus champs tracking)● en moins de 5 secondes
Les visiteurs distants (Brésil, Australie)● voient la HP (textes et image principale)● en moins de 2 secondes
Objectifs - HP
Objectifs - tracking
Objectifs
Pages trop simples !
Chargement déjà très satisfaisant
JP =>
Mesurer
Mesures de vrais utilisateurs
Temps longs confirmés ! (Cool, j'ai du travail)
Utilisateurs
10 000 Km
6 000 Km
9 600 Km
16 000 Km
6000 Km
Serveurs
marseillais
Utilisateurs
200 ms (H.K.)
280 ms
100 ms
200 ms
380 ms
150 ms
800 ms !
Serveurs
marseillais
Mesure synthétique
● Installation WebPageTest
● Simulation stable● Contention réseau● Navigateurs réels● Environnements de Dev, integ, preprod, prod…
● Le problème devient visible de tous
● Le développement peut commencer
Mesure synthétique
Les solutions universelles
La configuration du serveur HTTP● Configuration du keep-alive
– KeepAlive On
– KeepAliveTimeout 5
– Timeout 10
● Activation de la compression (gzip, deflate)
Les solutions universelles
Gérer le cache client
Le cache utilisateur
● « vide ton cache »Sans cache :
● Phases de recette interne● Environnements de
développement
Cache agressif :● Cache utilisateur● Chaîne de cache réseau
Le cache utilisateur
Comment invalider un cache client ?
Méthode standard :– Header eTag ou Last-Modified
Méthode performante :– Cache long– URL change avec la version du fichier– Maîtrise totale des URL– Processus de compilation
Le cache utilisateur
À surveiller automatiquement
Gains
Sur la page Tracking souvent visitée
Chargement ÷ 5
Les solutions universelles
● Déblayer le chemin critique
WTF ?_ ?
Le serveur a renvoyé la
page
L'utilisateur voit quelque
chose
Le chemin critique
Chemin critique
1er rendu
Le chemin critique
● Redirections● CSS● Polices● JavaScript
Le chemin critique
● Redirections● 1 max● Jamais côté client● Surtout sur mobile
Le chemin critique
CSS
● Regrouper (2 max)● Minifier
Le chemin critique
JavaScript
● Minifier● Regrouper (ou pas)● 5 manières de le
charger
Le chemin critique
Polices
● Limiter en poids● Limiter en nombre● Asynchrones
Le chemin critique
Beaucoup de stratégies possibles.
Globalement, cibler:
HTML + CSS + JS + Fonts
En 6 requêtes MAX
Le chemin critique
Résultat HP, après « Bundling »
● 1er Rendu : - 4 secondes● Onload : - 5 secondes
Surveiller
Maintenir la performance dans le temps
WPT Monitor
https://github.com/jpvincent/WPT-server
Outils d'analyse
Pour les enfants :
ySlow PageSpeed
Outils d'analyse
Pour les guerriers :
WebPageTest
Conclusion
● Il y a plusieurs centaines de techniques.● Les techniques principales font déjà gagner
beaucoup.● S'équiper en outils pour les autres.● Avoir des process pour maintenir la qualité.
Questions ?
Viens jouer :● Braincracking.org● @theystolemynick
S'auto-former
En anglais En français
l http://www.perfplanet.com/l http
://developer.yahoo.com/performance/rules.html
l https://developers.google.com/speed/docs/best-practices/rules_intro
l http://www.webpagetest.org/forums
l http://checklists.opquast.com/webperf/
l https://groups.google.com/forum/?fromgroups#!forum/performance-web
l @webperf_fr l et l @WebperfParisl https://github.com/edas/webperf-bookl http://braincracking.org
Crédits
l http://www.flickr.com/photos/themonnie/2495892146l http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream/l http://www.flickr.com/photos/johannes_wl/8364284798/sizes/l/in/photostream/