A short talk on web performance given at Refresh Pittsburgh. Discusses how web performance fixes can be worked into a normal development workflow. Focuses on tweaks for responsive design sites.

1. Web Performance &You
Dave Olsen, West Virginia University
Refresh Pittsburgh, June 4
@dmolsen, dmolsen.com

2. slideshare.net/dmolsenwvu
This presentation is available at:

3. Dave Olsen
Professional Technologist
West Virginia University
About Moi
@dmolsen

4. The Mobile Book
• Covers everything mobile
• Produced by Smashing
Media
• Chapters by Peter-Paul
Koch, Stephanie Rieger,
Brad Frost, Trent Walton,
me & others
http://the-mobile-book.com

5. Why ShouldYou Care
About Web Performance?
Part Une:

6. brad’s iceberg
© Brad Frost
© Brad Frost

7. brad’s iceberg
© Brad Frost© Brad Frost
© Brad Frost

8. The way in which CSS media
queries have been promoted for
mobile hides tough problems
and gives developers a false
promise of a simple solution for
designing for small screens.
Source: Jason Grigsby on Speakerdeck
“
”- Jason Grigsby
@grigs

9. RWD could also mean
responsible web design.

10. Over Downloading
Download & Hide
Download & Shrink
Download & Ignore
PRIMARY PERFORMANCE ISSUES FOR RWD
Poor Networks
High Latency
Variable Bandwidth
Packet Loss

11. Adding Web Performance
to Your Workflow
Part Deux:

12. Introducing the Team
Because performance is a team effort.

13. Introducing the Team
“Dave”
full stack dev
“Adam”
front-end dev
Any resemblance to real persons, living or dead, is purely coincidental. Serious.

14. The New Project Should...
1. Look cool
2.Have pizzazz
3.Use brand colors
...
99. Be fast
98. Look good on an iPhone
First Steps

15. Mobile first means
performance first.
First Steps

16. Set a Performance Budget
First Steps
A budget is a guide, not a hard & fast limit.
Performance tweaks are compromises.
http://timkadlec.com/2013/01/setting-a-performance-budget/

17. First Steps
Best request is no request.
Worst request is one that
blocks the parser.
Source: Ilya Grigorik
- Ilya Grigorik
@ilyagrigorik
“
”

18. First Steps
Corollary: The next best request
is the one not parsed.
Source: My brain
- Me
@dmolsen
“
”

19. Web Performance Assumptions
Faster is better. Smaller is better.
First Steps

20. Web Perf Optimization Tenets
Reduce requests. Reduce asset size.
Reduce page render time.
First Steps

21. First Steps
Learn to Love the Inspector
http://bit.ly/15sWYsx

22. First Steps
Save Yourself a Headache &
Disable Your Cache When Testing

23. Design & Performance
Things to Keep in Mind...
Images are the devil. Consider using
CSS, sprites, symbol fonts, & SVG.
display: none; is the devil.
Lots of things are the devil. Just
understand the trade-offs when using
social widgets, web fonts & CSS.
The “devil” talk is tongue-in-cheek. Serious.

24. Design & Performance
Explaining the Network Panel:
Resource Size
transferred size
real size
re-order

25. Design & Performance
latency + download
latency
re-order
Explaining the Network Panel:
Latency

26. Design & Performance
domcontentloaded
onload
Explaining the Network Panel:
Events

27. Design & Performance
Your goal when using the Network
Panel is to shorten & compress
the waterfall.
Remember, test the squishy too.

28. Design & Performance
save HAR file locally
Explaining the Network Panel:
Saving Files for Comparison

29. Design & Performance
Explaining the Profiles Panel:
CSS Selectors

30. Design & Performance
Explaining the Profiles Panel:
CSS Selectors

31. Responsive Images
Most solutions are silly & verbose.
Focus on properly formatting
images. Lazy load them & don’t
worry about “high DPI.”

32. Programming & Performance
Things to Keep in Mind...
JavaScript libraries are devils. Consider
using microjs.com or vanilla JS.
Defer loading of JavaScript. Use
onTouch events when appropriate.
Reflow & repaints are the devil.
The “devil” talk is tongue-in-cheek. Serious.

33. Programming & Performance
Explaining the Timeline Panel

34. PageSpeed Insights Extension
https://developers.google.com/speed/pagespeed/insights
Testing

35. Testing
WebPagetest
http://www.webpagetest.org

36. Testing
BrowserStack
http://browserstack.com

37. Deployment
Finally getting to “traditional”
performance techniques...
Performance can’t simply be
tacked onto the end of a project.

38. Concatenate files within reason.
Minify files as appropriate.
Make sure the server supports file
compression & cache headers.
Deployment
Things to Keep in Mind...

39. mod_pagespeed Automates a Lot
http://developers.google.com/speed/pagespeed/mod
Deployment

40. Google Analytics’ Site Speed
Monitoring

41. WEB PERF TWEEPS TO FOLLOW
@ilyagrigorik
@andydavies
@souders @patmeenan
@stoyanstefanov
@tameverts @yoavweiss@scottjehl
just a sampling...

42. Questions?

43. Dave Olsen
Professional Technologist
West Virginia University
@dmolsen
Thanks for Listening
Illustrations by Graham Curry