accélération des pages web : les bases en exemple

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/