RennesJS Talk webperf by Dareboost

285 vues

Publié le

Talk sur la "Performance Web : Enjeux, techniques et méthodologie" pour @RennesJS

Rappel du programme :
"Après la découverte de quelques success stories sur la performance web - des éléments pour se convaincre et savoir convaincre de l'importance de la webperf - nous aborderons les techniques élémentaires pour mettre vos pages web au régime (compression, optimisation des images, politique de cache, etc).
Ce sera aussi l'occasion d'aborder HTTP/2 : les bonnes pratiques de performance ne sont peut être plus celles que vous croyez et vos habitudes vont devoir changer, nous verrons pourquoi !

Nous n'oublierons pas d'évoquer les différents indicateurs de performance (speedindex, start render, etc), et il est fort possible que je m'égare à l'occasion sur d'autres outils de qualité front-end, comme la Content Security Policy...

En conclusion, on parlera de budget. Pas celui de la soirée, mais du budget de performance, à appliquer sur vos projets, pour créer une véritable culture de la performance web dans votre équipe !"

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

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

Aucune remarque pour cette diapositive

RennesJS Talk webperf by Dareboost

  1. 1. Introduction à la performance web Damien Jubeau CEO @DareBoost
  2. 2. Performance web, quels enjeux ? Bonnes pratiques HTTP/1 HTTP/2, ce qui (va) change(r) Le budget de performance Toolbox
  3. 3. Pourquoi la #webperf ?
  4. 4. 6 octobre 2015 MV CubeMV Cube Attente = Frustration
  5. 5. 6 octobre 2015 MV CubeMV Cube
  6. 6. 6 $11.500.000 300 ms... 2016 - source : From Application Metrics to Customer Experience Metrics
  7. 7. 7 53% des visites sur mobile abandonnées après 3 secondes Le challenge du web mobile 2016 - source : DoubleClick - The need for mobile speed
  8. 8. 8 Guidelines Mobile Friendly (2015) « Chargement lent des pages mobiles » Mobile Friendly
  9. 9. Avant AMP... Red Slow Label février 2015 Slow To Load juin 2015 source : Google : « Slow To Load » en cours de test
  10. 10. 10 Impacts rapidité sur le web Acquisition Conversion Référencement, Coût adwords, Taux de rebond, Tenue de charge, Referral Image de marque, Panier moyen, Taux de conversion, Sécurité
  11. 11. « 80-90% of the end-user response time is spent on the frontend. Start there. » Steve Souders Performance Golden Rule
  12. 12. et pourtant... chargement : 7 sec 2 sec Infrastructure nécessaire : -50 % Architecture et bonnes pratiques
  13. 13. + 10% sur le taux de conversion Architecture et bonnes pratiques 2009 - source : Shopzilla - Performance By Design
  14. 14. Performance Front-End
  15. 15. 1 - Optimisation des images Les formats Commencer par choisir le bon format JPEG 30ko GIF 7ko PNG 17ko
  16. 16. Optimisation des images JPEG : Compression 10% - 3.5ko 50% - 9.6ko 100% - 63ko
  17. 17. Minification JS/CSS .maClass { /* Commentaire sur ma classe */ margin: 0px 0px 0px 0px; }
  18. 18. Minification JS/CSS .maClass{margin:0}
  19. 19. Minification JS/CSS Minfication vs compression En savoir plus : http://blog.dareboost.com/fr/2014/07/la-minification-css/ Traitements Taille finale Aucun (CSS brut) 132 ko Compression Gzip 19,4 ko Minification 109,5 ko Minification puis Compression Gzip 18 ko 7 %
  20. 20. Minification JS/CSS Obfuscation function maFonction(param){ var maValeur = 1; return param+4; } function maFonction(e){var t=1;return e+4}
  21. 21. Gzip Les données sont compressées par le serveur puis décompressées par le client Ne pas compresser des formats qui le sont déjà (png, jpeg...) !
  22. 22. Zopfli / Brotli
  23. 23. Above the fold! Privilégier le chargement de la partie de la page avant la ligne de flottaison
  24. 24. Above the fold ! Le Javascript, comme le CSS sont bloquants <html> <head> <script type="text/javascript" src="script.js"></script> </head> <body> <div> Hello, world! </div> </body> </html> Bloque le téléchargement d'autres ressources jusqu'à la fin de l'exécution
  25. 25. Déporter le Javascript Solution 1 : script inline <html> <head> <script type="text/javascript"> /* Pour un script très court et indispensable */ </script> </head> <body> <div> Hello, world! </div> </body> </html>
  26. 26. Déporter le Javascript Solution 2 : script async <html> <head> <script async type="text/javascript" src="script.js"></script> </head> <body> <div> Hello, world! </div> </body> </html> Pas de garantie d'ordre. IE >= 10
  27. 27. Déporter le Javascript Solution 3 : différer l'appel <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </body> Code proposé par Google sous licence Apache 2.0
  28. 28. Erreurs et redirections 29% des sites comportent une erreur 4XX ou 5XX Source : Httparchive.org – septembre 2016 9% des sites avec 5 redirections ou plus
  29. 29. HTTP/2
  30. 30. Les grands principes HTTP/1.1
  31. 31. Les grands principes Domain Sharding ! Hacky  !
  32. 32. Les grands principes
  33. 33. Les grands principes Multiplexing (1 seule connexion TCP / origine) Compression des en-têtes Server Push
  34. 34. Aujourd'hui !
  35. 35. HTTPS
  36. 36. Ce qu'il va falloir désapprendre Domain Sharding Concaténation, Spriting Asset inlining
  37. 37. Budget de performance
  38. 38. dareboost.com @Dareboost 38 « As a product manager you should know that speed is product feature number one. » Larry Page
  39. 39. dareboost.com @Dareboost 39 « Don’t launch features that slow us down.» Google Gospel of Speed
  40. 40. Se fixer des objectifs « le site doit être rapide » « la page doit faire moins de 1Mo » « le serveur doit répondre en 150ms » Budget de performance Article détaillé : Budget de performance : un indispensable à la rapidité des sites web
  41. 41. Budget : 1Mo La home page du site 800ko Cas pratique
  42. 42. On me demande d'y ajouter un habillage publicitaire 300ko Cas pratique
  43. 43. Budget KO ??? 800ko 300 ko Cas pratique
  44. 44. Optimiser Épurer Abandonner Rentrer dans le budget
  45. 45. Respect du budget 200ko800ko
  46. 46. Budget toujours KO ? => il évolue ! Et quand ça coince
  47. 47. Pour chaque étape et pour chaque interlocuteur Budget = implication + compromis
  48. 48. TTFB (délai avant premier octet) Temps de réponse serveur
  49. 49. Start Render Délai avant début d'affichage
  50. 50. Visually Complete Délai avant fin d'affichage
  51. 51. Speed Index Indice de performance
  52. 52. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
  53. 53. < 1000 (1 seconde pour le contenu « above the fold ») https://developers.google.com/speed/docs/insights/mobile Speed Index
  54. 54. Toolbox
  55. 55. 59 Impacts rapidité sur le web wpostats.com dareboost.com/webperf-impacts httparchive.org
  56. 56. Content Security Policy Performance API Pour aller plus loin
  57. 57. Real User Monitoring (monitoring passif) « la vraie vie » 2 approches de surveillance Google Analytics et temps de chargement : bénéfices et limites du Real User Monitoring
  58. 58. Monitoring Synthétique (monitoring actif) internaute simulé 2 approches de surveillance
  59. 59. Outils Consoles des navigateurs Ctrl + Maj + i Safari : Cmd + Option + c (après avoir activé le menu développement) IE : F12
  60. 60. Outils OpenSource / Gratuit www.webpagetest.org Riche fonctionnellement mais parfois complexe. Pas de monitoring.
  61. 61. @DareBoost Rennais ;) Freemium, à vous de découvrir ! www.dareboost.com
  62. 62. 6 octobre 2015 MV CubeMV Cube
  63. 63. 6 octobre 2015 MV CubeMV Cube Merci !

×