Slide 1

Slide 1 text

SLIDESMANIA.COM WEB PERFORMANCE CRASH COURSE by @quannt

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

SLIDESMANIA.COM WHY DOES PERFORMANCE MATTER

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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/

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

SLIDESMANIA.COM HOW DO WE IMPROVE THE PERFORMANCE?

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

SLIDESMANIA.COM

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

SLIDESMANIA.COM BUT WAIT, I LIED

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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!

Slide 18

Slide 18 text

SLIDESMANIA.COM Loading fast

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

SLIDESMANIA.COM Staying fast on user interactions

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

SLIDESMANIA.COM Staying fast on user interactions Do this instead

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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