Slide 1

Slide 1 text

What I did to improve performance score on Lighthouse @yayoc

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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)

Slide 4

Slide 4 text

Optimization techniques

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

In the future

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Appendix ▷ HTTP Caching: ▷ PRPL Pattern: ▷ PWA example: ▷ Performance budget: udget/# ▷ Service worker example: e-worker ▷ Webpack & http2

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

We are hiring

Slide 13

Slide 13 text

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