Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Techniques d'accélération des pages web

3,362 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

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/

×