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
   

   View Slide

2. Who is Susan?
   
   "
   
   
   

   View Slide

3. The Why
   The How
   The Ideas
   

   View Slide

4. The Why?
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. GQ
   http://digiday.com/publishers/gq-com-cut-page-load-time-80-percent/
   

   View Slide

8. Performance is also about
   accessibility, getting people content
   they need to live in our culture.
   

   View Slide

9. We don’t all have the latest device,
   the fastest broadband, and
   unlimited data.
   

   View Slide

10. AND? Even if we have those things,
    we aren’t always on the fastest
    broadband.
    

    View Slide

11. That’s Why Performance Matters
    

    View Slide

12. The How
    

    View Slide

13. Begin Spelunking
    

    View Slide

14. https://flic.kr/p/6ViZFA
    

    View Slide

15. WebPage Test
    ❤
    

    View Slide

16. https://www.webpagetest.org
    

    View Slide

17. View Slide

18. View Slide

19. PageSpeed Insights
    
    

    View Slide

20. View Slide

21. Network Tab
    
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. Communicate
    

    View Slide

26. Find out high impact URLs
    

    View Slide

27. Report Back
    

    View Slide

28. Create documents
    

    View Slide

29. Make suggestions
    

    View Slide

30. Back yourself up
    Use supporting URLs as much as you can, to give
    your argument more weight.
    

    View Slide

31. The Ideas
    

    View Slide

32. CSS
    

    View Slide

33. CriticalCSS
    

    View Slide

34. Minimize and Gzip!
    Fun fact: if you write your CSS with the properties in alphabetical
    order, it gzips just a bit smaller.
    

    View Slide

35. Images
    

    View Slide

36. First steps
    • Far Future Caching
    • Optimize, Optimize Optimize!
    

    View Slide

37. Moar ideas
    • Lazy loading
    • `` or `srcset`
    

    View Slide

38. /images/build/photos/hello-lg.png 800w"
    sizes="(max-width: 40em) 100vw, 25vw"
    src=“/images/build/photos/hello-sm.png” alt=“Hello!">
    

    View Slide

39. Fonts
    

    View Slide

40. Read Zach’s Research
    https://www.zachleat.com/web/critical-webfonts/
    

    View Slide

41. Summary
    • Test, Test, Test
    • Write up your findings
    • Find wins in the CSS, Images, and Fonts
    

    View Slide

42. The beginning
    

    View Slide

43. Thank you
    @susanjrobertson susanjeanrobertson.com
    

    View Slide