Techniques d’accélération des pages Web
Jean-Pierre VINCENT
Consultant indépendant
@theystolemynick
Braincracking.org
Bonjour, je m’appelle Jean-Pierre
l
13 ans de Web :
l
PHP, JavaScript, HTML5, CSS
startups, Yahoo!, houra.fr
Expert fronte...
Performance frontend ?
Performances traditionnelles :
- Tenir la charge
- Délivrer vite
- Techniques serveur
Performances ...
Performance frontend
Rien Rien Premier affichage ! Chargé
Pourquoi la performance ?
l
Qualité perçue
l
Ergonomie
l
Référencement
l
Coûts réseau
l
Fun
$$
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
l
Bing : 1 s =
l
- 3 % de CA
l
Yahoo! : 1 s =
l
+ 10 % de rebond
Études Bing et Google ...
Combien coûte une seconde ?
Mobile
l
1 s = -10% de pages vues
l
Après 4 s : 60% d'abandon
/
http://www.themediabriefing.co...
Pourquoi la performance ?
l
SEO
l1 critère de référencement
chez Google
lInfluence le taux de crawl
l
Métrique : temps « o...
l
Charger un site de 1,5 Mo ?
l
Facile avec la fibre !
Toujours utile ?
Les utilisateurs
Sources 2012 : Akamai, Degrouptest, 60 Millions de
consommateurs, ARCEP, Cedexis
ADSL Mobiles
Débit 4, 8 ...
l
Débit moyen : 5 Mb/s
l
25% des utilisateurs
ont moins de 2,5 Mb/s
Répartition des débits (ligne fixe)
Les utilisateurs
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 ...
l
Le site moyen
l
1,5 Mo
l
120 requêtes
l
12 domaines
15 secondes de chargement
Chantier Webperf
l
Fixer des objectifs
l
Mesurer pour l'utilisateur
l
Coder !
l
Surveiller
Objectifs Utilisateurs
Interactivité avec la fonctionnalité < 5 s
Mesurer l'accès à la fonctionnalité
l
En JavaScript
l
Google Analytics « User Timing »
l
Boomerang, autres outils de RUM
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Objectifs Utilisateurs
Mesurer le premier rendu
l
En JavaScript
l
Librairies RUM :
l
RequestTracker
l
Boomerang JS
l
Outils externes
l
WebPageTes...
Interactivité avec la fonctionnalité < 5 s
Premier rendu < 2 s
Réponse HTML < 1 s
Chargement de la page < 20 s ?
Objectifs...
Mesurer le onload
l
Pratiquement tous
les outils
Agir
Techniques passe partout :
l
Configuration serveur
l
Cache serveur, cache client
l
Chargement des fichiers
Configuration serveur
1. Configuration du keep-alive :
2. Activer la compression
KeepAlive On
KeepAliveTimeout 5
Timeout 1...
Configuration serveur
Vérifier avec WebPageTest
Cache Serveur
l
Fichiers plats
l
Mécanismes / plugin des CMS
l
memcache
l
Varnish
l
CDN…
Paramétrage du temps de cache
Con...
Cache serveur
Vérifier avec WebPageTest
Agir
l
Le chargement des fichiers ou le chemin critique
Trouver le chemin critique
Chemin critique
1er rendu
Le chemin critique
Côté client
l
Redirections
l
CSS
l
Polices
l
JS
Ressources bloquantes :
Le chemin critique
Redirections
l
Limiter à 1 max
l
Jamais côté client
l
Surtout sur mobile
Le chemin critique
CSS / JS
l
Concaténation (2 fichiers max par type)
l
Minification
Le chemin critique
Polices
l
Les limiter
l
Les valider :
l
poids,
l
utilisée,
l
compatible (Chrome XP)
Le chemin critique
Le choix des armes
l
<script src> en haut
l
<script src> en bas
l
Inline
l
defer
l
Asynchrone
Inclure JavaScript
<script src> en haut
Si :
l
petit
l
concaténé
l
sans concurrence
l
Et
l
HTML + CSS + JS +
Fonts < 6 requêtes
Inclure JavaS...
<script src> en bas
l
Si :
l
Page légère
l
Gestion des dépendances
l
Pas de document.write()
l
Pas de iOS
Inclure JavaScri...
l
Images
l
Iframe
l
Objets flash / vidéo
Ressources gênantes :
Temps onload()
Images
l
Optimisations :
l
Ne pas les charger !
l
Charger à la demande
l
Compression manuelle
l
Compression automatique
Remplacer la décoration
l
Caractères unicode ►★✓⇢✎♥☎♻⚠☻☺⇨
l
Dégradés
l
Coins arrondis
l
Ombres sur texte et boîtes
l
Rotat...
Chargement Just In Time
l
Méthode de lazy-load :
l
charger les images visibles
https://github.com/fasterize/lazyload
Sprites
l
Maintenance
Outil : Sass + Compass
Compression manuelle
l
Connaître les formats
l
PNG toujours meilleur que GIF
l
PNG : ultra efficace avec des aplats de cou...
→
Cache client
Efficace mais :
50% des sites oublient
30% ont un TTL < 30 jours
Gérer son cache
« Vide ton cache »
Sans cache :
• Phases de recette interne
• Environnements de
développement
Cache agressif :
• Cache uti...
Invalidation des caches longs
l
Maîtrise totale des URL
l
HTML
l
CSS
l
JS
l
Processus de compilation
l
URL rendues uniques...
Gérer son cache
Surveiller : WebPagetest
Pourquoi la performance ?
Un administrateur
l
système heureux
l
l
l
Serveurs tiers
SPOF
Dépendances à des serveurs tiers qui peuvent
bloquer le rendu
Usual suspect :
l
http://platform.twitter.com/widgets.j...
SPOF-O-Matic
Teste la fragilité aux ralentissements des serveurs tiers
l
démo
SPOF
Surveiller : WebPagetest
Fixer : chargements asynchrones
S’auto-former
En anglais
l http://www.perfplanet.com/
l http://developer.yahoo.com/performance/rules.html
l https://develo...
Passer des règles aux outils
l
Règles
l
Yahoo! Best Practices
l
(35 règles)
l
Google PageSpeed
l
(31 règles)
l
Test Opquas...
Questions ?
l
Viens jouer :
l braincracking.org
l @theystolemynick
Crédits
l http://www.flickr.com/photos/themonnie/2495892146
l http://www.flickr.com/photos/76657755@N04/7214596024/in/phot...
Prochain SlideShare
Chargement dans…5
×

