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

Optimiser les performances d'une webapp

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

Dev-Mind

November 08, 2017
Tweet

More Decks by Dev-Mind

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  10. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne

    View full-size slide

  11. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne
    3 Mb en 2017
    Wifi
    30Mb/s

    0.5 sec

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne

    View full-size slide

  21. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne
    1

    View full-size slide

  38. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne
    1

    View full-size slide

  39. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne
    1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  46. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne






    JavaScript
    HTML
    2

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  50. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne
    2

    View full-size slide

  51. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne
    2

    View full-size slide

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

    View full-size slide

  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)

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  84. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne
    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 full-size slide

  85. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne
    3

    type="image/webp"/>



    Images

    View full-size slide

  86. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne
    3

    type="image/webp"/>



    Images

    View full-size slide

  87. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne
    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 full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  106. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne
    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 full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  143. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne
    5

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  147. #WebPerformance / 9 novembre 2017
    @guillaumeehret
    JUG Lausanne
    6
    preload
    onload="this.rel='stylesheet'">
    as="document">

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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/

    View full-size slide

  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

    View full-size slide

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

    View full-size slide