Optimiser les performances d'une webapp

Slides utilisés pour la session au Jug de Lausanne le 9 novembre 2017

Transcript

1. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Optimiser les performances d’une webapp
2. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 https://www.dev-mind.fr
3. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 https://www.dev-mind.fr Développement Formations
4. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne avec des crêpes et du coeur 19 et 20 avril 2018 à Lyon https://mixitconf.org/
5. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Pourquoi une webapp doit être performante ?
6. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 1 2 3 https://giphy.com
7. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Mobile First mars 2017
8. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne > 3 sec sur mobile ⇒ 57% des users en moins 0 : 03 DoubleClick, “The Need for Mobile Speed”, September 2016 https://giphy.com
9. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne
10. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne
11. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne
12. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 2010 2017 2016 2015 2014 2013 2012 2011 http://httparchive.org mars 2017 Taille moyenne des ressources d’un site web
13. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Application déployée en Europe
14. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Application déployée en Europe
15. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Mb en 2017 Wifi 30Mb/s ⇒ 0.5 sec
16. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Mb en 2017 Wifi 30Mb/s ⇒ 0.5 sec 4G 4Mb/s ⇒ 5 sec H+ 1.5Mb/s ⇒ 10 sec 3G 750kb/s ⇒ 25 sec Webpagetest.org, , February 2016
17. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Webpagetest.org, , February 2016 Temps mobile 10s 3/4 19s moy 200 moy Les performances sur mobile ne sont pas toujours au rendez vous
18. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Et les applications d’entreprise ?
19. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne https://giphy.com
20. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne
21. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne
22. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Que faire pour créer des webapps performantes ?
23. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Mesurer Transporter Limiter Cacher Offline Anticiper 1 6 2 5 4 3
24. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Mesurer Transporter Limiter Cacher Offline Anticiper 1 6 2 5 4 3
25. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne https://monsite/ 1
26. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne https://monsite/ HTML parsing 1
27. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne CSS parsing compile render parsing JavaScript Autres 1
28. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne parsing compile render JavaScript Autres parsing 1 CSS
29. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne render JavaScript Autres 1 CSS
30. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne loadtime https://monsite/ HTML parsing parsing compile render JavaScript Autres CSS render JavaScript Autres CSS ... 1
31. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne first paint JavaScript Autres JavaScript Autres ... 1 HTML https://monsite/ HTML parsing parsing compile render JavaScript Autres CSS render JavaScript Autres CSS ...
32. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Notre objectif < 1s first load 1
33. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Notre objectif first load refresh 1 < 1s
34. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Notre objectif first load refresh offline 1 < 1s
35. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Mes outils pour mesurer Webpagetest >> Pagespeed Insight >> Browser developper tools (Lighthouse) ... 1
36. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Web page test 1
37. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 1
38. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 1
39. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 1
40. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Mobile Cache Throttling 3G 1
41. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 18.2s Load time loadtime 1 1.6Mb Size size
42. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne first paint 1 7.4s first paint
43. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Avant de commencer 2 7.4s first paint 18.2s loadtime Sans optim 1.6Mb size
44. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Mesurer Transporter Limiter Cacher Offline Anticiper 1 6 2 5 4 3
45. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne CSS JavaScript Autres HTML 2
46. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne <html> <head> <script .../> <body> <script .../> </body </html> JavaScript HTML 2
47. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 1 7.4s first paint 2
48. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 2 6.4s first paint
49. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Ordre de définition des scripts JS 2 7.4s first paint 18.2s loadtime Sans optim 1.6Mb size 6.4s first paint 18.2s loadtime 1.6Mb size -13.5% first paint 0% loadtime 0% size
50. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 2
51. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 2
52. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 2 HTTP2 côté client
53. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 2 HTTP2 et Java 1. Container compatible Jetty 9.2, Undertow (JBoss) 1.3, Tomcat > 8.5 2. Activer le mode HTTP 2 3. Avoir un certificat 4. Ajouter le jar ALPN au jdk (lib pour Jdk < 9)
54. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne HTTP 2 2 6.4s first paint 18.2s loadtime Ordre JS 1.6Mb size 6.4s first paint 18.1s loadtime 1.6Mb size 0% first paint -0.5% loadtime 0% size
55. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Mesurer Transporter Limiter Cacher Offline Anticiper 1 6 2 5 4 3
56. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 https://giphy.com
57. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Minification ressources txt CSS JavaScript HTML
58. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Minification ressources txt JavaScript HTML sur mon exemple -22% -51% -26% CSS
59. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Le JSON est aussi du texte JSON
60. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 public class SessionDto { public String title; public String summary; public String lang; public String format; public String description; public Instant start; public Instant room; ... } des DTO qui collent à l’API
61. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 public class SessionDto { public String title; public String summary; public String lang; public String format; public String description; public Instant start; public Instant room; ... } public class SessionListDto { public String title; public String summary; ... } des DTO qui collent à l’API
62. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Le JSON est aussi du texte -80% JSON
63. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Minification du texte 6.4s first paint 18.1s loadtime HTTP2 1.6Mb size 5.5s first paint 15.4s loadtime 1.3Mb size -14% first paint -15% loadtime -19% size 3
64. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Le texte se compresse CSS JavaScript HTML JSON les navigateurs acceptent le gzip
65. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Le texte se compresse JavaScript HTML JSON server: compression: enabled: true mime-types: application/json,text/html,text/css,application/javascript min-response-size: 2048 CSS
66. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Compression du texte 5.5s first paint 15.4s loadtime Minification 1.3Mb size 1.5s first paint 10.8s loadtime 940Kb size -72% first paint -30% loadtime -28% size 3
67. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne CSS JavaScript Autres HTML 3
68. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 CSS
69. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne CSS 3
70. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 https://giphy.com CSS
71. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Material Design Lite 185kb 228kb 203kb 20kb Les frameworks CSS CSS CSS +JS CSS +JS CSS +JS CSS JS JS JQuery 69kb JQuery 69kb
72. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Quelques astuces Modularité frameworks Apprenez CSS CSS is awesome de Igor Laborie Nettoyage automatique avec uncss CSS
73. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 UnCSS return gulp.src(`${paths.main}/**/*.css`) .pipe($.if('*.css', $.uncss({ html : [ `${paths.main}/*.html`, `${paths.main}/component/**/*.html`, `${paths.main}/component/**/*.js`] }))) .pipe(gulp.dest(`${paths.dist}/styles`)); CSS
74. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Utilisation UnCSS 1.5s first paint 10.8s loadtime Compression 940Kb size 0.5s first paint 10.4s loadtime 920Kb size -67% first paint -3.7% loadtime -2.1% size 3 CSS
75. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Images 3
76. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Compression imagemin 0.5s first paint 10.4s loadtime UnCss 920Kb size 0.5s first paint 8.5s loadtime 735Kb size 0% first paint -18% loadtime -20% size 3 Images
77. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Transparence Couleurs Compression Animation Use case GIF 256 sans perte animation PNG au choix sans perte fond transp. PNG 8 bit 256 sans perte couleur limité JPEG toutes au choix photos SVG toutes sans perte indirectement logo, diag Les formats classiques 3 Images
78. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Préférez le vectoriel 3 svg png, jpg Images
79. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Oubliez le format gif et passez au mpeg4 ffmpeg, image 3 Images
80. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Mode progressif 3 Images
81. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne webp expérimentation jpeg 2000 jpeg_xr BPG Utilisez un format alternatif 3 Images
82. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne <picture> la balise perdue 3 Des images responsives en HTML avec la balise <picture> et la propriété srcset Images
83. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Images Images
84. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne propriété srcset 3 <img src="img/mixit/mixit-amphi_640.jpg" srcset="img/mixit/mixit-amphi_640.jpg 640w, img/mixit/mixit-amphi_1024.jpg 1024w, img/mixit/mixit-amphi_2048.jpg"> la largeur de la fenêtre nombre entier suivi par 'w' (640w), par défaut c’est l’infini la densité de pixel nombre entier suivi par 'x' (2x), par défaut c’est 1x. Images
85. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 <picture> <source srcset="img/mixit/mixit-amphi_640.webp 640w, img/mixit/mixit-amphi_1024.webp 1024w, img/mixit/mixit-amphi_2048.webp" type="image/webp"/> <source srcset="img/mixit/mixit-amphi_640.jpg 640w, img/mixit/mixit-amphi_1024.jpg 1024w, img/mixit/mixit-amphi_2048.jpg"/> <img src="img/mixit/mixit-amphi_640.jpg" alt="Mix-IT amphi"> </picture> Images
86. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 <picture> <source srcset="img/mixit/mixit-amphi_640.webp 640w, img/mixit/mixit-amphi_1024.webp 1024w, img/mixit/mixit-amphi_2048.webp" type="image/webp"/> <source srcset="img/mixit/mixit-amphi_640.jpg 640w, img/mixit/mixit-amphi_1024.jpg 1024w, img/mixit/mixit-amphi_2048.jpg"/> <img src="img/mixit/mixit-amphi_640.jpg" alt="Mix-IT amphi"> </picture> Images
87. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne propriété srcset 3 <img src="img/mixit/mixit-amphi_640.jpg" srcset="img/mixit/mixit-amphi_640.jpg 640w, img/mixit/mixit-amphi_1024.jpg 1024w, img/mixit/mixit-amphi_2048.jpg"> la largeur de la fenêtre nombre entier suivi par 'w' (640w), par défaut c’est l’infini la densité de pixel nombre entier suivi par 'x' (2x), par défaut c’est 1x. Images
88. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne width & height 3 Images
89. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne image optimisation 3 0.5s first paint 8.5s loadtime imagemin 735Kb size 0.5s first paint 6.7s loadtime 572Kb size 0% first paint -21% loadtime -22% size Images
90. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Fonts 3
91. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Utilisez le moins de fonts possible 3
92. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Fonts Format Extension Exemple Font Roboto Compression EOT .eot 179 ko TrueType .ttf 179 ko WOFF .woff 89 ko >10 WOFF2 .woff2 64ko 30% + que WOFF >10 >10 SVG .svg 743 ko IE Edge Firefox Chrome Safari Opera Opera Mini Android Browser iOS Safari Chrome for Android
93. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 @font-face { font-family: Roboto; src: local('Roboto'), url(../fonts/Roboto-Regular.woff2) format('woff2'), url(../fonts/Roboto-Regular.woff) format('woff'), url(../fonts/Roboto-Regular.eot), url(../fonts/Roboto-Regular.ttf) format('truetype'), url(../fonts/Roboto-Regular.svg#Roboto) format('svg'); font-weight: 300; font-style: normal } body { font-family: Roboto, Arial, sans-serif; } Fonts
94. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> Fonts 3 Utiliser un CDN
95. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne CDN pour les fonts 3 0.5s first paint 6.7s loadtime webp 572Kb size 440ms first paint 3.4s loadtime 231Kb size -12% first paint -49% loadtime -59% size
96. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 JavaScript 3
97. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Novembre 2010 Taille moyenne 113 Ko moy 420 Ko JS moy JS Novembre 2016 3 JavaScript medium article Osmany, 2017
98. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 JavaScript JS Téléchargemen t Parsing 05 3C FE BA 44 C1 Génération bytecode Optimisation Compilation Exécution Pas que le chargement
99. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne medium article Osmany, 2017 Evaluation et parsing d’un script JavaScript de 1Mo 3 JavaScript
100. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Traquer le code inutilisé 3 JavaScript
101. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Bundle analyser tool 3 JavaScript source-map-explorer
102. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Tree shaking 3 JavaScript import {a} from './module'; } console.log(a); module.js export function a() { return 'used'; } export function b() { return 'unused'; }
103. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Code splitting 3 JavaScript Lazy loading Améliorer le first load
104. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne import('./module').then( module => {...} ).catch( error => {...} ); Dynamic import 3 JavaScript https://github.com/tc39/proposal-dynamic-import est passé au dernier stade avant adoption
105. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Mais encore 3 SSR Pré compilation ... JavaScript
106. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Polyfill sur CDN 3 <script src="https://cdn.polyfill.io/v2/polyfill.min.js"> </script> Size (min) 1370 8212 464 26430 6652 Size (min+gz) 514 2435 285 8497 2018 JavaScript
107. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne CDN JS 3 440ms first paint 3.4s loadtime CDN font 231Kb size 440ms first paint 2.9s loadtime 200Kb size 0% first paint -15% loadtime -13% size JavaScript
108. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Mesurer Transporter Limiter Cacher Offline Anticiper 1 6 2 5 4 3
109. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 La ressource la plus rapide et la mieux optimisée est une ressource qui n'est pas envoyée. 4
110. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 App Data
111. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Cache serveur Cloud base de données ou I/O Temps fluctuant Abtraction Spring @Cacheable 4
112. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Cache ressource 4 Browser Server Cache Request
113. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Browser Cache Server Response
114. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Browser Cache Server Response
115. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Browser Server Cache Si max-age n’est pas dépassé
116. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Browser Cache Server Response
117. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Browser Server Cache Si max-age n’est pas dépassé
118. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Browser Server Cache Si max-age est dépassé Request
119. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Browser Cache Server Response 304
120. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Cache busting Versionner vos fichiers de ressources Pour le HTML limitez le max-age
121. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Refresh / Cache 440ms first paint 2.9s loadtime First load 200Kb size 427ms first paint 700ms loadtime 18Kb size -3% first paint -75% loadtime -91% size 4
122. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Mesurer Transporter Limiter Cacher Offline Anticiper 1 6 2 5 4 3
123. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 5 https://giphy.com
124. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 5
125. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Services workers 4 5
126. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 5
127. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Web workers 4 5
128. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 5
129. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 5 var worker = new Worker('doWork.js'); worker.addEventListener('message', (e) => { console.log('Worker said: ', e.data); }, false); worker.postMessage('Hello World'); self.addEventListener('message',(e) => { self.postMessage(e.data); }, false); doWork.js
130. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Service worker 5 JS SW cache
131. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Service worker 5 SW cache HTTPS JS
132. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Service worker 5 sw-precache module node générant la configuration sw-toolbox lib JS qui fournit des utilitaires pour gérer le cache avec différentes stratégies : networkFirst, cacheFirst, fastest, cacheOnly, networkOnly
133. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Service worker 5 sw-precache module node générant la configuration sw-toolbox lib JS qui fournit des utilitaires pour gérer le cache avec différentes stratégies : networkFirst, cacheFirst, fastest, cacheOnly, networkOnly
134. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 5 Ensemble de librairies et d’outils vous aidant à gérer les ressources de vos sites sur les devices de vos utilisateurs - aide à gérer le mode offline ou un réseau défaillant - améliore les performances quand une personne revient sur votre site
135. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 5 SW cache JS networkFirst cacheFirst fastest cacheOnly networkOnly
136. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne importScripts('workbox-sw.prod.v1.3.0.js'); const workboxSW = new self.WorkboxSW({ "cacheId": "dev-mind", "clientsClaim": true }); workboxSW.precache([]); workboxSW.router.registerRoute(/\.(?:png|gif|jpg)$/, workboxSW.strategies.cacheFirst({ cacheName: 'images-cache', cacheExpiration: { maxEntries: 100 } }) ); 5
137. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)', workboxSW.strategies.cacheFirst({ cacheName: 'googleapis', cacheExpiration: { maxEntries: 20 }, cacheableResponse: {statuses: [0, 200]} }) ); workboxSW.router.registerRoute('/(.*)', workboxSW.strategies.networkFirst({ cacheName: 'general-cache', cacheExpiration: { networkTimeoutSeconds: 3, maxAgeSeconds: 7200 } })); 5
138. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne importScripts('workbox-sw.prod.v1.3.0.js'); const workboxSW = new self.WorkboxSW({ "cacheId": "dev-mind", "clientsClaim": true }); workboxSW.precache([]); workboxSW.router.registerRoute(/\.(?:png|gif|jpg)$/, workboxSW.strategies.cacheFirst({ cacheName: 'images-cache', cacheExpiration: { maxEntries: 100 } }) ); 5
139. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne const fileManifest = [ { url: "404.html", revision: "636291341ea1afbfa74a9b26611602bc" }, { url: "blog.html", revision: "b3bcfa57cd425cf053ba8379bacfe41e" }, { url: "index.html", revision: "8f0d94e9b9e3e9550f70c643176c199a" }, { url: "images/logo.svg", revision: "fb715f541f37f38a1350cbd0d4f45f50" }, { url: "styles/app.css", revision: "6b785afae0546dbff97e69ae46ba2af6" }, … ]; workboxSW.precache(fileManifest); 5
140. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 5 SW cache JS networkFirst cacheFirst fastest cacheOnly networkOnly
141. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne gulp.task('bundle-sw', () => { return wbBuild.injectManifest({ swSrc: 'src/sw.js', swDest: 'build/.tmp/service-worker2.js', globDirectory: './build/dist', staticFileGlobs: ['**\/*.{js,html,css,png,jpg,json,gif,svg,webp,eot,ttf,woff,woff2,gz}'] }) .catch((err) => { console.log('[ERROR] This happened: ' + err); }); }); 5
142. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 5 if ('serviceWorker' in navigator) { navigator .serviceWorker .register('service-worker.js') .then(registration => { if (typeof registration.update === 'function') { registration.update(); } }) .catch(function(e) { console.error('Error during SW registration:', e); }); }
143. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 5
144. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Mesurer Transporter Limiter Cacher Offline Anticiper 1 6 2 5 4 3
145. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Charger le plus important tout de suite et le reste plus tard
146. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 6 preload
147. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 6 preload <link rel="preload" href="styles/app.css" as="style" onload="this.rel='stylesheet'"> <link rel="preload" href="/session/session.html" as="document"> <link rel="preload" href="/app.bundle.js" as="script">
148. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne prefetch 6
149. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne prefetch 6 <link rel="prefetch" href="https://fonts.googleapis.com/css?family=Roboto:400" onload="this.rel='stylesheet'">
150. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Mesurer Transporter Limiter Cacher Offline Anticiper 1 6 2 5 4 3
151. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne preload / prefecth 440ms first paint 2.9s loadtime First load 200Kb size 300ms first paint 2.9s loadtime 200Kb size -31% first paint 0% loadtime 0% size 4
152. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Notre objectif first load refresh offline 1 < 1s 7.4s first paint 18.2s loadtime 1.6Mb size Départ
153. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Notre objectif first load refresh offline 1 < 1s 300ms first paint 2.9s loadtime 200Kb size 220ms 700ms 18Kb first paint loadtime size 17ms 1.2s 0Kb first paint loadtime size 7.4s first paint 18.2s loadtime 1.6Mb size Départ
154. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Référence https://developers.google.com/web/fundamentals/performance https://github.com/ben-eb/gulp-uncss https://github.com/filamentgroup/loadCSS https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf https://nolanlawson.github.io/frontendday-2016/#1 https://www.youtube.com/watch?v=RWLzUnESylc https://github.com/GoogleChrome/sw-precache https://github.com/GoogleChrome/sw-toolbox https://developer.mozilla.org/fr/docs/Web/API/ServiceWorker https://jakearchibald.com/2014/offline-cookbook/
155. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 First do it, then do it right, then do it better... Addy Osmani
156. #WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 https://github.com/javamind/juglausanne-webperf Thanks