Introduction à la webperf

1 462 vues

Publié le

Comment accélérer ses pages Web ? Combien cela rapporte il, quels sont les outils
Nous allons voir les techniques de base que les développeurs doivent connaître et quels sont les outils dont tout site moderne doit s'équiper pour assurer un minimum de qualité.

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 462
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
13
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Introduction à la webperf

  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 l 13 ans de Web : l PHP, JavaScript, HTML5, CSS startups, Yahoo!, houra.fr Expert frontend indépendant l Veilleur : l braincracking.org l @theystolemynick
  3. 3. Performance frontend ? Performances traditionnelles : - Tenir la charge - Délivrer vite - Techniques serveur Performances Frontend - Vitesse d'affichage d'une page - Fluidité de l'interface - Techniques de développeur front
  4. 4. Performance frontend Rien Rien Premier affichage ! Chargé
  5. 5. Pourquoi la performance ? l Qualité perçue l Ergonomie l Référencement l Coûts réseau l Fun $$
  6. 6. Combien coûte une seconde ?
  7. 7. Combien coûte une seconde ? Tunnel d’achat : 1s = -7% de conversion Tagman, 2012
  8. 8. Combien coûte une seconde ? Vidéo : 1s = -6% de vue Akamai 2012
  9. 9. Combien coûte une seconde ? e-commerce 1 s = - 50 % de conversion Walmart 2012
  10. 10. Combien coûte une seconde ? Search l Bing : 1 s = l - 3 % de CA l Yahoo! : 1 s = l + 10 % de rebond Études Bing et Google Velocity 2009 : http://velocityconf.com/velocity2009/public/schedule/detail/8523
  11. 11. Combien coûte une seconde ? Mobile l 1 s = -10% de pages vues l 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
  12. 12. Pourquoi la performance ? l SEO l1 critère de référencement chez Google lInfluence le taux de crawl l Métrique : temps « onload » lMesurée par les utilisateurs http://googlewebmastercentral.blogspot.fr/2010/04/using-site-speed-in-web-search-ranking.html
  13. 13. l Charger un site de 1,5 Mo ? l Facile avec la fibre ! Toujours utile ?
  14. 14. Les utilisateurs Sources 2012 : Akamai, Degrouptest, 60 Millions de consommateurs, ARCEP, Cedexis ADSL Mobiles Débit 4, 8 Mb/s 2,5 Mb/s Latence 95 ms 200 ms Temps de chargement
  15. 15. l Débit moyen : 5 Mb/s l 25% des utilisateurs ont moins de 2,5 Mb/s Répartition des débits (ligne fixe) Les utilisateurs
  16. 16. 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 Les utilisateurs
  17. 17. l Le site moyen l 1,5 Mo l 120 requêtes l 12 domaines 15 secondes de chargement
  18. 18. Chantier Webperf l Fixer des objectifs l Mesurer pour l'utilisateur l Coder ! l Surveiller
  19. 19. Objectifs Utilisateurs Interactivité avec la fonctionnalité < 5 s
  20. 20. Mesurer l'accès à la fonctionnalité l En JavaScript l Google Analytics « User Timing » l Boomerang, autres outils de RUM
  21. 21. Interactivité avec la fonctionnalité < 5 s Premier rendu < 2 s Objectifs Utilisateurs
  22. 22. Mesurer le premier rendu l En JavaScript l Librairies RUM : l RequestTracker l Boomerang JS l Outils externes l WebPageTest.org
  23. 23. Interactivité avec la fonctionnalité < 5 s Premier rendu < 2 s Réponse HTML < 1 s Chargement de la page < 20 s ? Objectifs SEO
  24. 24. Mesurer le onload l Pratiquement tous les outils
  25. 25. Agir Techniques passe partout : l Configuration serveur l Cache serveur, cache client l Chargement des fichiers
  26. 26. Configuration serveur 1. Configuration du keep-alive : 2. Activer la compression KeepAlive On KeepAliveTimeout 5 Timeout 10 SetOutputFilter DEFLATE AddOutputFilterByType DEFLATE text/html text/css text/plain application/x-javascript
  27. 27. Configuration serveur Vérifier avec WebPageTest
  28. 28. Cache Serveur l Fichiers plats l Mécanismes / plugin des CMS l memcache l Varnish l CDN… Paramétrage du temps de cache Contenu personnalisé
  29. 29. Cache serveur Vérifier avec WebPageTest
  30. 30. Agir l Le chargement des fichiers ou le chemin critique
  31. 31. Trouver le chemin critique Chemin critique 1er rendu Le chemin critique
  32. 32. Côté client l Redirections l CSS l Polices l JS Ressources bloquantes : Le chemin critique
  33. 33. Redirections l Limiter à 1 max l Jamais côté client l Surtout sur mobile Le chemin critique
  34. 34. CSS / JS l Concaténation (2 fichiers max par type) l Minification Le chemin critique
  35. 35. Polices l Les limiter l Les valider : l poids, l utilisée, l compatible (Chrome XP) Le chemin critique
  36. 36. Le choix des armes l <script src> en haut l <script src> en bas l Inline l defer l Asynchrone Inclure JavaScript
  37. 37. <script src> en haut Si : l petit l concaténé l sans concurrence l Et l HTML + CSS + JS + Fonts < 6 requêtes Inclure JavaScript
  38. 38. <script src> en bas l Si : l Page légère l Gestion des dépendances l Pas de document.write() l Pas de iOS Inclure JavaScript
  39. 39. l Images l Iframe l Objets flash / vidéo Ressources gênantes : Temps onload()
  40. 40. Images l Optimisations : l Ne pas les charger ! l Charger à la demande l Compression manuelle l Compression automatique
  41. 41. Remplacer la décoration l Caractères unicode ►★✓⇢✎♥☎♻⚠☻☺⇨ l Dégradés l Coins arrondis l Ombres sur texte et boîtes l Rotation de texte l Opacité l http://ikwebdesigner.com/special-characters/
  42. 42. Chargement Just In Time l Méthode de lazy-load : l charger les images visibles https://github.com/fasterize/lazyload
  43. 43. Sprites l Maintenance Outil : Sass + Compass
  44. 44. Compression manuelle l Connaître les formats l PNG toujours meilleur que GIF l PNG : ultra efficace avec des aplats de couleur l JPG : mauvais pour le texte si il est en couleurs l Jamais de PNG entrelacé l PNG8 alpha l WebP : mal supporté l …
  45. 45. → Cache client
  46. 46. Efficace mais : 50% des sites oublient 30% ont un TTL < 30 jours Gérer son cache
  47. 47. « Vide ton cache » Sans cache : • Phases de recette interne • Environnements de développement Cache agressif : • Cache utilisateur • Chaîne de cache réseau Gérer son cache
  48. 48. Invalidation des caches longs l Maîtrise totale des URL l HTML l CSS l JS l Processus de compilation l URL rendues uniques par : l Numéro de release l Md5 du fichier Expires : +1 an Cache-control : public Vary : xxx Mise en cache long : Gérer son cache X
  49. 49. Gérer son cache Surveiller : WebPagetest
  50. 50. Pourquoi la performance ? Un administrateur l système heureux l l l Serveurs tiers
  51. 51. SPOF Dépendances à des serveurs tiers qui peuvent bloquer le rendu Usual suspect : l http://platform.twitter.com/widgets.js l https://ajax.googleapis.com/ajax/libs/jquery/1.7. 2/jquery.min.js l http://html5shiv.googlecode.com/svn/trunk/html 5.js
  52. 52. SPOF-O-Matic Teste la fragilité aux ralentissements des serveurs tiers l démo
  53. 53. SPOF Surveiller : WebPagetest Fixer : chargements asynchrones
  54. 54. S’auto-former En anglais l http://www.perfplanet.com/ l http://developer.yahoo.com/performance/rules.html l https://developers.google.com/speed/docs/best-practices/rules_intro l http://www.webpagetest.org/forums En français l http://checklists.opquast.com/webperf/ l https://groups.google.com/forum/?fromgroups#!forum/performance-web l @webperf_fr l et l @WebperfParis l https://github.com/edas/webperf-book l http://braincracking.org
  55. 55. Passer des règles aux outils l Règles l Yahoo! Best Practices l (35 règles) l Google PageSpeed l (31 règles) l Test Opquast l (41 règles) … l Jusqu'à 400+ pratiques l Outils l Analyse réseau l Profiling l Bonnes pratiques l Monitoring l RUM l Intégration continue
  56. 56. Questions ? l Viens jouer : l braincracking.org l @theystolemynick
  57. 57. Crédits l http://www.flickr.com/photos/themonnie/2495892146 l http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream/ l http://www.flickr.com/photos/johannes_wl/8364284798/sizes/l/in/photostream/

×