RennesJS Talk webperf by Dareboost
- 1. Introduction à la performanceweb Damien Jubeau CEO @DareBoost
- 2. Performance web, quelsenjeux ? Bonnes pratiques HTTP/1 HTTP/2, ce qui (va) change(r) Le budget de performance Toolbox
- 3.
- 4. 6 octobre 2015 MVCubeMV Cube Attente = Frustration
- 5. 6 octobre 2015 MVCubeMV Cube
- 6. 6 $11.500.000 300 ms... 2016 -source : From Application Metrics to Customer Experience Metrics
- 7. 7 53% des visites surmobile abandonnées après 3 secondes Le challenge du web mobile 2016 - source : DoubleClick - The need for mobile speed
- 8. 8 Guidelines Mobile Friendly(2015) « Chargement lent des pages mobiles » Mobile Friendly
- 9. Avant AMP... Red SlowLabel février 2015 Slow To Load juin 2015 source : Google : « Slow To Load » en cours de test
- 10. 10 Impacts rapidité surle 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. « 80-90% of theend-user response time is spent on the frontend. Start there. » Steve Souders Performance Golden Rule
- 12. et pourtant... chargement : 7sec 2 sec Infrastructure nécessaire : -50 % Architecture et bonnes pratiques
- 13. + 10% sur letaux de conversion Architecture et bonnes pratiques 2009 - source : Shopzilla - Performance By Design
- 14.
- 15. 1 - Optimisationdes images Les formats Commencer par choisir le bon format JPEG 30ko GIF 7ko PNG 17ko
- 16. Optimisation des images JPEG :Compression 10% - 3.5ko 50% - 9.6ko 100% - 63ko
- 17. Minification JS/CSS .maClass {/* Commentaire sur ma classe */ margin: 0px 0px 0px 0px; }
- 18.
- 19. Minification JS/CSS Minfication vscompression 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. Minification JS/CSS Obfuscation function maFonction(param){ varmaValeur = 1; return param+4; } function maFonction(e){var t=1;return e+4}
- 21. Gzip Les données sont compresséespar le serveur puis décompressées par le client Ne pas compresser des formats qui le sont déjà (png, jpeg...) !
- 22.
- 23. Above the fold! Privilégierle chargement de la partie de la page avant la ligne de flottaison
- 24. Above the fold ! LeJavascript, 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. Déporter le Javascript Solution1 : 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. Déporter le Javascript Solution2 : 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. Déporter le Javascript Solution3 : 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. 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.
- 30.
- 31. Les grands principes DomainSharding ! Hacky !
- 32.
- 33. Les grands principes Multiplexing (1seule connexion TCP / origine) Compression des en-têtes Server Push
- 34.
- 35.
- 36. Ce qu'il vafalloir désapprendre Domain Sharding Concaténation, Spriting Asset inlining
- 37.
- 38. dareboost.com @Dareboost 38 « As a productmanager you should know that speed is product feature number one. » Larry Page
- 39. dareboost.com @Dareboost 39 « Don’t launch features thatslow us down.» Google Gospel of Speed
- 40. Se fixer desobjectifs « 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. Budget : 1Mo Lahome page du site 800ko Cas pratique
- 42. On me demanded'y ajouter un habillage publicitaire 300ko Cas pratique
- 43. Budget KO ??? 800ko 300ko Cas pratique
- 44.
- 45.
- 46. Budget toujours KO ? =>il évolue ! Et quand ça coince
- 47. Pour chaque étapeet pour chaque interlocuteur Budget = implication + compromis
- 48. TTFB (délai avant premieroctet) Temps de réponse serveur
- 49. Start Render Délai avantdébut d'affichage
- 51. Visually Complete Délai avantfin d'affichage
- 53. Speed Index Indice deperformance
- 56.
- 57. < 1000 (1 secondepour le contenu « above the fold ») https://developers.google.com/speed/docs/insights/mobile Speed Index
- 58.
- 59. 59 Impacts rapidité surle web wpostats.com dareboost.com/webperf-impacts httparchive.org
- 60. Content Security Policy PerformanceAPI Pour aller plus loin
- 61. Real User Monitoring (monitoringpassif) « la vraie vie » 2 approches de surveillance Google Analytics et temps de chargement : bénéfices et limites du Real User Monitoring
- 62. Monitoring Synthétique (monitoring actif) internautesimulé 2 approches de surveillance
- 63. Outils Consoles des navigateurs Ctrl+ Maj + i Safari : Cmd + Option + c (après avoir activé le menu développement) IE : F12
- 64. Outils OpenSource / Gratuit www.webpagetest.org Richefonctionnellement mais parfois complexe. Pas de monitoring.
- 65. @DareBoost Rennais ;) Freemium, àvous de découvrir ! www.dareboost.com
- 66. 6 octobre 2015 MVCubeMV Cube
- 67. 6 octobre 2015 MVCubeMV Cube Merci !