techniques d’accélération des pages web
TRANSCRIPT
![Page 1: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/1.jpg)
Techniques d’accélération des
pages WebJean-Pierre VINCENT
Consultant indépendant
Code / Développement
#WebPerf - @theystolemynick
Braincracking.org
![Page 2: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/2.jpg)
• 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
![Page 3: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/3.jpg)
Les 10 14 35 commandements
http://developer.yahoo.com/performance/rules.html
Steve Souders, like a Boss
Performance Web ?
![Page 4: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/4.jpg)
• 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 ?
![Page 5: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/5.jpg)
• SEO– 1 critère de référencement chez
– 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 ?
![Page 6: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/6.jpg)
• Un administrateur système
heureux
Pourquoi la performance ?
![Page 7: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/7.jpg)
• Qualité perçue
• Ergonomie
• Réponse à un besoin
• Métrique : premier rendu
$$
Pourquoi la performance ?
![Page 8: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/8.jpg)
Tunnel d’achat :
1s = -7% de
conversion
Combien coûte une seconde ?
![Page 9: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/9.jpg)
Vidéo :
1s =-6% de vue
Akamai 2012
Combien coûte une seconde ?
![Page 10: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/10.jpg)
Voyage
4s = -60% de vue
Combien coûte une seconde ?
![Page 11: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/11.jpg)
Search
• Bing : 1 s = - 3 % de CA
• Yahoo! : 1 s = + 10 % de
rebond
Combien coûte une seconde ?
![Page 12: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/12.jpg)
Combien coûte une seconde ?
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/
![Page 13: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/13.jpg)
![Page 14: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/14.jpg)
Comment ne pas rater un chantier Webperf ?
![Page 15: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/15.jpg)
1. Objectifs
2. Que voient les utilisateurs ?
3. Quelles techniques ?
4. Quel suivi ?
Chantier Webperf
![Page 16: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/16.jpg)
Interactivité < 5 s
1. Objectifs
![Page 17: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/17.jpg)
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
1. Objectifs
![Page 18: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/18.jpg)
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Réponse HTML < 1 s
1. Objectifs
![Page 19: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/19.jpg)
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Réponse HTML < 1 s
Chargement de la page < 20 s ?
1. Objectifs
![Page 20: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/20.jpg)
2. Utilisateurs
![Page 21: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/21.jpg)
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
![Page 22: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/22.jpg)
• 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
![Page 23: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/23.jpg)
• 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
![Page 24: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/24.jpg)
3. LES TECHNIQUES
![Page 25: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/25.jpg)
• Yahoo! Best Practices (35 règles)
• Google PageSpeed (31 règles)
• Test Opquast (41 règles)
• En vrai : 500+ pratiques
Par où commencer ?
![Page 26: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/26.jpg)
Sans débat : configuration serveur
• Configuration du keep-alive
• Activer la compression
• Ressources texte : 80%
KeepAlive On
KeepAliveTimeout 5
Timeout 10
![Page 27: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/27.jpg)
Sans débat : gérer son cache
![Page 28: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/28.jpg)
• Et pourtant :
– 50% des sites oublient
– 30% ont un TTL < 30 jours
Cache
![Page 29: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/29.jpg)
• Sans cache :
– Phases de recette interne
– Environnements de
développement
• Cache agressif :
– Cache utilisateur
– Chaîne de cache réseau
« Vide ton cache »
![Page 30: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/30.jpg)
• 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
![Page 31: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/31.jpg)
• Sert à des cas spéciaux
– Polling
– Revalidation de session
– Environnement de dév.
Cache : invalidation standard
• Génère autant de requêtes
![Page 32: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/32.jpg)
• 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 anCache-control : publicVary : xxx
![Page 33: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/33.jpg)
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
![Page 34: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/34.jpg)
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
![Page 35: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/35.jpg)
Trouver le chemin critique
Chemin critique
1er rendu
![Page 36: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/36.jpg)
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
![Page 37: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/37.jpg)
• Redirections :– Limiter à 1 max
– Jamais côté client
– Surtout sur mobile
Déblayer le chemin critique
![Page 38: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/38.jpg)
Génération de la page:
• Caches serveur
• Flush du head
Déblayer le chemin critique
![Page 39: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/39.jpg)
Génération de la page:
• Caches serveur
• Flush du head
• Fonctionnalités longues :
XHR
Déblayer le chemin critique
![Page 40: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/40.jpg)
Génération de la page:
• Caches serveur
• Flush du head
• Fonctionnalités longues : XHR
• Personnalisation :
Server Side Include
Déblayer le chemin critique
![Page 41: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/41.jpg)
• CSS
– Concaténation
– Minification
– Inline ?
Déblayer le chemin critique
![Page 42: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/42.jpg)
• Polices
– Les supprimer ...
– Chargement asynchrone
Déblayer le chemin critique
![Page 43: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/43.jpg)
Le choix des armes
• <script src> en haut
• <script src> en bas
• Inline
• defer
• Asynchrone
Déblayer le chemin critique : JavaScript
![Page 44: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/44.jpg)
<script src> en haut
• Si :
– Petit
– concaténé
– Sans concurrence
Déblayer le chemin critique : JavaScript
![Page 45: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/45.jpg)
<script src> en bas
• Si :
– Page rapide
– Gestion des dépendances
– Pas de document.write()
– Pas de iOS
Déblayer le chemin critique : JavaScript
![Page 46: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/46.jpg)
<script defer>
– Retardé par le onload
Déblayer le chemin critique : JavaScript
![Page 47: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/47.jpg)
• Javascript asynchrone
Déblayer le chemin critique : JavaScript
![Page 48: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/48.jpg)
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/webperf/
• https://groups.google.com/forum/?fromgroups#!forum/performance-web
• @webperf_fr et @WebperfParis
• https://github.com/edas/webperf-book
• http://braincracking.org
S’auto-former
![Page 49: Techniques d’accélération des pages Web](https://reader033.vdocuments.mx/reader033/viewer/2022052912/55a19b661a28abec748b4857/html5/thumbnails/49.jpg)
• 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