Techniques d’accélération des pages Web                           Jean-Pierre VINCENT                          Consultant ...
Bonjour, je m’appelle Jean-Pierre                    ●   5 10 13 ans de Web                    ●   PHP, JavaScript, HTML5,...
Performance Web ?             Les 10 14 35 commandements             http://developer.yahoo.com/performance/rules.html
Comment faire le tri ?●   Yahoo! Best Practices (35      ● Nouveaux navigateurs                                   ● Nouvea...
Pourquoi la performance ?                                              ●   SEO                                            ...
Pourquoi la performance ?                   ●   Un administrateur système                       heureux
Pourquoi la performance ?                 ●   Qualité perçue  $$                 ●   Ergonomie                 ●   Réponse...
Combien coûte une seconde ?
Combien coûte une seconde ?Tunnel d’achat : 1s = -7% de conversion
Combien coûte une seconde ?   Vidéo :1s =-6% de vue          Akamai 2012
Combien coûte une seconde ?                              Voyage                         4s = -60% de vue
Combien coûte une seconde ?         Search●   Bing : 1 s =    - 3 % de CA●   Yahoo! : 1 s   =    + 10 % de rebond
Combien coûte une seconde ?                                     Mobile     ●    1 s = -10% de pages vues     ●    Après 4 ...
Chantier Webperf Comment ne pas rater un chantier Webperf ?
Chantier Webperf●   Objectifs●   Que voient les utilisateurs ?●   Quelles techniques ?●   Quel suivi ?
ObjectifsInteractivité avec la fonctionnalité   <5s
ObjectifsInteractivité avec la fonctionnalité   <5sPremier rendu                          <2s
ObjectifsInteractivité avec la fonctionnalité   <5sPremier rendu                          <2sRéponse HTML                 ...
ObjectifsInteractivité avec la fonctionnalité   <5sPremier rendu                          <2sRéponse HTML                 ...
Les utilisateurs     ●   Grand public français :         ● IE 7 is dead !         ● Arrivée via réseaux mobiles         ● ...
Les utilisateurs                             Répartition des débits (ligne fixe)• La moyenne n’est pasreprésentative      ...
Les utilisateursConnexion réseau à cibler :                         ADSL       Mobiles           Débit         2,5 Mb/s   ...
Les techniques           Par où commencer ?        Yahoo! Best Practices (35 règles)        Google PageSpeed (31 règles)  ...
Configuration serveur    1. Configuration du keep-alive :        KeepAlive On        KeepAliveTimeout 5        Timeout    ...
Gérer son cache            →
Gérer son cache                  Efficace mais :                  50% des sites oublient                  30% ont un TTL <...
Gérer son cache« Vide ton cache »                     Sans cache :                      • Phases de recette interne       ...
Gérer son cacheCache : invalidation standard●   Serveur    eTag: "xxxxxx"       Ou    Last-Modified: DATE_W3C             ...
Gérer son cacheCache : invalidation standardSert à des cas spéciaux   • Polling   • Revalidation de session   • Environnem...
Gérer son cacheInvalidation des caches longs ●   Maîtrise totale des URL     Mise en cache long :     ● HTML     ● CSS    ...
Gérer son cacheLe super cacheAPI Application Cache●   1 application = 1 pack de    fichiers●   1 fichier de règles●   1 AP...
Le chemin critiqueTrouver le chemin critique                             Chemin critique                                  ...
Le chemin critiqueCôté clientRessources bloquantes :   Ressources gênantes :● Redirections             ● Images● Génératio...
Le chemin critiqueRedirections           ● Limiter à 1 max           ● Jamais côté client           ● Surtout sur mobile
Le chemin critique ●   Moyens :     ● Cache serveur     ● Flush()     ● Page dynamiques et XHR     ● Parallélisation (Big ...
Pages statiquesCache serveur ● Fichiers plats ● Mécanismes des CMS ● memcache ● Varnish ● CDN…Paramétrage du temps de cach...
Technique du Flush()●   Envoyer le <head> au plus tôt
Pages semi-dynamiques  ●   Cache sur les parties statiques  ●   Envoyer ASAP  ●   XHR ou SSI pour les parties dynamiques  ...
Le chemin critiqueInclusion des parties dynamiques●   Personnalisation :    Server Side Include
Pages semi-dynamiques
ExtrêmesFacebook Big Pipe
Le chemin critiqueDéblayer le chemin critique ●   CSS     ● Concaténation     ● Minification     ● Inline ?
Le chemin critique    Polices● Les supprimer …● Les valider :  ● poids,  ● utilisée  ● compatibilité●   Chargement asynchr...
SPOFDépendances à des serveurs tiers qui peuventbloquer le renduUsual suspect :●http://platform.twitter.com/widgets.js●htt...
SPOF-O-Matic     Teste la fragilité aux ralentissements                des serveurs tiers                       démo
Pause ?
Inclure JavaScriptLe choix des armes  ● <script src> en haut  ● <script src> en bas  ● Inline  ● defer  ● Asynchrone
Inclure JavaScript<script src> en haut  ●   Si :      ● petit      ● concaténé      ● sans concurrence
Inclure JavaScript<script src> en bas  ●   Si :      ● Page rapide      ● Gestion des dépendances      ● Pas de document.w...
Inclure JavaScript<script defer>     ●   Retardé par le onload
Inclure JavaScriptJavascript asynchrone   Conditions : ● Chargeur mis inline ● Gestion dune file de téléchargement ● Rempl...
Outils : analyse               ySlow
Outils : analyse     Google PageSpeed
Outils : analyse               WebPageTest
Outils : analyseWebPageTest, PageSpeed, ySwow...            Ne pas se focaliser sur les notes
Profilers front             IE Developer tools
Profilers front              Dynatrace AJAX
RUM✓ Collecte des temps de chargement des utilisateurs✓ Complément des tests synthétiques  Peut ralentir la page
RUMGratuit                Commercial●   Boomerang JS                       ● LogNormal                       ● Torbit●   G...
RUM      Google Analytics
RUM      Google Analytics
RUM           Google Analytics      Données de navigateurs      modernes
MonitoringGratuit           Commercial●   WPT monitor                  ● Torbit                  ● Yottaa●   ShowSlow     ...
Résumé   ●   Analyse fine et méta-outils :       ●   WebPageTest   ●    Monitoring :       ● WPT Monitor   ●    RUM :     ...
Les images
Images    Optimisations :●   Ne pas les charger !●   Charger à la demande●   Compression manuelle●   Compression automatique
Ne pas charger     Méthode de lazy-load : ●     charger les images visibles      mobiles             https://github.com/fa...
Remplacer les icônes    Caractères unicode             ►★✓⇢✎♥☎♻⚠☻☺⇨●Taille et couleur adaptable⚠ servir en UTF-8⚠ dépend d...
Remplacer les dégradésbackground: linear-gradient(top bottom, #ffffff 0%,#131313 100%);●   Taille automatique     IE : dég...
Remplacer la décoration●   Coins arrondis●   Ombres sur texte et boîtes●   Rotation de texte●   Opacité⚠ Attention aux per...
Limiter les requêtes●   Encodage en base64    <img src="data:image/png;base64,<?=    base64_encode( file_get_contents( ./i...
SpritesMaintenanceOutil : Sass + Compass
Compression manuelle Connaître les formats● PNG toujours meilleur que GIF● PNG : ultra efficace avec des aplats de couleur...
Outils de compression●   PNGOUT                   ●   pngquant●   OptiPNG                  ●   pngnq-s9●   Pngcrush       ...
Interface●   PNGGauntlet
Interface●   ImageAlpha (pngmini.com)
Interface●   ImageOptim
Interface●   smushit.com
Rendu fluideAlléger le DOM      Surveiller 2 métriques      ● La profondeur max et moyenne ( < 12 )      ● Le nombre de nœ...
Rendu fluide - JavaScript  ● Bonnes pratiques  ● Peu de requêtes DOM    ● Caching    ● En dehors des boucles  ● Manipulati...
Rendu fluideLa technique du setTimeout( 0 )   En cas de blocage de linterface :    ● « casser » les boucles toutes les 50 ...
Rendu fluide - Web Worker    Pour du calcul lourd  ● Crée un nouveau thread  ● Communication par événements  var worker = ...
S’auto-forme    r    En anglais                            En français                                   ●   http●   http:...
Crédits●   http://www.flickr.com/photos/themonnie/2495892146●   http://www.flickr.com/photos/76657755@N04/7214596024/in/ph...
Prochain SlideShare
Chargement dans…5
×

Techniques d'accélération des pages web

3 164 vues

Publié le

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

Publié dans : Technologie
1 commentaire
9 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
3 164
Sur SlideShare
0
Issues des intégrations
0
Intégrations
9
Actions
Partages
0
Téléchargements
40
Commentaires
1
J’aime
9
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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/

×