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

The State of the Web

The State of the Web

Web performance is a crucial pillar of user experience, yet it’s still the underdog. Oftentimes there’s no budget for tooling or development and metrics are only being checked after features have hit production. As the builders of the Web it’s our job to create not only the best, but also the fastest and most accessible Web for everyone. Let’s acknowledge our privilege and learn to build a fast an accessible Web for everyone. This talk will set the necessary context for understanding why performance is important. We will go through most and least important metrics, how they’re being calculated, setting meaningful performance budgets and tooling. You’ll leave with comprehensive and actionable performance knowledge.

Karolina Szczur

August 31, 2017
Tweet

More Decks by Karolina Szczur

Other Decks in Programming

Transcript

  1. 51% of 7 billion people have access to the Internet

    Read: Q2 2017 Global Digital Statshot
  2. 7 mb/s is the average network speed worldwide Read: Akamai's

    State of the Internet Report for Q1 2017
  3. Read: Beyond the Bubble: The Real World Performance 0 3

    7 10 13 Brazil Indonesia India Germany Number of hours worked for 500 MB of data
  4. 3 mb is the average site size Please note that

    averages aren’t statistically accurate. Read Ilya Grigorik’s “The average page is a myth”.
  5. If we’re building the web platform from the position of

    privilege and lack of empathy, it results in exclusionary, subpar experiences.
  6. One of the ways to significantly improve performance starts with

    understanding how the browser analyses and serves assets.
  7. HTML 100 ms 200 ms 300 ms 400 ms 500

    ms 600 ms 700 ms CSS JAVASCRIPT FONT
  8. A critical request contains assets that are necessary to render

    the content within the users’ viewport.
  9. 1. Cache aggressively 2. Enable server-side compression 3. Prioritise critical

    assets 4. Use content delivery networks Performance checklist
  10. Images can account for most of transferred payload, which is

    why imagery optimisation can yield the biggest performance wins.
  11. Vector Resolution independent, usually significantly smaller in size. Perfect for

    logos, iconography and simple assets comprising of basic shapes (lines, polygons, circles and points). Raster Offers much more detailed results. Ideal for photographs.
  12. JPEG imagery with many colours (photos) PNG-8 imagery with a

    few colours PNG-24 imagery with partial transparency GIF animated imagery Video for more lightweight GIFs (<video autoplay muted loop>) Read: Choosing an Image Format
  13. WebP is 25-34% smaller than other formats. It can be

    safely used with fallbacks. Read: A new image format for the Web
  14. Guetzli can produce up to 35% smaller JPEGs (but be

    wary of its speed). See: Guetzli on Github
  15. The srcset attribute <img srcset="cat-320w.jpg 320w,
 cat-480w.jpg 480w,
 cat-800w.jpg 800w"


    sizes="(max-width: 320px) 100vw,
 (max-width: 480px) 80vw,
 800px"
 src="cat-800w.jpg" alt="Cat"> 
 Condition (media query) Width relative to viewport Width of the image source
  16. The picture element <picture>
 <source media="(min-width: 40em)” srcset="big.jpg 1x, big-hd.jpg

    2x">
 <source
 srcset="small.jpg 1x, small-hd.jpg 2x">
 <img src="fallback.jpg" alt="">
 </picture> 
 Condition (media query) Image source to use Read: Responsive Images 101
  17. CDNs can take out a lot of complexity from serving

    responsive, optimised assets on image-heavy sites.
  18. 1. Choose the right format 2. Use vector wherever possible

    3. Reduce the quality if change is unnoticeable 4. Experiment with new formats 5. Optimise with tools and algorithms 6. Learn about srcset and picture 7. Use an image CDN Performance checklist
  19. We need a font loading strategy to prevent users from

    not being able to access content. Read: A Comprehensive Guide to Font Loading Strategies
  20. 1. Choose the right format 2. Audit the font selection

    3. Use Unicode-range subsetting (carefully!) 4. Establish a font loading strategy Performance checklist
  21. Unpacked JavaScript can become 2-3x bigger than what we’ve sent

    down the wire. Read: JavaScript start-up performance
  22. Parse and compile times are so high it takes 8

    seconds to reach an interactive state.
  23. 1. Monitor how much JavaScript is delivered 2. Get rid

    of unnecessary dependencies 3. Implement code splitting 4. Consider framework alternatives Performance checklist
  24. 1. Leverage user-centric metrics 2. Set performance budgets 3. Monitor

    continuously 4. Build performance awareness and empathy Performance checklist
  25. Delivery-oriented metrics User-centric metrics Speed Index First Paint onLoad First

    Meaningful Paint onDomLoaded Visually Complete onContentLoaded Time to Interactive
  26. Caring about performance shouldn’t be a business goal. …but if

    you need to sell it through possible revenue and engagement gains: It’s about fundamental empathy.
  27. As technologists, it’s our responsibility to not hijack attention and

    time. timewellspent.io We need to be conscious of human focus.