SLIDESMANIA.COM WEB PERFORMANCE CRASH COURSE by @quannt

SLIDESMANIA.COM Hello! I’m Quan Frontend developer based in Tokyo. Worked at LINE Corp, tripla K.K. @quannt91

SLIDESMANIA.COM WHY DOES PERFORMANCE MATTER

SLIDESMANIA.COM Pinterest reduced perceived wait times by 40% and this increased search engine traffic and sign-ups by 15%.

SLIDESMANIA.COM Globally, roughly one in three global hotel room nights are booked via mobile, and more than 50 percent of traffic arrives on Expedia Group sites via mobile. https://skift.com/2019/02/15/expedia-winning-at-mobile-in-southeast-asia-new-study/

SLIDESMANIA.COM Did you know? - Loading time is a major factor in page abandonment and loyalty; 53% of users report that they abandon sites that take more than three seconds to load. - Slower sites are deemed lower in search engine ranking. Since 2018, Google has implemented site speed as a ranking signal in its mobile searches https://developer.akamai.com/blog/2016/09/14/mobile-load-time-user-abandonment https://searchengineland.com/google-speed-update-page-speed-will-become-ranking-factor-mobile-search-289904

SLIDESMANIA.COM HOW DO WE IMPROVE THE PERFORMANCE?

SLIDESMANIA.COM Two main concerns - The web page loads fast. - The web page stays fast on interactions.

SLIDESMANIA.COM Loading fast - How browsers render a web page in the first place

SLIDESMANIA.COM

SLIDESMANIA.COM Step 1: Construct the Document Object Model (DOM), downloading all external resources (css files, images, js files, etc)

SLIDESMANIA.COM Step 2: Construct the CSS Object Model (CSSOM)

SLIDESMANIA.COM Step 2: Construct the CSS Object Model (CSSOM) ● CSS is render-blocking. ● Make CSS as lean as possible on the first page load, in-line it. (This is why people put CSS in the head tag). ● Usse media types and media queries to mark CSS as non-render-blocking.

SLIDESMANIA.COM Step 3: Render Tree, merge DOM and CSSOM. Step 4: Layout, calculating width and height, where to put the nodes. Step 5: Paint, put all the nodes on the screen.

SLIDESMANIA.COM BUT WAIT, I LIED

SLIDESMANIA.COM Step 2-ish: Javascript ● Downloading and executing JS blocks the construction of the DOM. ● Downloading, executing CSS, constructing the CSSOM blocks executing JS. ● JS can make changes on both the DOM and the CSSOM.

SLIDESMANIA.COM Okay, then now what ● Minimize the number of resources by using: defer, async, code splitting, etc. ● Minimize the number of bytes: minification, caching, etc. ● If they must be downloaded, download them ASAP, or inline them. Every second counts!

SLIDESMANIA.COM Loading fast

SLIDESMANIA.COM Staying fast on user interactions ● Screens are refreshed 60 times/second. ● 1 second / 60 = 16.66ms/frame.

SLIDESMANIA.COM Staying fast on user interactions

SLIDESMANIA.COM Staying fast on user interactions ● Avoid reflow (layout thrashing).

SLIDESMANIA.COM Staying fast on user interactions Don’t do this

SLIDESMANIA.COM Staying fast on user interactions Do this instead

SLIDESMANIA.COM Staying fast on user interactions ● CSS files not placed in ● JS files placed in ● This is bad.

SLIDESMANIA.COM Staying fast on user interactions ● CSS files not placed in ● JS files placed in ● This is better.

SLIDESMANIA.COM Staying fast on user interactions ● Prefer requestAnimationFrame over setTimeout for delayed work. ● Avoid long running tasks, it may eat up the next frame's budget. ● Offload long running tasks to Web workers if possible, but there are catches.

SLIDESMANIA.COM Thank you! Do you have any questions?

SLIDESMANIA.COM References https://developers.google.com/web/updates/2018/09/i nside-browser-part1 https://developers.google.com/web/fundamentals/perf ormance/get-started https://developers.google.com/web/fundamentals/perf ormance/rendering https://ui.toast.com/fe-guide/en_PERFORMANCE