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

What I did to improve performance score on Lighthouse

yayoc
September 15, 2017

What I did to improve performance score on Lighthouse

Slides presented at tokyoto.js

Nobuhide Yayoshi

yayoc

September 15, 2017
Tweet

More Decks by yayoc

Other Decks in Programming

Transcript

  1. What I did to improve performance
    score on Lighthouse
    @yayoc

    View full-size slide

  2. Hello!
    I am
    Nobuhide Yayoshi
    弥吉修英
    You can find me at:
    @yayoc
    Frontend engineer, iOS, FP
    At First Retailing

    View full-size slide

  3. Motivated by following sessions
    ▷ 1. Automated performance testing in preproduction with CI and OSS tools - Billy Hoffman
    (Rigor)
    ▷ 2. Optimize Prime: More pixels than meets the eye - Henri-R Brisard (Freelance)
    ▷ 3. Third parties: Friend or foe? (and how to deal with them) - Kristian Skoeld (MeasureWorks)
    ▷ 4. Perceived performance: The only kind that really matters - Eli Fitch (Social Tables)
    ▷ 5. The browser hacker's guide to instantly loading everything - Addy Osmani (Google)
    ▷ 6. Reliably measuring responsiveness in the wild - Shubhie Panicker (Google), Nic Jansma
    (SOASTA)
    ▷ 7. Creating a scalable, secure, offline-first, dynamic (static) website with React and serverless
    architecture - David Wells (Serverless)
    ▷ 8. Caches all the way down - Yoav Weiss (Akamai)
    ▷ 9. Blink and you’ll miss it: Building a progressive web app with HTTP/2 - Dean Hume (Settled)
    ▷ 10. Reverse engineering Amazon and the Guardian - David Fox (LookZook)

    View full-size slide

  4. Optimization techniques

    View full-size slide

  5. Setting up Monitoring tools
    Lighthouse on Jenkins
    ● Monitoring staging
    environment regularly
    ● Checking performance part
    mainly --perf option
    ● Custom Audit --config-path
    option
    Webpack-bundle-analyzer
    ● Identifying what is included in the bundle
    ● process.env.ANALYZER flag

    View full-size slide

  6. Network
    Adapting HTTP2, gzip
    ● Multiplexing
    ● gzip (nginx)
    Specify gzip_min_length, gzip_types

    View full-size slide

  7. Rendering
    1. Reducing bundle size with Webpack
    a. Tree shaking - Removes dead code
    i. Don’t use import * as hoge
    b. Code splitting - Uses dynamic import
    c. Scope hoisting - Decreased file size up to 200kb in my case
    i. Webpack 3, --display-optimization-bailout for debugging
    2. Avoiding render-block issues
    a. DOM -> CSSOM -> Render Tree
    b. CSS blocks rendering - Should load styles asynchronously if possible
    c. JS also blocks rendering - Should load JavaScript asynchronously if possible
    3. Fake header
    a. Showing static header until JavaScript is loaded
    4. Intersection Observer
    a. The component will not be loaded till it appears on screen
    b. https://github.com/thebuilder/react-intersection-observer
    c. https://github.com/openfresh/viewport-observer

    View full-size slide

  8. In the future

    View full-size slide

  9. In the future
    ● Service worker
    ○ Avoids round-trip
    ● Providing a separate bundle file for each browser
    ○ Babel presets env
    ○ /safari/bundle.js, /chrome/bundle.js,
    /fallback/bundle.js
    ● AggressiveSplittingPlugin
    ○ H2
    ● Performance Budget

    View full-size slide

  10. Appendix
    ▷ HTTP Caching: http://bit.ly/caching-checklist
    ▷ PRPL Pattern: bit.ly/prpl-pattern
    ▷ PWA example: http://hnpwa.com
    ▷ Performance budget:
    https://www.invisionapp.com/blog/setting-a-web-performance-b
    udget/#
    ▷ Service worker example:
    https://github.com/GoogleChrome/samples/tree/gh-pages/servic
    e-worker
    ▷ Webpack & http2
    https://medium.com/webpack/webpack-http-2-7083ec3f3ce6

    View full-size slide

  11. Thanks!
    Any questions?
    You can find me at:
    @yayoc
    [email protected]

    View full-size slide

  12. We are hiring

    View full-size slide

  13. Credits
    Special thanks to all the people who made and
    released these awesome resources for free:
    ▷ Presentation template by SlidesCarnival
    ▷ Photographs by Unsplash

    View full-size slide