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

Web Performance

Quan
April 20, 2021

Web Performance

Quan

April 20, 2021
Tweet

More Decks by Quan

Other Decks in Programming

Transcript

  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.