Tweet
Tweet

Slide 1

Slide 1 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Optimiser les performances d’une webapp

Slide 2

Slide 2 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 https://www.dev-mind.fr

Slide 3

Slide 3 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 https://www.dev-mind.fr Développement Formations

Slide 4

Slide 4 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne avec des crêpes et du coeur 19 et 20 avril 2018 à Lyon https://mixitconf.org/

Slide 5

Slide 5 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Pourquoi une webapp doit être performante ?

Slide 6

Slide 6 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 1 2 3 https://giphy.com

Slide 7

Slide 7 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Mobile First mars 2017

Slide 8

Slide 8 text

#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

Slide 9

Slide 9 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne

Slide 10

Slide 10 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne

Slide 11

Slide 11 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne

Slide 12

Slide 12 text

#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

Slide 13

Slide 13 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Application déployée en Europe

Slide 14

Slide 14 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Application déployée en Europe

Slide 15

Slide 15 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Mb en 2017 Wifi 30Mb/s ⇒ 0.5 sec

Slide 16

Slide 16 text

#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

Slide 17

Slide 17 text

#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

Slide 18

Slide 18 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Et les applications d’entreprise ?

Slide 19

Slide 19 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne https://giphy.com

Slide 20

Slide 20 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne

Slide 21

Slide 21 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne

Slide 22

Slide 22 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Que faire pour créer des webapps performantes ?

Slide 23

Slide 23 text

#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

Slide 24

Slide 24 text

#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

Slide 25

Slide 25 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne https://monsite/ 1

Slide 26

Slide 26 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne https://monsite/ HTML parsing 1

Slide 27

Slide 27 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne CSS parsing compile render parsing JavaScript Autres 1

Slide 28

Slide 28 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne parsing compile render JavaScript Autres parsing 1 CSS

Slide 29

Slide 29 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne render JavaScript Autres 1 CSS

Slide 30

Slide 30 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne loadtime https://monsite/ HTML parsing parsing compile render JavaScript Autres CSS render JavaScript Autres CSS ... 1

Slide 31

Slide 31 text

#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 ...

Slide 32

Slide 32 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Notre objectif < 1s first load 1

Slide 33

Slide 33 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Notre objectif first load refresh 1 < 1s

Slide 34

Slide 34 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Notre objectif first load refresh offline 1 < 1s

Slide 35

Slide 35 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Mes outils pour mesurer Webpagetest >> Pagespeed Insight >> Browser developper tools (Lighthouse) ... 1

Slide 36

Slide 36 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Web page test 1

Slide 37

Slide 37 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 1

Slide 38

Slide 38 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 1

Slide 39

Slide 39 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 1

Slide 40

Slide 40 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Mobile Cache Throttling 3G 1

Slide 41

Slide 41 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 18.2s Load time loadtime 1 1.6Mb Size size

Slide 42

Slide 42 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne first paint 1 7.4s first paint

Slide 43

Slide 43 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Avant de commencer 2 7.4s first paint 18.2s loadtime Sans optim 1.6Mb size

Slide 44

Slide 44 text

#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

Slide 45

Slide 45 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne CSS JavaScript Autres HTML 2

Slide 46

Slide 46 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne <body> <script .../> </body </html> JavaScript HTML 2

Slide 47

Slide 47 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 1 7.4s first paint 2

Slide 48

Slide 48 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 2 6.4s first paint

Slide 49

Slide 49 text

#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

Slide 50

Slide 50 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 2

Slide 51

Slide 51 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 2

Slide 52

Slide 52 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 2 HTTP2 côté client

Slide 53

Slide 53 text

#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)

Slide 54

Slide 54 text

#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

Slide 55

Slide 55 text

#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

Slide 56

Slide 56 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 https://giphy.com

Slide 57

Slide 57 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Minification ressources txt CSS JavaScript HTML

Slide 58

Slide 58 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Minification ressources txt JavaScript HTML sur mon exemple -22% -51% -26% CSS

Slide 59

Slide 59 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Le JSON est aussi du texte JSON

Slide 60

Slide 60 text

#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

Slide 61

Slide 61 text

#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

Slide 62

Slide 62 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Le JSON est aussi du texte -80% JSON

Slide 63

Slide 63 text

#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

Slide 64

Slide 64 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Le texte se compresse CSS JavaScript HTML JSON les navigateurs acceptent le gzip

Slide 65

Slide 65 text

#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

Slide 66

Slide 66 text

#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

Slide 67

Slide 67 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne CSS JavaScript Autres HTML 3

Slide 68

Slide 68 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 CSS

Slide 69

Slide 69 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne CSS 3

Slide 70

Slide 70 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 https://giphy.com CSS

Slide 71

Slide 71 text

#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

Slide 72

Slide 72 text

#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

Slide 73

Slide 73 text

#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

Slide 74

Slide 74 text

#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

Slide 75

Slide 75 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Images 3

Slide 76

Slide 76 text

#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

Slide 77

Slide 77 text

#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

Slide 78

Slide 78 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Préférez le vectoriel 3 svg png, jpg Images

Slide 79

Slide 79 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Oubliez le format gif et passez au mpeg4 ffmpeg, image 3 Images

