Techniques d’accélération des pages Web
Prochain SlideShare
Loading in...5
×

Vous aimez ? Partagez donc ce contenu avec votre réseau

Partager

Techniques d’accélération des pages Web

  • 483 vues
Uploaded 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......

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.

  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
    Be the first to comment
    Be the first to like this
No Downloads

Vues

Total des vues
483
Sur Slideshare
483
From Embeds
0
Nombre d'ajouts
0

Actions

Partages
Téléchargements
13
Commentaires
0
J'aime
0

Ajouts 0

No embeds

Signaler un contenu

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
    No notes for slide
  • Intro code / dev

Transcript

  • 1. Techniques d’accélération despages WebJean-Pierre VINCENTConsultant indépendantCode / Développement#WebPerf - @theystolemynickBraincracking.org
  • 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. Les 10 14 35 commandementshttp://developer.yahoo.com/performance/rules.htmlSteve Souders, like a BossPerformance Web ?
  • 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. • 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. • Un administrateur systèmeheureuxPourquoi la performance ?
  • 7. • Qualité perçue• Ergonomie• Réponse à un besoin• Métrique : premier rendu$$Pourquoi la performance ?
  • 8. Tunnel d’achat :1s = -7% deconversionCombien coûte une seconde ?
  • 9. Vidéo :1s =-6% de vueAkamai 2012Combien coûte une seconde ?
  • 10. Voyage4s = -60% de vueCombien coûte une seconde ?
  • 11. Search• Bing : 1 s = - 3 % de CA• Yahoo! : 1 s = + 10 % derebondCombien coûte une seconde ?
  • 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. Comment ne pas rater un chantier Webperf ?
  • 14. 1. Objectifs2. Que voient les utilisateurs ?3. Quelles techniques ?4. Quel suivi ?Chantier Webperf
  • 15. Interactivité < 5 s1. Objectifs
  • 16. Interactivité avec la fonctionnalité < 5 sPremier rendu < 2 s1. Objectifs
  • 17. Interactivité avec la fonctionnalité < 5 sPremier rendu < 2 sRéponse HTML < 1 s1. Objectifs
  • 18. Interactivité avec la fonctionnalité < 5 sPremier rendu < 2 sRéponse HTML < 1 sChargement de la page < 20 s ?1. Objectifs
  • 19. 2. Utilisateurs
  • 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. • 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. • 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. 3. LES TECHNIQUES
  • 24. • Yahoo! Best Practices (35 règles)• Google PageSpeed (31 règles)• Test Opquast (41 règles)• En vrai : 500+ pratiquesPar où commencer ?
  • 25. Sans débat : configuration serveur• Configuration du keep-alive• Activer la compression• Ressources texte : 80%KeepAlive OnKeepAliveTimeout 5Timeout 10
  • 26. Sans débat : gérer son cache
  • 27. • Et pourtant :– 50% des sites oublient– 30% ont un TTL < 30 joursCache
  • 28. • Sans cache :– Phases de recette interne– Environnements dedéveloppement• Cache agressif :– Cache utilisateur– Chaîne de cache réseau« Vide ton cache »
  • 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. • Sert à des cas spéciaux– Polling– Revalidation de session– Environnement de dév.Cache : invalidation standard• Génère autant de requêtes
  • 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. 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. 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. Trouver le chemin critiqueChemin critique1er rendu
  • 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. • Redirections :– Limiter à 1 max– Jamais côté client– Surtout sur mobileDéblayer le chemin critique
  • 37. Génération de la page:• Caches serveur• Flush du headDéblayer le chemin critique
  • 38. Génération de la page:• Caches serveur• Flush du head• Fonctionnalités longues :XHRDéblayer le chemin critique
  • 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. • CSS– Concaténation– Minification– Inline ?Déblayer le chemin critique
  • 41. • Polices– Les supprimer ...– Chargement asynchroneDéblayer le chemin critique
  • 42. Le choix des armes• <script src> en haut• <script src> en bas• Inline• defer• AsynchroneDéblayer le chemin critique : JavaScript
  • 43. <script src> en haut• Si :– Petit– concaténé– Sans concurrenceDéblayer le chemin critique : JavaScript
  • 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. <script defer>– Retardé par le onloadDéblayer le chemin critique : JavaScript
  • 46. • Javascript asynchroneDéblayer le chemin critique : JavaScript
  • 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. • 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