Techniques d'accélération des pages web

2,452 views
2,289 views

Published on

2 heures de présentation sur les techniques de performance Web, leurs limites et la raison de le faire

Published in: Technology
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total views
2,452
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
33
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Techniques d'accélération des pages web

  1. 1. Techniques d’accélération des pages Web Jean-Pierre VINCENT Consultant indépendant #WebPerf - @theystolemynick Braincracking.org
  2. 2. Bonjour, je m’appelle Jean-Pierre ● 5 10 13 ans de Web ● PHP, JavaScript, HTML5, CSS ● Ex : – startups, Yahoo!, houra.fr ● Expert frontend indépendant ● Veilleur : – braincracking.org – @theystolemynick
  3. 3. Performance Web ? Les 10 14 35 commandements http://developer.yahoo.com/performance/rules.html
  4. 4. Comment faire le tri ?● Yahoo! Best Practices (35 ● Nouveaux navigateurs ● Nouveaux besoins règles) ● Mobile● Google PageSpeed (31 règles)● Test Opquast (41 règles)● En vrai : 500+ pratiques
  5. 5. Pourquoi la performance ? ● SEO – 1 critère de référencement chez Google – Métrique : temps « onload » – Mesurée par les utilisateurshttp://googlewebmastercentral.blogspot.fr/2010/04/using-site-speed-in-web-search-ranking.html
  6. 6. Pourquoi la performance ? ● Un administrateur système heureux
  7. 7. Pourquoi la performance ? ● Qualité perçue $$ ● Ergonomie ● Réponse à un besoin ● Métrique : premier rendu
  8. 8. Combien coûte une seconde ?
  9. 9. Combien coûte une seconde ?Tunnel d’achat : 1s = -7% de conversion
  10. 10. Combien coûte une seconde ? Vidéo :1s =-6% de vue Akamai 2012
  11. 11. Combien coûte une seconde ? Voyage 4s = -60% de vue
  12. 12. Combien coûte une seconde ? Search● Bing : 1 s = - 3 % de CA● Yahoo! : 1 s = + 10 % de rebond
  13. 13. 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 /
  14. 14. Chantier Webperf Comment ne pas rater un chantier Webperf ?
  15. 15. Chantier Webperf● Objectifs● Que voient les utilisateurs ?● Quelles techniques ?● Quel suivi ?
  16. 16. ObjectifsInteractivité avec la fonctionnalité <5s
  17. 17. ObjectifsInteractivité avec la fonctionnalité <5sPremier rendu <2s
  18. 18. ObjectifsInteractivité avec la fonctionnalité <5sPremier rendu <2sRéponse HTML <1s
  19. 19. ObjectifsInteractivité avec la fonctionnalité <5sPremier rendu <2sRéponse HTML <1sChargement de la page < 20 s ?
  20. 20. Les utilisateurs ● Grand public français : ● IE 7 is dead ! ● Arrivée via réseaux mobiles ● Connexions moyennes : ADSL Mobiles Débit 4, 8 Mb/s 2,5 Mb/s Latence 95 ms 200 ms
  21. 21. Les utilisateurs Répartition des débits (ligne fixe)• La moyenne n’est pasreprésentative 5-10 Mb/s > 10 Mb/s < 1 Mb/s 1 - 2 Mb/s● 25% des utilisateurs ont moins de 2,5 Mb/s 4 - 5 Mb/s 2 - 3 Mb/s 3 - 4 Mb/s
  22. 22. Les utilisateursConnexion réseau à cibler : ADSL Mobiles Débit 2,5 Mb/s 2,5 Mb/s Latence 110 ms 200 ms +25% de perteNavigateurs à cibler :IE 8Safari iOSAndroid 2.3.x et 4.x
  23. 23. Les techniques Par où commencer ? Yahoo! Best Practices (35 règles) Google PageSpeed (31 règles) Test Opquast (41 règles) En vrai : 500+ pratiques
  24. 24. Configuration serveur 1. Configuration du keep-alive : KeepAlive On KeepAliveTimeout 5 Timeout 10 2. Activer la compression
  25. 25. Gérer son cache →
  26. 26. Gérer son cache Efficace mais : 50% des sites oublient 30% ont un TTL < 30 jours
  27. 27. Gérer son cache« Vide ton cache » Sans cache : • Phases de recette interne • Environnements de développement Cache agressif : • Cache utilisateur • Chaîne de cache réseau
  28. 28. Gérer son cacheCache : invalidation standard● Serveur eTag: "xxxxxx" Ou Last-Modified: DATE_W3C • Client If-None-Match: "xxxxxx" Ou If-Modified-Since: DATE_W3C• Serveur 200 OK Ou 304 Not Modified
  29. 29. Gérer son cacheCache : invalidation standardSert à des cas spéciaux • Polling • Revalidation de session • Environnement de dév.
  30. 30. Gérer son cacheInvalidation des caches longs ● Maîtrise totale des URL Mise en cache long : ● HTML ● CSS Expires : +1 an ● JS Cache-control :  ● Processus de compilation public ● URL rendues uniques par : Vary : xxx ● Numéro de release ● Md5 du fichier
  31. 31. Gérer son cacheLe super cacheAPI Application Cache● 1 application = 1 pack de fichiers● 1 fichier de règles● 1 API de gestion du cache● Surtout sur mobiles
  32. 32. Le chemin critiqueTrouver le chemin critique Chemin critique 1er rendu
  33. 33. Le chemin critiqueCôté clientRessources bloquantes : Ressources gênantes :● Redirections ● Images● Génération de la page ● Iframe● CSS ● Objets flash / vidéo● Polices● JS
  34. 34. Le chemin critiqueRedirections ● Limiter à 1 max ● Jamais côté client ● Surtout sur mobile
  35. 35. Le chemin critique ● Moyens : ● Cache serveur ● Flush() ● Page dynamiques et XHR ● Parallélisation (Big Pipe de FB)
  36. 36. Pages statiquesCache serveur ● Fichiers plats ● Mécanismes des CMS ● memcache ● Varnish ● CDN…Paramétrage du temps de cacheContenu personnalisé
  37. 37. Technique du Flush()● Envoyer le <head> au plus tôt
  38. 38. Pages semi-dynamiques ● Cache sur les parties statiques ● Envoyer ASAP ● XHR ou SSI pour les parties dynamiques ● Ne pas oublier linterface Référencement
  39. 39. Le chemin critiqueInclusion des parties dynamiques● Personnalisation : Server Side Include
  40. 40. Pages semi-dynamiques
  41. 41. ExtrêmesFacebook Big Pipe
  42. 42. Le chemin critiqueDéblayer le chemin critique ● CSS ● Concaténation ● Minification ● Inline ?
  43. 43. Le chemin critique Polices● Les supprimer …● Les valider : ● poids, ● utilisée ● compatibilité● Chargement asynchrone
  44. 44. SPOFDépendances à des serveurs tiers qui peuventbloquer le renduUsual suspect :●http://platform.twitter.com/widgets.js●https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/j query.min.js●http://html5shiv.googlecode.com/svn/trunk/html5.js
  45. 45. SPOF-O-Matic Teste la fragilité aux ralentissements des serveurs tiers démo
  46. 46. Pause ?
  47. 47. Inclure JavaScriptLe choix des armes ● <script src> en haut ● <script src> en bas ● Inline ● defer ● Asynchrone
  48. 48. Inclure JavaScript<script src> en haut ● Si : ● petit ● concaténé ● sans concurrence
  49. 49. Inclure JavaScript<script src> en bas ● Si : ● Page rapide ● Gestion des dépendances ● Pas de document.write() ● Pas de iOS
  50. 50. Inclure JavaScript<script defer> ● Retardé par le onload
  51. 51. Inclure JavaScriptJavascript asynchrone Conditions : ● Chargeur mis inline ● Gestion dune file de téléchargement ● Remplacer les dépendances inline par des callback ● Découpe par module ● Téléchargement dépriorisé ● Au top: concaténation + module + asynchrone
  52. 52. Outils : analyse ySlow
  53. 53. Outils : analyse Google PageSpeed
  54. 54. Outils : analyse WebPageTest
  55. 55. Outils : analyseWebPageTest, PageSpeed, ySwow... Ne pas se focaliser sur les notes
  56. 56. Profilers front IE Developer tools
  57. 57. Profilers front Dynatrace AJAX
  58. 58. RUM✓ Collecte des temps de chargement des utilisateurs✓ Complément des tests synthétiques Peut ralentir la page
  59. 59. RUMGratuit Commercial● Boomerang JS ● LogNormal ● Torbit● Google Analytics ● Yottaa ● New Relic ● Cedexis …
  60. 60. RUM Google Analytics
  61. 61. RUM Google Analytics
  62. 62. RUM Google Analytics Données de navigateurs modernes
  63. 63. MonitoringGratuit Commercial● WPT monitor ● Torbit ● Yottaa● ShowSlow ● GTmetrix ● Dynatrace …
  64. 64. Résumé ● Analyse fine et méta-outils : ● WebPageTest ● Monitoring : ● WPT Monitor ● RUM : ● Boomerang, Google Analytics ● Code Front : ● IE8 F12, Chrome
  65. 65. Les images
  66. 66. Images Optimisations :● Ne pas les charger !● Charger à la demande● Compression manuelle● Compression automatique
  67. 67. Ne pas charger Méthode de lazy-load : ● charger les images visibles mobiles https://github.com/fasterize/lazyload
  68. 68. Remplacer les icônes Caractères unicode ►★✓⇢✎♥☎♻⚠☻☺⇨●Taille et couleur adaptable⚠ servir en UTF-8⚠ dépend du couple OS / navigateur http://ikwebdesigner.com/special-characters/
  69. 69. Remplacer les dégradésbackground: linear-gradient(top bottom, #ffffff 0%,#131313 100%);● Taille automatique IE : dégradés simples● Syntaxe lourde http://www.colorzilla.com/gradient-editor/
  70. 70. Remplacer la décoration● Coins arrondis● Ombres sur texte et boîtes● Rotation de texte● Opacité⚠ Attention aux perfs de rendu
  71. 71. Limiter les requêtes● Encodage en base64 <img src="data:image/png;base64,<?= base64_encode( file_get_contents( ./image.p ng )); ?>">●IE < 8 : MHTML⚠ Performance de rendu
  72. 72. SpritesMaintenanceOutil : Sass + Compass
  73. 73. Compression manuelle Connaître les formats● PNG toujours meilleur que GIF● PNG : ultra efficace avec des aplats de couleur● JPG : mauvais pour le texte si il est en couleurs● Jamais de PNG entrelacé● PNG8 alpha● WebP : mal supporté
  74. 74. Outils de compression● PNGOUT ● pngquant● OptiPNG ● pngnq-s9● Pngcrush ● Gifsicle● JpegOptim ● jpegtran● jpegrescan● SVG : distribuer en gzip
  75. 75. Interface● PNGGauntlet
  76. 76. Interface● ImageAlpha (pngmini.com)
  77. 77. Interface● ImageOptim
  78. 78. Interface● smushit.com
  79. 79. Rendu fluideAlléger le DOM Surveiller 2 métriques ● La profondeur max et moyenne ( < 12 ) ● Le nombre de nœuds (< 1500 ) Outil : DOM Monster, WPT ● Long et périlleux si fait après coup ● Sensibilisation des intégrateurs
  80. 80. Rendu fluide - JavaScript ● Bonnes pratiques ● Peu de requêtes DOM ● Caching ● En dehors des boucles ● Manipulation du DOM par batch ● Application de classes VS $.css() ● Limiter la taille des requêtes ● $(doc.ById(monID)).find(> div.maClasse); ● Privilégier document.querySelector() ● JavaScript lui même est rarement un problème
  81. 81. Rendu fluideLa technique du setTimeout( 0 ) En cas de blocage de linterface : ● « casser » les boucles toutes les 50 ms ● Y revenir lorsque le navigateur est libre
  82. 82. Rendu fluide - Web Worker Pour du calcul lourd ● Crée un nouveau thread ● Communication par événements var worker = new Worker(my_task.js); worker.onmessage = function(event) { console.log("Called !n"); }; ● Compatibilité navigateurs ● Organisation du code spécifique
  83. 83. S’auto-forme r En anglais En français ● http● http://www.perfplanet.com/ ://checklists.opquast.com/webper● http f/ ://developer.yahoo.com/perfo ● https://groups.google.com/foru rmance/rules.html m/?fromgroups#!forum/performan● https:// ce-web developers.google.com/speed/ ● @webperf_fr docs/best-practices/rules_in et tro ● @WebperfParis● http:// ● https:// www.webpagetest.org/forum github.com/edas/webperf-book s ● http://braincracking.org
  84. 84. Crédits● 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/photostre m/

×