Techniques d’accélération des pages Web
Jean-Pierre VINCENT
Consultant indépendant
@theystolemynick
Braincracking.org
Bonjour, je m’appelle Jean-Pierre
 5 10 13 ans de Web
PHP, JavaScript, HTML5, C
Ex :
startups, Yahoo!, houra.fr
Exper...
Performance Web ?
Les 10 14 commandements
en 2006
http://developer.yahoo.com/performance/rules.html
Soooo 2006
2006 - 2013
Nouveaux besoins
Pages 1 Mo +
Social, tracking, pubs
JavaScript partout
Mobile !
Meilleur environnement
...
Passer des règles aux outils
Règles
Yahoo! Best Practices
(35 règles)
Google PageSpeed
(31 règles)
Test Opquast
(41...
Combien coûte une seconde ?
Combien coûte une seconde ?
Tunnel d’achat :
1s = -7% de conversion
Tagman, 2012
Combien coûte une seconde ?
Vidéo :
1s = -6% de vue
Akamai 2012
Combien coûte une seconde ?
e-commerce
1 s = - 50 %
de conversion
Walmart 2012
Combien coûte une seconde ?
Search
Bing : 1 s =
- 3 % de CA
Yahoo! : 1 s =
+ 10 % de rebond
Études Bing et Google Velo...
Combien coûte une seconde ?
Mobile
1 s = -10% de pages vues
Après 4 s : 60% d'abandon
/
http://www.themediabriefing.com/...
Chantier Webperf
Comment ne pas rater un chantier Webperf ?
Chantier Webperf
Fixer des objectifs
Mesurer pour l'utilisateur
Coder !
Surveiller
Pourquoi la performance ?
Qualité perçue
Ergonomie
Réponse à un besoin
Métriques :
Accès fonctionnalité
premier rend...
Objectifs
Interactivité avec la fonctionnalité < 5 s
Mesurer
En JavaScript
Google Analytics « User Timing »
Boomerang, autres outils de RUM
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Objectifs
Mesurer
WebPageTest
Dynatrace
Services payants
Trouver le chemin critique
Chemin critique
1er rendu
Le chemin critique
Agir
Agir sur le chemin critique
Côté client
Redirections
CSS
Polices
JS
Ressources bloquantes :
Le chemin critique
Redirections
Limiter à 1 max
Jamais côté client
Surtout sur mobile
Le chemin critique
CSS
Concaténation (2 fichiers max)
Minification
Inline ?
Le chemin critique
Polices
Les supprimer …
Les valider :
poids,
utilisée,
compatible (Chrome XP)
Chargement asynchrone
Le chemin critiq...
Le choix des armes
<script src> en haut
<script src> en bas
Inline
defer
Asynchrone
Inclure JavaScript
<script src> en bas
Si :
Page légère
Gestion des dépendances
Pas de document.write()
Pas de iOS
Inclure JavaScript
<script defer>
Retardé par le onload
Inclure JavaScript
Javascript asynchrone
Conditions :
Chargeur mis inline
Gestion d'une file de téléchargement
Remplacer les dépendances ...
<script src> en haut
Si :
petit
concaténé
sans concurrence
Et
HTML + CSS + JS + Fonts < 6 requêtes
Inclure JavaScript
Le choix se fera sur :
Contraintes de la page
Maturité de l'équipe
Inclure JavaScript
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Réponse HTML < 1 s
Objectifs
Tous les outils du monde…
Et WebPageTest
Mesurer
 Moyens :
 Cache serveur
 Flush()
 Page dynamiques et XHR
 Parallélisation (Big Pipe de FB)
Agir
Pages statiques
Cache serveur
 Fichiers plats
 Mécanismes des CMS
 memcache
 Varnish
 CDN…
Paramétrage du temps de ca...
Technique du Flush()
 Envoyer le <head> au plus tôt
Personnalisation :
Server Side Include
Inclusion des parties dynamiques
Pages semi-dynamiques
Pages semi-dynamiques
Pages semi-dynamiques
 Cache sur les parties statiques
 Envoyer ASAP
 XHR ou SSI pour les parties dynamiques
 Ne pas o...
Extrêmes
Facebook Big Pipe
Pourquoi la performance ?
SEO
1 critère de référencement
chez Google
Métrique : temps « onload
Mesurée par les utilis...
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Réponse HTML < 1 s
Chargement de la page < 20 s ?
Objectifs
Tous les outils du monde…
Et WebPageTest
Mesurer
Window.onload() de 20 secondes ?
Facile avec la fibre !
Mesurer
ADSL Mobiles
Débit 2,5 Mb/s 2,5 Mb/s
Latence 110 ms 200 ms
+25% de perte
Connexion réseau à cibler :
Navigateurs à cibler ...
Images
Iframe
Objets flash / vidéo
Ressources gênantes :
Temps onload()
Images
Optimisations :
 Ne pas les charger !
 Charger à la demande
 Compression manuelle
 Compression automatique
Remplacer la décoration
Caractères unicode ►★✓⇢✎♥☎☻☺⇨
Dégradés
Coins arrondis
Ombres sur texte et boîtes
Rotation d...
Chargement Just In Time
Méthode de lazy-load :
 charger les images visibles
https://github.com/fasterize/lazyload
Sprites

Maintenance
Outil : Sass + Compass
Limiter les requêtes
 Encodage en base64
<img src="data:image/png;base64,<?= base64_e
 IE < 8 : MHTML
⚠ Performance de ...
Compression manuelle
Connaître les formats
PNG toujours meilleur que GIF
PNG : ultra efficace avec des aplats de couleu...
Compression automatique
Ligne de commande
 PNGOUT
 OptiPNG
 Pngcrush
 JpegOptim
 Jpegrescan
Interface
 ImageAlpha ...
Pourquoi la performance ?
Un administrateur
système heureux
Serveurs tiers
SPOF
Dépendances à des serveurs tiers qui peuvent blo
Usual suspect :
http://platform.twitter.com/widgets.js
https://aja...
SPOF-O-Matic
Teste la fragilité aux ralentissements des serveurs tiers
démo
SPOF
Surveiller : WebPagetest
Fixer : chargements asynchrones
→
Gérer son cache
« Vide ton cache »
Sans cache :
• Phases de recette interne
• Environnements de développ
Cache agressif :
• Cache utilisat...
Invalidation des caches longs
Maîtrise totale des URL
HTML
CSS
JS
Processus de compilation
URL rendues uniques par :...
Le super cache
API Application Cache
1 application = 1 pack de fichiers
1 fichier de règles
1 API de gestion du cache
...
Gérer son cache
Surveiller : WebPagetest
Configuration serveur
1. Configuration du keep-alive :
2. Activer la compression
KeepAlive On
KeepAliveTimeout 5
Timeout 10
Outils : analyse
ySlow
Outils : analyse
Google PageSpeed
Outils : analyse
WebPageTest
Monitoring
Gratuit

 WPT monitor
 ShowSlow
Commercial
 Torbit
 Yottaa
 GTmetrix
 Dynatrace
…
Performance de rendu
Profilers front
IE Developer tools
Profilers front
Dynatrace AJAX
Rendu fluide
Alléger le DOM
Surveiller 2 métriques
La profondeur max et moyenne ( < 12 )
Le nombre de nœuds (< 1500 )
...
Rendu fluide - JavaScript
Bonnes pratiques
Peu de requêtes DOM
Caching
En dehors des boucles
Manipulation du DOM par ...
Rendu fluide
La technique du setTimeout( 0 )
En cas de blocage de l'interface :
« casser » les boucles toutes les 50 ms
...
Résumé
Performances Web moderne :
Outils
WebPageTest !
Profilers
Monitoring, process
WPT Monitor, build, RUM
 Techn...
S’auto-former
En anglais
http://www.perfplanet.com/
http://developer.yahoo.com/performance/rules.html
https://developer...
Questions ?
Viens jouer :
 braincracking.org
 @theystolemynick
Crédits
http://www.flickr.com/photos/themonnie/2495892146
http://www.flickr.com/photos/76657755@N04/7214596024/in/photos...
Techniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwiparty
Prochain SlideShare
Chargement dans…5
×

Techniques accélération des pages web #kiwiparty

3 999 vues

Publié le

0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 999
Sur SlideShare
0
Issues des intégrations
0
Intégrations
203
Actions
Partages
0
Téléchargements
36
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Techniques accélération des pages web #kiwiparty

  1. 1. Techniques d’accélération des pages Web Jean-Pierre VINCENT Consultant indépendant @theystolemynick Braincracking.org
  2. 2. Bonjour, je m’appelle Jean-Pierre  5 10 13 ans de Web PHP, JavaScript, HTML5, C Ex : startups, Yahoo!, houra.fr Expert frontend indépendan Veilleur :  braincracking.org  @theystolemynick
  3. 3. Performance Web ? Les 10 14 commandements en 2006 http://developer.yahoo.com/performance/rules.html
  4. 4. Soooo 2006
  5. 5. 2006 - 2013 Nouveaux besoins Pages 1 Mo + Social, tracking, pubs JavaScript partout Mobile ! Meilleur environnement SPDY remplace HTTP IE 7 meurt ADSL pour tous 4G, Fibre !
  6. 6. Passer des règles aux outils Règles Yahoo! Best Practices (35 règles) Google PageSpeed (31 règles) Test Opquast (41 règles) … Jusqu'à 400+ pratiques Outils Analyse réseauProfiling Bonnes pratiques Monitoring RUM Intégration continue
  7. 7. Combien coûte une seconde ?
  8. 8. Combien coûte une seconde ? Tunnel d’achat : 1s = -7% de conversion Tagman, 2012
  9. 9. Combien coûte une seconde ? Vidéo : 1s = -6% de vue Akamai 2012
  10. 10. Combien coûte une seconde ? e-commerce 1 s = - 50 % de conversion Walmart 2012
  11. 11. Combien coûte une seconde ? Search Bing : 1 s = - 3 % de CA Yahoo! : 1 s = + 10 % de rebond Études Bing et Google Velocity 2009 : http://velocityconf.com/velocity2009/public/schedule/detail/8523
  12. 12. Combien coûte une seconde ? Mobile 1 s = -10% de pages vues Après 4 s : 60% d'abandon / http://www.themediabriefing.com/article/2012-10-02/speed-is-a-feature-why-a-slow-mobile-web-experience-means-lost-revenue http://www.strangeloopnetworks.com/resources/infographics/2012-state-of-mobile-ecommerce-performance/poster
  13. 13. Chantier Webperf Comment ne pas rater un chantier Webperf ?
  14. 14. Chantier Webperf Fixer des objectifs Mesurer pour l'utilisateur Coder ! Surveiller
  15. 15. Pourquoi la performance ? Qualité perçue Ergonomie Réponse à un besoin Métriques : Accès fonctionnalité premier rendu$$
  16. 16. Objectifs Interactivité avec la fonctionnalité < 5 s
  17. 17. Mesurer En JavaScript Google Analytics « User Timing » Boomerang, autres outils de RUM
  18. 18. Interactivité avec la fonctionnalité < 5 s Premier rendu < 2 s Objectifs
  19. 19. Mesurer WebPageTest Dynatrace Services payants
  20. 20. Trouver le chemin critique Chemin critique 1er rendu Le chemin critique
  21. 21. Agir Agir sur le chemin critique
  22. 22. Côté client Redirections CSS Polices JS Ressources bloquantes : Le chemin critique
  23. 23. Redirections Limiter à 1 max Jamais côté client Surtout sur mobile Le chemin critique
  24. 24. CSS Concaténation (2 fichiers max) Minification Inline ? Le chemin critique
  25. 25. Polices Les supprimer … Les valider : poids, utilisée, compatible (Chrome XP) Chargement asynchrone Le chemin critique
  26. 26. Le choix des armes <script src> en haut <script src> en bas Inline defer Asynchrone Inclure JavaScript
  27. 27. <script src> en bas Si : Page légère Gestion des dépendances Pas de document.write() Pas de iOS Inclure JavaScript
  28. 28. <script defer> Retardé par le onload Inclure JavaScript
  29. 29. Javascript asynchrone Conditions : Chargeur mis inline Gestion d'une 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 LabJS, requireJS Inclure JavaScript
  30. 30. <script src> en haut Si : petit concaténé sans concurrence Et HTML + CSS + JS + Fonts < 6 requêtes Inclure JavaScript
  31. 31. Le choix se fera sur : Contraintes de la page Maturité de l'équipe Inclure JavaScript
  32. 32. Interactivité avec la fonctionnalité < 5 s Premier rendu < 2 s Réponse HTML < 1 s Objectifs
  33. 33. Tous les outils du monde… Et WebPageTest Mesurer
  34. 34.  Moyens :  Cache serveur  Flush()  Page dynamiques et XHR  Parallélisation (Big Pipe de FB) Agir
  35. 35. Pages statiques Cache serveur  Fichiers plats  Mécanismes des CMS  memcache  Varnish  CDN… Paramétrage du temps de cache Contenu personnalisé
  36. 36. Technique du Flush()  Envoyer le <head> au plus tôt
  37. 37. Personnalisation : Server Side Include Inclusion des parties dynamiques Pages semi-dynamiques
  38. 38. Pages semi-dynamiques
  39. 39. Pages semi-dynamiques  Cache sur les parties statiques  Envoyer ASAP  XHR ou SSI pour les parties dynamiques  Ne pas oublier l'interface  Référencement
  40. 40. Extrêmes Facebook Big Pipe
  41. 41. Pourquoi la performance ? SEO 1 critère de référencement chez Google Métrique : temps « onload Mesurée par les utilisateurs http://googlewebmastercentral.blogspot.fr/2010/04/using-site-speed-in-web-search-ranking.html
  42. 42. Interactivité avec la fonctionnalité < 5 s Premier rendu < 2 s Réponse HTML < 1 s Chargement de la page < 20 s ? Objectifs
  43. 43. Tous les outils du monde… Et WebPageTest Mesurer
  44. 44. Window.onload() de 20 secondes ? Facile avec la fibre ! Mesurer
  45. 45. ADSL Mobiles Débit 2,5 Mb/s 2,5 Mb/s Latence 110 ms 200 ms +25% de perte Connexion réseau à cibler : Navigateurs à cibler : IE 8 Safari iOS Android 2.3.x et 4.x WebPageTest Monitor Les utilisateurs
  46. 46. Images Iframe Objets flash / vidéo Ressources gênantes : Temps onload()
  47. 47. Images Optimisations :  Ne pas les charger !  Charger à la demande  Compression manuelle  Compression automatique
  48. 48. Remplacer la décoration Caractères unicode ►★✓⇢✎♥☎☻☺⇨ Dégradés Coins arrondis Ombres sur texte et boîtes Rotation de texte Opacité http://ikwebdesigner.com/special-characters/
  49. 49. Chargement Just In Time Méthode de lazy-load :  charger les images visibles https://github.com/fasterize/lazyload
  50. 50. Sprites  Maintenance Outil : Sass + Compass
  51. 51. Limiter les requêtes  Encodage en base64 <img src="data:image/png;base64,<?= base64_e  IE < 8 : MHTML ⚠ Performance de rendu
  52. 52. 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é …
  53. 53. Compression automatique Ligne de commande  PNGOUT  OptiPNG  Pngcrush  JpegOptim  Jpegrescan Interface  ImageAlpha (pngmini.com)  PNGGauntlet  ImageOptim  pngquant  pngnq-s9  Gifsicle  jpegtran  SVG : distribuer en gzip
  54. 54. Pourquoi la performance ? Un administrateur système heureux Serveurs tiers
  55. 55. SPOF Dépendances à des serveurs tiers qui peuvent blo Usual suspect : http://platform.twitter.com/widgets.js https://ajax.googleapis.com/ajax/libs/jquery/1.7.2 http://html5shiv.googlecode.com/svn/trunk/html5.
  56. 56. SPOF-O-Matic Teste la fragilité aux ralentissements des serveurs tiers démo
  57. 57. SPOF Surveiller : WebPagetest Fixer : chargements asynchrones
  58. 58. → Gérer son cache
  59. 59. « Vide ton cache » Sans cache : • Phases de recette interne • Environnements de développ Cache agressif : • Cache utilisateur • Chaîne de cache réseau Gérer son cache
  60. 60. Invalidation des caches longs Maîtrise totale des URL HTML CSS JS Processus de compilation URL rendues uniques par : Numéro de release Md5 du fichier Expires : +1 an Cache-control : public Vary : xxx Mise en cache long : Gérer son cache X
  61. 61. Le super cache API Application Cache 1 application = 1 pack de fichiers 1 fichier de règles 1 API de gestion du cache Surtout sur mobiles Gérer son cache
  62. 62. Gérer son cache Surveiller : WebPagetest
  63. 63. Configuration serveur 1. Configuration du keep-alive : 2. Activer la compression KeepAlive On KeepAliveTimeout 5 Timeout 10
  64. 64. Outils : analyse ySlow
  65. 65. Outils : analyse Google PageSpeed
  66. 66. Outils : analyse WebPageTest
  67. 67. Monitoring Gratuit   WPT monitor  ShowSlow Commercial  Torbit  Yottaa  GTmetrix  Dynatrace …
  68. 68. Performance de rendu
  69. 69. Profilers front IE Developer tools
  70. 70. Profilers front Dynatrace AJAX
  71. 71. Rendu fluide Allé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
  72. 72. 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.maC Privilégier document.querySelector() JavaScript lui même est rarement un problème
  73. 73. Rendu fluide La technique du setTimeout( 0 ) En cas de blocage de l'interface : « casser » les boucles toutes les 50 ms Y revenir lorsque le navigateur est libre
  74. 74. Résumé Performances Web moderne : Outils WebPageTest ! Profilers Monitoring, process WPT Monitor, build, RUM  Techniques : Travailler le chemin critique Chargements juste à temps Connaître ses utilisateurs, faire de la veille
  75. 75. S’auto-former 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/forums En français http://checklists.opquast.com/webperf/ https://groups.google.com/forum/?fromgro @webperf_fr et @WebperfParis https://github.com/edas/webperf-book http://braincracking.org
  76. 76. Questions ? Viens jouer :  braincracking.org  @theystolemynick
  77. 77. 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/photostream/

×