Optimiser les performances d'une webapp

D3bcad37b1ec0fc8ecdeb199e54a61e4?s=47 Dev-Mind
November 08, 2017

Optimiser les performances d'une webapp

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

D3bcad37b1ec0fc8ecdeb199e54a61e4?s=128

Dev-Mind

November 08, 2017
Tweet

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