Slide 80

Slide 80 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Mode progressif 3 Images

Slide 81

Slide 81 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne webp expérimentation jpeg 2000 jpeg_xr BPG Utilisez un format alternatif 3 Images

Slide 82

Slide 82 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne la balise perdue 3 Des images responsives en HTML avec la balise et la propriété srcset Images

Slide 83

Slide 83 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Images Images

Slide 84

Slide 84 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne propriété srcset 3 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

Slide 85

Slide 85 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Mix-IT amphi Images

Slide 86

Slide 86 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 3 Mix-IT amphi Images

Slide 87

Slide 87 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne propriété srcset 3 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

Slide 88

Slide 88 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne width & height 3 Images

Slide 89

Slide 89 text

#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

Slide 90

Slide 90 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Fonts 3

Slide 91

Slide 91 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Utilisez le moins de fonts possible 3

Slide 92

Slide 92 text

#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

Slide 93

Slide 93 text

#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

Slide 94

Slide 94 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Fonts 3 Utiliser un CDN

Slide 95

Slide 95 text

#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

Slide 96

Slide 96 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 JavaScript 3

Slide 97

Slide 97 text

#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

Slide 98

Slide 98 text

#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

Slide 99

Slide 99 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne medium article Osmany, 2017 Evaluation et parsing d’un script JavaScript de 1Mo 3 JavaScript

Slide 100

Slide 100 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Traquer le code inutilisé 3 JavaScript

Slide 101

Slide 101 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Bundle analyser tool 3 JavaScript source-map-explorer

Slide 102

Slide 102 text

#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'; }

Slide 103

Slide 103 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Code splitting 3 JavaScript Lazy loading Améliorer le first load

Slide 104

Slide 104 text

#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

Slide 105

Slide 105 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Mais encore 3 SSR Pré compilation ... JavaScript

Slide 106

Slide 106 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Polyfill sur CDN 3 Size (min) 1370 8212 464 26430 6652 Size (min+gz) 514 2435 285 8497 2018 JavaScript

Slide 107

Slide 107 text

#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

Slide 108

Slide 108 text

#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

Slide 109

Slide 109 text

#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

Slide 110

Slide 110 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 App Data

Slide 111

Slide 111 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Cache serveur Cloud base de données ou I/O Temps fluctuant Abtraction Spring @Cacheable 4

Slide 112

Slide 112 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Cache ressource 4 Browser Server Cache Request

Slide 113

Slide 113 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Browser Cache Server Response

Slide 114

Slide 114 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Browser Cache Server Response

Slide 115

Slide 115 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Browser Server Cache Si max-age n’est pas dépassé

Slide 116

Slide 116 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Browser Cache Server Response

Slide 117

Slide 117 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Browser Server Cache Si max-age n’est pas dépassé

Slide 118

Slide 118 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Browser Server Cache Si max-age est dépassé Request

Slide 119

Slide 119 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Browser Cache Server Response 304

Slide 120

Slide 120 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 Cache busting Versionner vos fichiers de ressources Pour le HTML limitez le max-age

Slide 121

Slide 121 text

#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

Slide 122

Slide 122 text

#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

Slide 123

Slide 123 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 5 https://giphy.com

Slide 124

Slide 124 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 5

Slide 125

Slide 125 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 Services workers 4 5

Slide 126

Slide 126 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 5

Slide 127

Slide 127 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Web workers 4 5

Slide 128

Slide 128 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 4 5

Slide 129

Slide 129 text

#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

Slide 130

Slide 130 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Service worker 5 JS SW cache

Slide 131

Slide 131 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne Service worker 5 SW cache HTTPS JS

Slide 132

Slide 132 text

#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

Slide 133

Slide 133 text

#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

Slide 134

Slide 134 text

#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

Slide 135

Slide 135 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 5 SW cache JS networkFirst cacheFirst fastest cacheOnly networkOnly

Slide 136

Slide 136 text

#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

Slide 137

Slide 137 text

#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

Slide 138

Slide 138 text

#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

Slide 139

Slide 139 text

#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

Slide 140

Slide 140 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 5 SW cache JS networkFirst cacheFirst fastest cacheOnly networkOnly

Slide 141

Slide 141 text

#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

Slide 142

Slide 142 text

#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); }); }

Slide 143

Slide 143 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 5

Slide 144

Slide 144 text

#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

Slide 145

Slide 145 text

#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

Slide 146

Slide 146 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 6 preload

Slide 147

Slide 147 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne 6 preload

Slide 148

Slide 148 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne prefetch 6

Slide 149

Slide 149 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne prefetch 6

Slide 150

Slide 150 text

#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

Slide 151

Slide 151 text

#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

Slide 152

Slide 152 text

#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

Slide 153

Slide 153 text

#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

Slide 154

Slide 154 text

#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/

Slide 155

Slide 155 text

#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

Slide 156

Slide 156 text

#WebPerformance / 9 novembre 2017 @guillaumeehret JUG Lausanne JUG Lausanne @guillaumeehret #WebPerformance / 9 novembre 2017 https://github.com/javamind/juglausanne-webperf Thanks