Techniques d’accélération despages WebJean-Pierre VINCENTConsultant indépendantCode / Développement#WebPerf - @theystolemy...
• 5 10 13 ans de Web• PHP, JavaScript, HTML5, CSS• Ex :– startups, Yahoo!, houra.fr• Expert frontend indépendant• Veilleur...
Les 10 14 35 commandementshttp://developer.yahoo.com/performance/rules.htmlSteve Souders, like a BossPerformance Web ?
• Yahoo! Best Practices (35 règles)• Google PageSpeed (31 règles)• Test Opquast (41 règles)• En vrai : 500+ pratiques• Nou...
• SEO– 1 critère de référencement chezGoogle– Métrique : temps « onload »– Mesurée par les utilisateurshttp://googlewebmas...
• Un administrateur systèmeheureuxPourquoi la performance ?
• Qualité perçue• Ergonomie• Réponse à un besoin• Métrique : premier rendu$$Pourquoi la performance ?
Tunnel d’achat :1s = -7% deconversionCombien coûte une seconde ?
Vidéo :1s =-6% de vueAkamai 2012Combien coûte une seconde ?
Voyage4s = -60% de vueCombien coûte une seconde ?
Search• Bing : 1 s = - 3 % de CA• Yahoo! : 1 s = + 10 % derebondCombien coûte une seconde ?
Combien coûte une seconde ?Mobile• 1 s = -10% de pages vues• Après 4 s : 60% dabandonhttp://www.themediabriefing.com/artic...
Comment ne pas rater un chantier Webperf ?
1. Objectifs2. Que voient les utilisateurs ?3. Quelles techniques ?4. Quel suivi ?Chantier Webperf
Interactivité < 5 s1. Objectifs
Interactivité avec la fonctionnalité < 5 sPremier rendu < 2 s1. Objectifs
Interactivité avec la fonctionnalité < 5 sPremier rendu < 2 sRéponse HTML < 1 s1. Objectifs
Interactivité avec la fonctionnalité < 5 sPremier rendu < 2 sRéponse HTML < 1 sChargement de la page < 20 s ?1. Objectifs
2. Utilisateurs
Sources : Akamai 2011 et 2012, Degrouptest, 60 millions de consommateurs, ARCEP• Grand public français :– IE 7 is dead !– ...
• La moyenne n’est pasreprésentative• 25% des utilisateurs ont moinsde 2,5 Mb/s< 1Mb/s 1 - 2Mb/s2 - 3Mb/s3 - 4Mb/s4 - 5Mb/...
• Connexion réseau à cibler :• Navigateurs à cibler :– IE 8– Safari iOS– Android 2.3.x et 4.x2. UtilisateursADSL MobilesDé...
3. LES TECHNIQUES
• Yahoo! Best Practices (35 règles)• Google PageSpeed (31 règles)• Test Opquast (41 règles)• En vrai : 500+ pratiquesPar o...
Sans débat : configuration serveur• Configuration du keep-alive• Activer la compression• Ressources texte : 80%KeepAlive O...
Sans débat : gérer son cache
• Et pourtant :– 50% des sites oublient– 30% ont un TTL < 30 joursCache
• Sans cache :– Phases de recette interne– Environnements dedéveloppement• Cache agressif :– Cache utilisateur– Chaîne de ...
• Serveur– eTag: "xxxxxx"Ou– Last-Modified: DATE_W3C• Serveur– 200 OKOu– 304 Not Modified• Client– If-None-Match: "xxxxxx"...
• Sert à des cas spéciaux– Polling– Revalidation de session– Environnement de dév.Cache : invalidation standard• Génère au...
• Maîtrise totale des URL– HTML– CSS– JS• Processus de compilation• URL rendues uniques par :– Numéro de release– Md5 du f...
API Application Cache• 1 application = 1 pack defichiers• 1 fichier de règles• 1 API de gestion du cache• Surtout sur mobi...
Sans débat : moins de requêtes• La limite de HTTP : la latenceAu pire• DNS• + Ouverture TCP• + Slow Start• + 1 RTT mininum...
Trouver le chemin critiqueChemin critique1er rendu
Ressources bloquantes :• Redirections• Génération de la page• CSS• Polices• JSRessources gênantes• Images• Iframe• Objets ...
• Redirections :– Limiter à 1 max– Jamais côté client– Surtout sur mobileDéblayer le chemin critique
Génération de la page:• Caches serveur• Flush du headDéblayer le chemin critique
Génération de la page:• Caches serveur• Flush du head• Fonctionnalités longues :XHRDéblayer le chemin critique
Génération de la page:• Caches serveur• Flush du head• Fonctionnalités longues : XHR• Personnalisation :Server Side Includ...
• CSS– Concaténation– Minification– Inline ?Déblayer le chemin critique
• Polices– Les supprimer ...– Chargement asynchroneDéblayer le chemin critique
Le choix des armes• <script src> en haut• <script src> en bas• Inline• defer• AsynchroneDéblayer le chemin critique : Java...
<script src> en haut• Si :– Petit– concaténé– Sans concurrenceDéblayer le chemin critique : JavaScript
<script src> en bas• Si :– Page rapide– Gestion des dépendances– Pas de document.write()– Pas de iOSDéblayer le chemin cri...
<script defer>– Retardé par le onloadDéblayer le chemin critique : JavaScript
• Javascript asynchroneDéblayer le chemin critique : JavaScript
En anglais• http://www.perfplanet.com/• http://developer.yahoo.com/performance/rules.html• https://developers.google.com/s...
• http://www.flickr.com/photos/themonnie/2495892146• http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream/•...
Techniques d’accélération des pages Web
Prochain SlideShare
Loading in …5
×

