Auditing for Performance

How do we help clients see where they can improve their site’s performance with incremental changes that they can work on over time? Susan will go through techniques she uses to test a site for performance and write up recommendations, including providing example code for the client to use in their own implementation. This talk will go over high-level ideas of performance and auditing a site, the tools you use, and how to communicate back recommendations to the client.

Transcript

1. Auditing for Performance @susanjrobertson susanjeanrobertson.com
2. Who is Susan? "
3. The Why The How The Ideas
4. The Why?
5. “13% of Americans own a smartphone but don’t have home broadband – up from 8% in 2013 ” –PewInternet Research TWIT TER.COM/PEWINTERNET/STATUS/740251500413227009
6. “51% of smartphone-dependent Americans frequently (or at least occasionally) reach their max monthly data allowance.” –PewInternet Research P E W I N T E R N E T.O R G / 2 0 1 5 / 0 4 / 0 1 / U S - S M A R T P H O N E - U S E - I N - 2 0 1 5
7. GQ http://digiday.com/publishers/gq-com-cut-page-load-time-80-percent/
8. Performance is also about accessibility, getting people content they need to live in our culture.
9. We don’t all have the latest device, the fastest broadband, and unlimited data.
10. AND? Even if we have those things, we aren’t always on the fastest broadband.
11. That’s Why Performance Matters
12. The How
13. Begin Spelunking
14. https://flic.kr/p/6ViZFA
15. WebPage Test ❤
16. https://www.webpagetest.org
19. PageSpeed Insights
21. Network Tab
25. Communicate
26. Find out high impact URLs
27. Report Back
28. Create documents
29. Make suggestions
30. Back yourself up Use supporting URLs as much as you can, to give your argument more weight.
31. The Ideas
32. CSS
33. CriticalCSS
34. Minimize and Gzip! Fun fact: if you write your CSS with the properties in alphabetical order, it gzips just a bit smaller.
35. Images
36. First steps • Far Future Caching • Optimize, Optimize Optimize!
37. Moar ideas • Lazy loading • `<picture>` or `srcset`
38. <img srcset=“/images/build/photos/hello-sm.png 480w, /images/build/photos/hello-lg.png 800w" sizes="(max-width: 40em) 100vw, 25vw" src=“/images/build/photos/hello-sm.png” alt=“Hello!">
39. Fonts
40. Read Zach’s Research https://www.zachleat.com/web/critical-webfonts/
41. Summary • Test, Test, Test • Write up your findings • Find wins in the CSS, Images, and Fonts
42. The beginning
43. Thank you @susanjrobertson susanjeanrobertson.com