Techniques d’accélération des pages Web

Techniques d’accélération des
pages Web
Jean-Pierre VINCENT
Consultant indépendant
Code / Développement
#WebPerf - @theystolemynick
Braincracking.org

• 5 10 13 ans de Web
• PHP, JavaScript, HTML5, CSS
• Ex :
– startups, Yahoo!, houra.fr
• Expert frontend indépendant
• Veilleur :
– braincracking.org
– @theystolemynick
Bonjour, je m’appelle Jean-Pierre

Les 10 14 35 commandements
http://developer.yahoo.com/performance/rules.html
Steve Souders, like a Boss
Performance Web ?

• Yahoo! Best Practices (35 règles)
• Google PageSpeed (31 règles)
• Test Opquast (41 règles)
• En vrai : 500+ pratiques
• Nouveaux navigateurs
• Nouveaux besoins
• Mobile
Comment faire le tri ?

• SEO
– 1 critère de référencement chez
Google
– Métrique : temps « onload »
– Mesurée par les utilisateurs
http://googlewebmastercentral.blogspot.fr/2010/04/using-site-speed-in-web-search-ranking.html
Pourquoi la performance ?

• Un administrateur système
heureux

• Qualité perçue
• Ergonomie
• Réponse à un besoin
• Métrique : premier rendu
$$

Tunnel d’achat :
1s = -7% de
conversion
Combien coûte une seconde ?

Vidéo :
1s =-6% de vue
Akamai 2012

Voyage
4s = -60% de vue

Search
• Bing : 1 s = - 3 % de CA
• Yahoo! : 1 s = + 10 % de
rebond

Mobile
• 1 s = -10% de pages vues
• 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-revenue
http://www.strangeloopnetworks.com/resources/infographics/2012-state-of-mobile-ecommerce-performance/poster/

Comment ne pas rater un chantier Webperf ?

1. Objectifs
2. Que voient les utilisateurs ?
3. Quelles techniques ?
4. Quel suivi ?
Chantier Webperf

Interactivité < 5 s
1. Objectifs

Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
1. Objectifs

Premier rendu < 2 s
Réponse HTML < 1 s
1. Objectifs

Premier rendu < 2 s
Réponse HTML < 1 s
Chargement de la page < 20 s ?
1. Objectifs

Sources : Akamai 2011 et 2012, Degrouptest, 60 millions de consommateurs, ARCEP
• Grand public français :
– IE 7 is dead !
– Arrivée via réseaux mobiles
– Connexions moyennes :
2. Utilisateurs
ADSL Mobiles
Débit 4, 8 Mb/s 2,5 Mb/s
Latence 95 ms 200 ms

• La moyenne n’est pas
représentative
• 25% des utilisateurs ont moins
de 2,5 Mb/s
< 1
Mb/s 1 - 2
Mb/s
2 - 3
Mb/s3 - 4
Mb/s
4 - 5
Mb/s
5-10
Mb/s
> 10
Mb/s
Répartition des débits
(ligne fixe)
2. Utilisateurs

• Connexion réseau à cibler :
• Navigateurs à cibler :
– IE 8
– Safari iOS
– Android 2.3.x et 4.x
2. Utilisateurs
ADSL Mobiles
Débit 2,5 Mb/s 2,5 Mb/s
Latence 110 ms 200 ms
+25% de perte

• Yahoo! Best Practices (35 règles)
• Google PageSpeed (31 règles)
• Test Opquast (41 règles)
• En vrai : 500+ pratiques
Par où commencer ?

Sans débat : configuration serveur
• Configuration du keep-alive
• Activer la compression
• Ressources texte : 80%
KeepAlive On
KeepAliveTimeout 5
Timeout 10

Sans débat : gérer son cache

• Et pourtant :
– 50% des sites oublient
– 30% ont un TTL < 30 jours
Cache

• Sans cache :
– Phases de recette interne
– Environnements de
développement
• Cache agressif :
– Cache utilisateur
– Chaîne de cache réseau
« Vide ton cache »

• Serveur
– eTag: "xxxxxx"
Ou
– Last-Modified: DATE_W3C
• Serveur
– 200 OK
Ou
– 304 Not Modified
• Client
– If-None-Match: "xxxxxx"
Ou
– If-Modified-Since: DATE_W3C
Cache : invalidation standard

• Sert à des cas spéciaux
– Polling
– Revalidation de session
– Environnement de dév.
Cache : invalidation standard
• Génère autant de requêtes

• Maîtrise totale des URL
– HTML
– CSS
– JS
• Processus de compilation
• URL rendues uniques par :
– Numéro de release
– Md5 du fichier
Invalidation des caches longs
• Mise en cache long :
Expires : +1 an
Cache-control : public
Vary : xxx

API Application Cache
• 1 application = 1 pack de
fichiers
• 1 fichier de règles
• 1 API de gestion du cache
• Surtout sur mobiles
Le super cache

Sans débat : moins de requêtes
• La limite de HTTP : la latence
Au pire
• DNS
• + Ouverture TCP
• + Slow Start
• + 1 RTT mininum
= 4 X latence
= 400 ms

Trouver le chemin critique
Chemin critique
1er rendu

Ressources bloquantes :
• Redirections
• Génération de la page
• CSS
• Polices
• JS
Ressources gênantes
• Images
• Iframe
• Objets flash / vidéo
Déblayer le chemin critique

• Redirections :
– Limiter à 1 max
– Jamais côté client
– Surtout sur mobile

Génération de la page:
• Caches serveur
• Flush du head

• Caches serveur
• Flush du head
• Fonctionnalités longues :
XHR

• Caches serveur
• Flush du head
• Fonctionnalités longues : XHR
• Personnalisation :
Server Side Include

• CSS
– Concaténation
– Minification
– Inline ?

• Polices
– Les supprimer ...
– Chargement asynchrone

Le choix des armes
• <script src> en haut
• <script src> en bas
• Inline
• defer
• Asynchrone
Déblayer le chemin critique : JavaScript

• Javascript asynchrone

En anglais
• http://www.perfplanet.com/
• http://developer.yahoo.com/pe
rformance/rules.html
• https://developers.google.com
/speed/docs/best-
practices/rules_intro
• http://www.webpagetest.org/fo
rums
En français
• http://checklists.opquast.com/w
ebperf/
• https://groups.google.com/foru
m/?fromgroups#!forum/perform
ance-web
• @webperf_fr et @WebperfParis
• https://github.com/edas/webper
f-book
• http://braincracking.org
S’auto-former

• http://www.flickr.com/photos/t
hemonnie/2495892146
• http://www.flickr.com/photos/7
6657755@N04/7214596024/in
/photostream/
• http://www.flickr.com/photos/j
ohannes_wl/8364284798/sizes/
l/in/photostream/
Crédits

Techniques d’accélération des pages Web

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (6)

Semelhante a Techniques d’accélération des pages Web

Semelhante a Techniques d’accélération des pages Web (20)

Mais de Microsoft

Mais de Microsoft (20)