RennesJS Talk webperf by Dareboost

1. Introduction à la performance web Damien Jubeau CEO @DareBoost

2. Performance web, quels enjeux ? Bonnes pratiques HTTP/1 HTTP/2, ce qui (va) change(r) Le budget de performance Toolbox

3. Pourquoi la #webperf ?

4. 6 octobre 2015 MV CubeMV Cube Attente = Frustration

5. 6 octobre 2015 MV CubeMV Cube

6. 6 $11.500.000 300 ms... 2016 - source : From Application Metrics to Customer Experience Metrics

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 Guidelines Mobile Friendly (2015) « Chargement lent des pages mobiles » Mobile Friendly

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 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. « 80-90% of the end-user response time is spent on the frontend. Start there. » Steve Souders Performance Golden Rule

12. et pourtant... chargement : 7 sec 2 sec Infrastructure nécessaire : -50 % Architecture et bonnes pratiques

13. + 10% sur le taux de conversion Architecture et bonnes pratiques 2009 - source : Shopzilla - Performance By Design

14. Performance Front-End

15. 1 - Optimisation des 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. Minification JS/CSS .maClass{margin:0}

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. Minification JS/CSS Obfuscation function maFonction(param){ var maValeur = 1; return param+4; } function maFonction(e){var t=1;return e+4}

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. Zopfli / Brotli

23. Above the fold! Privilégier le chargement de la partie de la page avant la ligne de flottaison

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. 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. 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. 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. 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. HTTP/2

30. Les grands principes HTTP/1.1

31. Les grands principes Domain Sharding ! Hacky !

32. Les grands principes

33. Les grands principes Multiplexing (1 seule connexion TCP / origine) Compression des en-têtes Server Push

34. Aujourd'hui !

35. HTTPS

36. Ce qu'il va falloir désapprendre Domain Sharding Concaténation, Spriting Asset inlining

37. Budget de performance

38. dareboost.com @Dareboost 38 « As a product manager you should know that speed is product feature number one. » Larry Page

39. dareboost.com @Dareboost 39 « Don’t launch features that slow us down.» Google Gospel of Speed

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. Budget : 1Mo La home page du site 800ko Cas pratique

42. On me demande d'y ajouter un habillage publicitaire 300ko Cas pratique

43. Budget KO ??? 800ko 300 ko Cas pratique

44. Optimiser Épurer Abandonner Rentrer dans le budget

45. Respect du budget 200ko800ko

46. Budget toujours KO ? => il évolue ! Et quand ça coince

47. Pour chaque étape et pour chaque interlocuteur Budget = implication + compromis

48. TTFB (délai avant premier octet) Temps de réponse serveur

49. Start Render Délai avant début d'affichage

50. Visually Complete Délai avant fin d'affichage

51. Speed Index Indice de performance

52. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

53. < 1000 (1 seconde pour le contenu « above the fold ») https://developers.google.com/speed/docs/insights/mobile Speed Index

54. Toolbox

55. 59 Impacts rapidité sur le web wpostats.com dareboost.com/webperf-impacts httparchive.org

56. Content Security Policy Performance API Pour aller plus loin

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. Monitoring Synthétique (monitoring actif) internaute simulé 2 approches de surveillance

59. Outils Consoles des navigateurs Ctrl + Maj + i Safari : Cmd + Option + c (après avoir activé le menu développement) IE : F12

60. Outils OpenSource / Gratuit www.webpagetest.org Riche fonctionnellement mais parfois complexe. Pas de monitoring.

61. @DareBoost Rennais ;) Freemium, à vous de découvrir ! www.dareboost.com

62. 6 octobre 2015 MV CubeMV Cube

63. 6 octobre 2015 MV CubeMV Cube Merci !

RennesJS Talk webperf by Dareboost

Vous êtes en train de lire un aperçu.

Consultez-les par la suite

RennesJS Talk webperf by Dareboost

Plus De Contenu Connexe

Diaporamas pour vous (20)

Les utilisateurs ont également aimé (14)

Similaire à RennesJS Talk webperf by Dareboost (20)

Plus récents (20)