Successfully reported this slideshow.
Your SlideShare is downloading. ×

How to train your content- so it doesn't slow you down...

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 47 Ad
Advertisement

More Related Content

Similar to How to train your content- so it doesn't slow you down... (20)

More from IWMW (20)

Advertisement

How to train your content- so it doesn't slow you down...

  1. 1. HOW TO TRAIN YOUR WEB CONTENT So it doesn't slow you down...
  2. 2. WHAT’S IN AN IMAGE?Quite a lot as it turns out
  3. 3. Large hero images
 are everywhere (sometimes they’re autoplay videos)
  4. 4. 100 Mbps 
Retina Display 
Fast CPU
  5. 5. Average Bytes per Content Type 2011 Other 5kbFonts 1kbImages 228kb Scripts 80kb HTML 42kb Stylesheets 20kb Source: https://httparchive.org/ 376kb 60% 21% 5%
  6. 6. Video 57kb Other 5kb Fonts 116kb Images 1813kb Scripts 471kb HTML 45kb Stylesheets 106kb Average Bytes per Content Type 2019 Source: https://httparchive.org/ 2613kb 69% 18% 4%
  7. 7. CSS JS
 fonts images
 Who’s responsible?

  8. 8. GIF (1987) JPEG (1992) 
 PNG (1996) SVG (1998-2008) 
 The most common image formats on the web 2019
  9. 9. First image on the web 1992
  10. 10. Pace Layering Images With thanks to Jeremy Keith
  11. 11. Video formats on the web H.261 (1984, 1988) MPEG-1 (1988-1991) MPEG-2 H.263 (1996-2015) MPEG-4 H.264 (1999-current) HEVC H.265 (2015 - current)  VP8 VP9 Ogg Vorbis DIVX 3IVX Sorenson Real
  12. 12. THE ALTERNATIVES
  13. 13. Image formats WebP
  14. 14. Image formats WebP
  15. 15. Other 1% GIF 20% SVG 3% WebP 1% PNG 30% JPG 45% Image requests by format 2019 Source: https://httparchive.org/
  16. 16. Image formats WebP
  17. 17. Image formats JPEG XR
  18. 18. Image formats JPEG XR
  19. 19. Optimisation Tools ImageOptim
  20. 20. PERFORMANCE AND USER EXPERIENCE We hate to wait
  21. 21. Is it happening? First Paint (FP) / 
 First Contentful Paint (FCP)
 Is it useful? First Meaningful Paint (FMP) / 
 Hero Element 
 Timing
 Is it usable? Time to Interactive (TTI) 

  22. 22. Critical 
 Path CSS JS
 fonts images

  23. 23. Performance
  24. 24. PERFORMANCE AND ACCESSIBILITY How issues are amplified
  25. 25. "Disability is an amplifier: a usability issue that slows a person down by 5 seconds might actually become  a complete blocker for someone with a disability.”
 Derek Featherstone Simply Accessible @feather
  26. 26. The most important thing to consider is the User Experience rather just checking items off a checklist Alt tags Color contrast ARIA Roles
  27. 27. There is also the legislation to consider… Section 508 Section 255 ADA
  28. 28. https://twitter.com/jmspool/status/884117945999380481
  29. 29. Web Accessibility
  30. 30. When do we start thinking about Performance & Accessibility?
  31. 31. When do we start thinking about Performance & Accessibility? Who’s responsible?
  32. 32. User Research Information Architecture Content Strategy Interaction Design Development Web Accessibility Accessibility Performance
  33. 33. IMPROVING PERFORMANCE AT SOURCE Look, no server!
  34. 34. Improve performance with CDN use
  35. 35. “Serverless” image manipulation on the fly
  36. 36. “Serverless” image manipulation on the fly
  37. 37. 374kb
  38. 38. 374kb 33kb 320w 91kb 600w 176kb 900w 273kb 1200w
  39. 39. CONCLUSION
  40. 40. Take Aways Benefits
  41. 41. ✓ Improves user experience and accessibility ✓ Lowers bandwidth costs Take Aways Benefits
  42. 42. Take Aways Checklist
  43. 43. ✓ Choose the right format ✓ Optimise your images (locally or online) ✓ Make sure there’s no blocks (scripts etc.) ✓ Use a CDN ✓ Optimise on the site Take Aways Checklist

×