Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ITOGO_Conf_-_Optimiser_les_performances_d_une_webapp.pdf

 ITOGO_Conf_-_Optimiser_les_performances_d_une_webapp.pdf

Dans cette présentation je décris la marche à suivre pour optimiser vos sites web ou vos applications web

Dev-Mind

June 11, 2018
Tweet

More Decks by Dev-Mind

Other Decks in Technology

Transcript

  1. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Optimiser les performances
    d’une webapp

    View Slide

  2. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Pourquoi une webapp doit être
    performante ?

    View Slide

  3. #WebPerformance / 9 juin 2018
    @guillaumeehret
    1
    2 3
    https://giphy.com

    View Slide

  4. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Internet Usage 2009/2018 - Worldwide

    View Slide

  5. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Internet Usage 2009/2018 - Afrique

    View Slide

  6. #WebPerformance / 9 juin 2018
    @guillaumeehret
    > 3 sec sur
    mobile

    57% des users
    en moins
    0 : 03
    DoubleClick, “The Need
    for Mobile Speed”,
    September 2016
    https://giphy.com

    View Slide

  7. #WebPerformance / 9 juin 2018
    @guillaumeehret

    View Slide

  8. #WebPerformance / 9 juin 2018
    @guillaumeehret

    View Slide

  9. #WebPerformance / 9 juin 2018
    @guillaumeehret

    View Slide

  10. #WebPerformance / 9 juin 2018
    @guillaumeehret
    2010 2017
    2016
    2015
    2014
    2013
    2012
    2011
    http://httparchive.org
    mars 2017
    Taille moyenne des ressources d’un site web

    View Slide

  11. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Application déployée en Europe

    View Slide

  12. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Application déployée en Europe

    View Slide

  13. #WebPerformance / 9 juin 2018
    @guillaumeehret
    3 Mb en 2017
    Wifi
    30Mb/s

    0.5 sec

    View Slide

  14. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  15. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Webpagetest.org, , February 2016
    Temps mobile
    10s
    3/4
    19s
    moy
    200
    moy
    Les performances sur mobile ne sont pas toujours au rendez vous

    View Slide

  16. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Et les applications d’entreprise ?

    View Slide

  17. #WebPerformance / 9 juin 2018
    @guillaumeehret
    https://giphy.com

    View Slide

  18. #WebPerformance / 9 juin 2018
    @guillaumeehret

    View Slide

  19. #WebPerformance / 9 juin 2018
    @guillaumeehret

    View Slide

  20. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Que faire pour créer des webapps
    performantes ?

    View Slide

  21. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    https://www.dev-mind.fr

    View Slide

  22. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    https://www.dev-mind.fr
    Développement
    Formations

    View Slide

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

    View Slide

  24. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Mesurer
    Transporter
    Limiter
    Cacher
    Offline
    Anticiper
    1
    6
    2
    5
    4
    3

    View Slide

  25. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Mesurer
    Transporter
    Limiter
    Cacher
    Offline
    Anticiper
    1
    6
    2
    5
    4
    3

    View Slide

  26. #WebPerformance / 9 juin 2018
    @guillaumeehret
    https://monsite/
    1

    View Slide

  27. #WebPerformance / 9 juin 2018
    @guillaumeehret
    https://monsite/
    HTML
    parsing
    1

    View Slide

  28. #WebPerformance / 9 juin 2018
    @guillaumeehret
    CSS
    parsing
    compile
    render
    parsing
    JavaScript
    Autres
    1

    View Slide

  29. #WebPerformance / 9 juin 2018
    @guillaumeehret
    parsing
    compile
    render
    JavaScript
    Autres
    parsing
    1
    CSS

    View Slide

  30. #WebPerformance / 9 juin 2018
    @guillaumeehret
    render
    JavaScript
    Autres
    1
    CSS

    View Slide

  31. #WebPerformance / 9 juin 2018
    @guillaumeehret
    loadtime
    https://monsite/
    HTML
    parsing
    parsing
    compile
    render
    JavaScript
    Autres
    CSS
    render
    JavaScript
    Autres
    CSS
    ...
    1

    View Slide

  32. #WebPerformance / 9 juin 2018
    @guillaumeehret
    first paint
    JavaScript
    Autres
    JavaScript
    Autres
    ...
    1
    HTML
    https://monsite/
    HTML
    parsing
    parsing
    compile
    render
    JavaScript
    Autres
    CSS
    render
    JavaScript
    Autres
    CSS
    ...

    View Slide

  33. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Notre objectif < 1s
    first load
    1

    View Slide

  34. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Notre objectif
    first load refresh
    1
    < 1s

    View Slide

  35. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Notre objectif
    first load refresh offline
    1
    < 1s

    View Slide

  36. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Mes outils pour mesurer
    Webpagetest >>
    Pagespeed Insight >>
    Browser developper tools (Lighthouse)
    ...
    1

    View Slide

  37. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Web page test
    1

    View Slide

  38. #WebPerformance / 9 juin 2018
    @guillaumeehret
    1

    View Slide

  39. #WebPerformance / 9 juin 2018
    @guillaumeehret
    1

    View Slide

  40. #WebPerformance / 9 juin 2018
    @guillaumeehret
    1

    View Slide

  41. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Mobile
    Cache
    Throttling 3G
    1

    View Slide

  42. #WebPerformance / 9 juin 2018
    @guillaumeehret
    18.2s
    Load time
    loadtime
    1
    1.6Mb
    Size
    size

    View Slide

  43. #WebPerformance / 9 juin 2018
    @guillaumeehret
    first paint
    1
    7.4s
    first paint

    View Slide

  44. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Avant de commencer
    2
    7.4s
    first paint
    18.2s
    loadtime
    Sans optim
    1.6Mb
    size

    View Slide

  45. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Mesurer
    Transporter
    Limiter
    Cacher
    Offline
    Anticiper
    1
    6
    2
    5
    4
    3

    View Slide

  46. #WebPerformance / 9 juin 2018
    @guillaumeehret
    CSS
    JavaScript
    Autres
    HTML
    2

    View Slide

  47. #WebPerformance / 9 juin 2018
    @guillaumeehret






    JavaScript
    HTML
    2

    View Slide

  48. #WebPerformance / 9 juin 2018
    @guillaumeehret
    1
    7.4s
    first paint
    2

    View Slide

  49. #WebPerformance / 9 juin 2018
    @guillaumeehret
    2
    6.4s
    first paint

    View Slide

  50. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  51. #WebPerformance / 9 juin 2018
    @guillaumeehret
    2

    View Slide

  52. #WebPerformance / 9 juin 2018
    @guillaumeehret
    2

    View Slide

  53. #WebPerformance / 9 juin 2018
    @guillaumeehret
    2
    HTTP2 côté client

    View Slide

  54. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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)

    View Slide

  55. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  56. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Mesurer
    Transporter
    Limiter
    Cacher
    Offline
    Anticiper
    1
    6
    2
    5
    4
    3

    View Slide

  57. #WebPerformance / 9 juin 2018
    @guillaumeehret
    3
    https://giphy.com

    View Slide

  58. #WebPerformance / 9 juin 2018
    @guillaumeehret
    3
    Minification ressources txt
    CSS
    JavaScript
    HTML

    View Slide

  59. #WebPerformance / 9 juin 2018
    @guillaumeehret
    3
    Minification ressources txt
    JavaScript
    HTML
    sur mon exemple
    -22%
    -51%
    -26%
    CSS

    View Slide

  60. #WebPerformance / 9 juin 2018
    @guillaumeehret
    3
    Le JSON est aussi du texte
    JSON

    View Slide

  61. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  62. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  63. #WebPerformance / 9 juin 2018
    @guillaumeehret
    3
    Le JSON est aussi du texte
    -80%
    JSON

    View Slide

  64. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  65. #WebPerformance / 9 juin 2018
    @guillaumeehret
    3
    Le texte se compresse
    CSS JavaScript
    HTML JSON
    les navigateurs acceptent le gzip

    View Slide

  66. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  67. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  68. #WebPerformance / 9 juin 2018
    @guillaumeehret
    CSS
    JavaScript
    Autres
    HTML
    3

    View Slide

  69. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    CSS

    View Slide

  70. #WebPerformance / 9 juin 2018
    @guillaumeehret
    CSS 3

    View Slide

  71. #WebPerformance / 9 juin 2018
    @guillaumeehret
    3
    https://giphy.com
    CSS

    View Slide

  72. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  73. #WebPerformance / 9 juin 2018
    @guillaumeehret
    3
    Quelques astuces
    Modularité frameworks
    Apprenez CSS CSS is awesome de Igor Laborie
    Nettoyage automatique avec uncss
    CSS

    View Slide

  74. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  75. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  76. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Images
    3

    View Slide

  77. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  78. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  79. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Préférez le vectoriel
    3
    svg
    png, jpg
    Images

    View Slide

  80. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Oubliez le format gif
    et passez au mpeg4
    ffmpeg, image
    3
    Images

    View Slide

  81. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Mode progressif
    3
    Images

    View Slide

  82. #WebPerformance / 9 juin 2018
    @guillaumeehret
    webp expérimentation
    jpeg 2000
    jpeg_xr
    BPG
    Utilisez un format alternatif
    3
    Images

    View Slide

  83. #WebPerformance / 9 juin 2018
    @guillaumeehret
    la balise perdue
    3
    Des images responsives en HTML avec la balise
    et la propriété srcset
    Images

    View Slide

  84. #WebPerformance / 9 juin 2018
    @guillaumeehret
    3
    Images
    Images

    View Slide

  85. #WebPerformance / 9 juin 2018
    @guillaumeehret
    3

    type="image/webp"/>



    Images

    View Slide

  86. #WebPerformance / 9 juin 2018
    @guillaumeehret
    3

    type="image/webp"/>



    Images

    View Slide

  87. #WebPerformance / 9 juin 2018
    @guillaumeehret
    propriété srcset
    3
    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

    View Slide

  88. #WebPerformance / 9 juin 2018
    @guillaumeehret
    width & height
    3
    Images

    View Slide

  89. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  90. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Fonts
    3

    View Slide

  91. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Utilisez le moins de fonts possible
    3

    View Slide

  92. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  93. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  94. #WebPerformance / 9 juin 2018
    @guillaumeehret
    href="https://fonts.googleapis.com/css?family=Roboto"
    rel="stylesheet">
    Fonts 3
    Utiliser un CDN

    View Slide

  95. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  96. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    JavaScript
    3

    View Slide

  97. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Novembre 2010
    Taille moyenne
    113
    Ko
    moy
    420
    Ko
    JS
    moy
    JS
    Novembre 2016
    3
    JavaScript
    medium article Osmany, 2017

    View Slide

  98. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  99. #WebPerformance / 9 juin 2018
    @guillaumeehret
    medium article Osmany, 2017
    Evaluation et parsing d’un script JavaScript de 1Mo
    3
    JavaScript

    View Slide

  100. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Traquer le code inutilisé
    3
    JavaScript

    View Slide

  101. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Bundle analyser tool
    3
    JavaScript
    source-map-explorer

    View Slide

  102. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Tree shaking
    3
    JavaScript
    import {a} from './module';
    }
    console.log(a);
    module.js
    export function a() {
    return 'used';
    }
    export function b() {
    return 'unused';
    }

    View Slide

  103. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Code splitting
    3
    JavaScript
    Lazy loading
    Améliorer le first load

    View Slide

  104. #WebPerformance / 9 juin 2018
    @guillaumeehret
    import('./module').then(
    module => {...}
    ).catch(
    error => {...}
    );
    Dynamic import
    3
    JavaScript
    https://github.com/tc39/proposal-dynamic-import
    est passé au dernier stade avant adoption

    View Slide

  105. #WebPerformance / 9 juin 2018
    @guillaumeehret
    3
    JavaScript

    View Slide

  106. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Mais encore
    3
    SSR
    Pré compilation
    ...
    JavaScript

    View Slide

  107. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Polyfill sur CDN
    3
    src="https://cdn.polyfill.io/v2/polyfill.min.js">

    Size (min) 1370 8212 464 26430 6652
    Size (min+gz) 514 2435 285 8497 2018
    JavaScript

    View Slide

  108. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  109. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Mesurer
    Transporter
    Limiter
    Cacher
    Offline
    Anticiper
    1
    6
    2
    5
    4
    3

    View Slide

  110. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    La ressource la plus rapide et la mieux
    optimisée est une ressource qui n'est
    pas envoyée.
    4

    View Slide

  111. #WebPerformance / 9 juin 2018
    @guillaumeehret
    4
    App Data

    View Slide

  112. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Cache serveur
    Cloud base de données ou I/O
    Temps fluctuant
    Abtraction Spring @Cacheable
    4

    View Slide

  113. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Cache ressource
    4
    Browser
    Server
    Cache
    Request

    View Slide

  114. #WebPerformance / 9 juin 2018
    @guillaumeehret
    4
    Browser
    Cache
    Server
    Response

    View Slide

  115. #WebPerformance / 9 juin 2018
    @guillaumeehret
    4
    Browser
    Cache
    Server
    Response

    View Slide

  116. #WebPerformance / 9 juin 2018
    @guillaumeehret
    4
    Browser
    Server
    Cache
    Si max-age n’est pas dépassé

    View Slide

  117. #WebPerformance / 9 juin 2018
    @guillaumeehret
    4
    Browser
    Cache
    Server
    Response

    View Slide

  118. #WebPerformance / 9 juin 2018
    @guillaumeehret
    4
    Browser
    Server
    Cache
    Si max-age n’est pas dépassé

    View Slide

  119. #WebPerformance / 9 juin 2018
    @guillaumeehret
    4
    Browser
    Server
    Cache
    Si max-age est dépassé
    Request

    View Slide

  120. #WebPerformance / 9 juin 2018
    @guillaumeehret
    4
    Browser
    Cache
    Server
    Response
    304

    View Slide

  121. #WebPerformance / 9 juin 2018
    @guillaumeehret
    4
    Cache busting
    Versionner vos fichiers de ressources
    Pour le HTML limitez le max-age

    View Slide

  122. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  123. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Mesurer
    Transporter
    Limiter
    Cacher
    Offline
    Anticiper
    1
    6
    2
    5
    4
    3

    View Slide

  124. #WebPerformance / 9 juin 2018
    @guillaumeehret
    5
    https://giphy.com

    View Slide

  125. #WebPerformance / 9 juin 2018
    @guillaumeehret
    4
    5

    View Slide

  126. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Services workers
    4
    5

    View Slide

  127. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Web workers
    4
    5

    View Slide

  128. #WebPerformance / 9 juin 2018
    @guillaumeehret
    4
    5

    View Slide

  129. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  130. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Service worker
    5
    JS SW
    cache

    View Slide

  131. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Service worker
    5
    SW
    cache
    HTTPS
    JS

    View Slide

  132. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  133. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  134. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  135. #WebPerformance / 9 juin 2018
    @guillaumeehret
    5
    SW
    cache
    JS
    networkFirst
    cacheFirst
    fastest
    cacheOnly
    networkOnly

    View Slide

  136. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  137. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  138. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  139. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  140. #WebPerformance / 9 juin 2018
    @guillaumeehret
    5
    SW
    cache
    JS
    networkFirst
    cacheFirst
    fastest
    cacheOnly
    networkOnly

    View Slide

  141. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  142. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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);
    });
    }

    View Slide

  143. #WebPerformance / 9 juin 2018
    @guillaumeehret
    5

    View Slide

  144. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Mesurer
    Transporter
    Limiter
    Cacher
    Offline
    Anticiper
    1
    6
    2
    5
    4
    3

    View Slide

  145. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Charger le plus important tout de
    suite et le reste plus tard

    View Slide

  146. #WebPerformance / 9 juin 2018
    @guillaumeehret
    6
    preload

    View Slide

  147. #WebPerformance / 9 juin 2018
    @guillaumeehret
    6
    preload
    onload="this.rel='stylesheet'">
    as="document">

    View Slide

  148. #WebPerformance / 9 juin 2018
    @guillaumeehret
    prefetch
    6

    View Slide

  149. #WebPerformance / 9 juin 2018
    @guillaumeehret
    prefetch
    6
    href="https://fonts.googleapis.com/css?family=Roboto:400"
    onload="this.rel='stylesheet'">

    View Slide

  150. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    Mesurer
    Transporter
    Limiter
    Cacher
    Offline
    Anticiper
    1
    6
    2
    5
    4
    3

    View Slide

  151. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  152. #WebPerformance / 9 juin 2018
    @guillaumeehret
    Notre objectif
    first load refresh offline
    1
    < 1s
    7.4s
    first paint
    18.2s
    loadtime
    1.6Mb
    size
    Départ

    View Slide

  153. #WebPerformance / 9 juin 2018
    @guillaumeehret
    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

    View Slide

  154. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    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/

    View Slide

  155. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    First do it, then do it right, then do it
    better...
    Addy Osmani

    View Slide

  156. #WebPerformance / 9 juin 2018
    @guillaumeehret
    @guillaumeehret
    #WebPerformance / 9 juin 2018
    https://github.com/javamind/itogo-webperf
    Thanks

    View Slide