Web Performance

1. SLIDESMANIA.COM WEB PERFORMANCE CRASH COURSE by @quannt
2. SLIDESMANIA.COM Hello! I’m Quan Frontend developer based in Tokyo. Worked at LINE Corp, tripla K.K. @quannt91
3. SLIDESMANIA.COM WHY DOES PERFORMANCE MATTER
4. SLIDESMANIA.COM Pinterest reduced perceived wait times by 40% and this increased search engine traffic and sign-ups by 15%.
5. 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/
6. 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
7. SLIDESMANIA.COM HOW DO WE IMPROVE THE PERFORMANCE?
8. SLIDESMANIA.COM Two main concerns - The web page loads fast. - The web page stays fast on interactions.
9. SLIDESMANIA.COM Loading fast - How browsers render a web page in the first place
10. SLIDESMANIA.COM
11. SLIDESMANIA.COM Step 1: Construct the Document Object Model (DOM), downloading all external resources (css files, images, js files, etc)
12. SLIDESMANIA.COM Step 2: Construct the CSS Object Model (CSSOM)
13. 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.
14. 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.
15. SLIDESMANIA.COM BUT WAIT, I LIED
16. 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.
17. 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!
18. SLIDESMANIA.COM Loading fast
19. SLIDESMANIA.COM Staying fast on user interactions • Screens are refreshed 60 times/second. • 1 second / 60 = 16.66ms/frame.
20. SLIDESMANIA.COM Staying fast on user interactions
21. SLIDESMANIA.COM Staying fast on user interactions • Avoid reflow (layout thrashing).
22. SLIDESMANIA.COM Staying fast on user interactions Don’t do this
23. SLIDESMANIA.COM Staying fast on user interactions Do this instead
24. SLIDESMANIA.COM Staying fast on user interactions • CSS files not placed in <head> • JS files placed in <head> • This is bad.
25. SLIDESMANIA.COM Staying fast on user interactions • CSS files not placed in <head> • JS files placed in <head> • This is better.
26. 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.
27. SLIDESMANIA.COM Thank you! Do you have any questions?
28. 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