0
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
Chargement dans... 5
×

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

274

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
274
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
  • Transcript of "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.

    ×