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

Web Performance

April 20, 2021

Web Performance


April 20, 2021

More Decks by Quan

Other Decks in Programming


  1. SLIDESMANIA.COM Pinterest reduced perceived wait times by 40% and this

    increased search engine traffic and sign-ups by 15%.
  2. 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/
  3. 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
  4. SLIDESMANIA.COM Two main concerns - The web page loads fast.

    - The web page stays fast on interactions.
  5. SLIDESMANIA.COM Step 1: Construct the Document Object Model (DOM), downloading

    all external resources (css files, images, js files, etc)
  6. 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.
  7. 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.
  8. 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.
  9. 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!
  10. SLIDESMANIA.COM Staying fast on user interactions • Screens are refreshed

    60 times/second. • 1 second / 60 = 16.66ms/frame.
  11. SLIDESMANIA.COM Staying fast on user interactions • CSS files not

    placed in <head> • JS files placed in <head> • This is bad.
  12. SLIDESMANIA.COM Staying fast on user interactions • CSS files not

    placed in <head> • JS files placed in <head> • This is better.
  13. 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.