Techniques d&rsquo;accélération des pages Web

317
-1

Published on

Vos utilisateurs, votre consultant référencement et même votre ergonome devraient déjà vous poursuivre pour accélérer l'affichage de vos pages. Si ça n'est pas le cas, c'est à l'équipe front de l'introduire. Nous allons voir les techniques universelles dont disposent les développeurs Web ou les exploitants pour accélérer l'affichage des pages Web, y compris sur les mobiles. C'est surtout côté code front que se passe la course à l'affichage de pixel, mais nous discuterons également des choses à prendre en compte côté backend et machines. Nous passerons également en revue les arguments à avancer pour faire prendre conscience des enjeux de qualité, d'ergonomie et de finances associés à des sites rapides.

0 commentaires
0 mentions J'aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Be the first to like this

Aucun téléchargement
Vues
Total des vues
317
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
0
Actions
Partages
0
Téléchargements
14
Commentaires
0
J'aime
0
Ajouts 0
No embeds

No notes for slide
  • Intro code / dev
  • Techniques d&rsquo;accélération des pages Web

    1. 1. Techniques d’accélération despages WebJean-Pierre VINCENTConsultant indépendantCode / Développement#WebPerf - @theystolemynickBraincracking.org
    2. 2. • 5 10 13 ans de Web• PHP, JavaScript, HTML5, CSS• Ex :– startups, Yahoo!, houra.fr• Expert frontend indépendant• Veilleur :– braincracking.org– @theystolemynickBonjour, je m’appelle Jean-Pierre
    3. 3. Les 10 14 35 commandementshttp://developer.yahoo.com/performance/rules.htmlSteve Souders, like a BossPerformance Web ?
    4. 4. • Yahoo! Best Practices (35 règles)• Google PageSpeed (31 règles)• Test Opquast (41 règles)• En vrai : 500+ pratiques• Nouveaux navigateurs• Nouveaux besoins• MobileComment faire le tri ?
    5. 5. • SEO– 1 critère de référencement chezGoogle– Métrique : temps « onload »– Mesurée par les utilisateurshttp://googlewebmastercentral.blogspot.fr/2010/04/using-site-speed-in-web-search-ranking.htmlPourquoi la performance ?
    6. 6. • Un administrateur systèmeheureuxPourquoi la performance ?
    7. 7. • Qualité perçue• Ergonomie• Réponse à un besoin• Métrique : premier rendu$$Pourquoi la performance ?
    8. 8. Tunnel d’achat :1s = -7% deconversionCombien coûte une seconde ?
    9. 9. Vidéo :1s =-6% de vueAkamai 2012Combien coûte une seconde ?
    10. 10. Voyage4s = -60% de vueCombien coûte une seconde ?
    11. 11. Search• Bing : 1 s = - 3 % de CA• Yahoo! : 1 s = + 10 % derebondCombien coûte une seconde ?
    12. 12. Combien coûte une seconde ?Mobile• 1 s = -10% de pages vues• Après 4 s : 60% dabandonhttp://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/
    13. 13. Comment ne pas rater un chantier Webperf ?
    14. 14. 1. Objectifs2. Que voient les utilisateurs ?3. Quelles techniques ?4. Quel suivi ?Chantier Webperf
    15. 15. Interactivité < 5 s1. Objectifs
    16. 16. Interactivité avec la fonctionnalité < 5 sPremier rendu < 2 s1. Objectifs
    17. 17. Interactivité avec la fonctionnalité < 5 sPremier rendu < 2 sRéponse HTML < 1 s1. Objectifs
    18. 18. Interactivité avec la fonctionnalité < 5 sPremier rendu < 2 sRéponse HTML < 1 sChargement de la page < 20 s ?1. Objectifs
    19. 19. 2. Utilisateurs
    20. 20. 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. UtilisateursADSL MobilesDébit 4, 8 Mb/s 2,5 Mb/sLatence 95 ms 200 ms
    21. 21. • La moyenne n’est pasreprésentative• 25% des utilisateurs ont moinsde 2,5 Mb/s< 1Mb/s 1 - 2Mb/s2 - 3Mb/s3 - 4Mb/s4 - 5Mb/s5-10Mb/s> 10Mb/sRépartition des débits(ligne fixe)2. Utilisateurs
    22. 22. • Connexion réseau à cibler :• Navigateurs à cibler :– IE 8– Safari iOS– Android 2.3.x et 4.x2. UtilisateursADSL MobilesDébit 2,5 Mb/s 2,5 Mb/sLatence 110 ms 200 ms+25% de perte
    23. 23. 3. LES TECHNIQUES
    24. 24. • Yahoo! Best Practices (35 règles)• Google PageSpeed (31 règles)• Test Opquast (41 règles)• En vrai : 500+ pratiquesPar où commencer ?
    25. 25. Sans débat : configuration serveur• Configuration du keep-alive• Activer la compression• Ressources texte : 80%KeepAlive OnKeepAliveTimeout 5Timeout 10
    26. 26. Sans débat : gérer son cache
    27. 27. • Et pourtant :– 50% des sites oublient– 30% ont un TTL < 30 joursCache
    28. 28. • Sans cache :– Phases de recette interne– Environnements dedéveloppement• Cache agressif :– Cache utilisateur– Chaîne de cache réseau« Vide ton cache »
    29. 29. • Serveur– eTag: "xxxxxx"Ou– Last-Modified: DATE_W3C• Serveur– 200 OKOu– 304 Not Modified• Client– If-None-Match: "xxxxxx"Ou– If-Modified-Since: DATE_W3CCache : invalidation standard
    30. 30. • Sert à des cas spéciaux– Polling– Revalidation de session– Environnement de dév.Cache : invalidation standard• Génère autant de requêtes
    31. 31. • Maîtrise totale des URL– HTML– CSS– JS• Processus de compilation• URL rendues uniques par :– Numéro de release– Md5 du fichierInvalidation des caches longs• Mise en cache long :Expires : +1 anCache-control : publicVary : xxx
    32. 32. API Application Cache• 1 application = 1 pack defichiers• 1 fichier de règles• 1 API de gestion du cache• Surtout sur mobilesLe super cache
    33. 33. Sans débat : moins de requêtes• La limite de HTTP : la latenceAu pire• DNS• + Ouverture TCP• + Slow Start• + 1 RTT mininum= 4 X latence= 400 ms
    34. 34. Trouver le chemin critiqueChemin critique1er rendu
    35. 35. Ressources bloquantes :• Redirections• Génération de la page• CSS• Polices• JSRessources gênantes• Images• Iframe• Objets flash / vidéoDéblayer le chemin critique
    36. 36. • Redirections :– Limiter à 1 max– Jamais côté client– Surtout sur mobileDéblayer le chemin critique
    37. 37. Génération de la page:• Caches serveur• Flush du headDéblayer le chemin critique
    38. 38. Génération de la page:• Caches serveur• Flush du head• Fonctionnalités longues :XHRDéblayer le chemin critique
    39. 39. Génération de la page:• Caches serveur• Flush du head• Fonctionnalités longues : XHR• Personnalisation :Server Side IncludeDéblayer le chemin critique
    40. 40. • CSS– Concaténation– Minification– Inline ?Déblayer le chemin critique
    41. 41. • Polices– Les supprimer ...– Chargement asynchroneDéblayer le chemin critique
    42. 42. Le choix des armes• <script src> en haut• <script src> en bas• Inline• defer• AsynchroneDéblayer le chemin critique : JavaScript
    43. 43. <script src> en haut• Si :– Petit– concaténé– Sans concurrenceDéblayer le chemin critique : JavaScript
    44. 44. <script src> en bas• Si :– Page rapide– Gestion des dépendances– Pas de document.write()– Pas de iOSDéblayer le chemin critique : JavaScript
    45. 45. <script defer>– Retardé par le onloadDéblayer le chemin critique : JavaScript
    46. 46. • Javascript asynchroneDéblayer le chemin critique : JavaScript
    47. 47. En anglais• http://www.perfplanet.com/• http://developer.yahoo.com/performance/rules.html• https://developers.google.com/speed/docs/best-practices/rules_intro• http://www.webpagetest.org/forumsEn 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.orgS’auto-former
    48. 48. • http://www.flickr.com/photos/themonnie/2495892146• http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream/• http://www.flickr.com/photos/johannes_wl/8364284798/sizes/l/in/photostream/Crédits
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×