Today, a web page can be delivered to a desktop computer, a television, or a handheld device like a tablet or a phone. While a technique like responsive design helps ensure that our web sites look good across that spectrum of screen sizes we may forget our web sites should also be able to perform equally well across that same spectrum. While more and more of our users are shifting their Internet usage to these more varied platforms and connection speeds our development practices might not be keeping up.In this session we’ll review why optimizing web performance should be an important step in the development of responsive websites. We’ll look at the tools that can help you understand and measure the performance of those sites as well as discuss front-end and server-side techniques that can be used to help you improve their performance. Finally, since the best way to test your site is to have real devices in hand, we’ll share “lessons learned” so you can set-up your own device lab similar to what we have at West Virginia University.This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”

1. Web Performance &You
Dave Olsen, West Virginia University
HighEdWeb Arkansas, July 26
@dmolsen, dmolsen.com

2. slideshare.net/dmolsenwvu
This presentation will be
available later today 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. What I’ll Talk About
• Quick Intro About Why We
Should Care About Web Perf
• How to Add Performance to
Your Workflow
• Setting Up a Device Lab

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

7. The average weight of a web page today.
Source: HTTP Archive
Images JavaScript
Flash
HTML
CSS
Other
77%
1.3 MB

8. RWD sites whose
small screen design
weighs the same as the
large screen design.
Source: Podjarny
72%

9. Users expect your
mobile site to load
as quickly as your
desktop site.
71%
Source: Gomez

10. Bounce Rate
Conversion
Rate Cart Size PageViews
200ms - - - -1.2%
500ms -4.7% -1.9% - -5.7%
1000ms -8.3% -3.5% -2.1% -9.4%
Case Study:
Mobile Performance Effect on Business
Source: Web Performance Today

11. brad’s iceberg
© Brad Frost

12. 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

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

14. RWD could also mean
responsible web design.

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

16. Adding Web Performance
to Your Workflow
Part Deux:

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

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

19. Parts of a Project
The Six Parts of a Project*
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitoring
* - For the purposes of this talk.

20. First Steps
The Six Parts of a Project
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitoring

21. 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

22. Mobile first means
performance first.
First Steps

23. 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/

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

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

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

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

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

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

30. 1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitoring
Design & Performance
The Six Parts of a Project

31. Design & Performance
Things to Keep in Mind...
Images are the devil. Consider using
CSS, sprites, symbol fonts, & SVG.
display: none; is definitely 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.

32. Design & Performance
Explaining the Network Panel:
The Waterfall

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

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

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

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

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

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

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

40. CodeKit
CodeKit:Web Perf in Your Workflow
http://incident57.com/codekit/
Design & Performance

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

42. Programming & Performance
The Six Parts of a Project
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitoring

43. 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.

44. Programming & Performance
Explaining the Timeline Panel

45. Test & Optimize Performance with jsPerf
http://jsperf.com
Programming & Performance

46. Testing
The Six Parts of a Project
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitoring

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

48. Remote Debugging
Testing

49. Google Analytics Site Speed
http://www.httpwatch.com
IE & Firefox Performance Issues
Testing

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

51. Google Analytics Site Speed
http://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basics
WebPagetest - Beyond the Basics
Testing

52. Google Analytics Site Speed
Customizing WebPagetest:
Capturing Events After onLoad
Testing

53. Customizing WebPagetest:
Blackholes for Requests
Testing

54. Google Analytics Site Speed
Customizing WebPagetest:
Scripting & Custom Viewports
Testing

55. Customizing WebPageTest:
Video Comparison
Testing

56. Customizing WebPageTest:
Video Comparison - Small Viewport
Testing

57. charlesproxy.com
SLOWING THINGS DOWN
ThrottleCharles
Testing

58. Using Charles Proxy
http://blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/
Testing

59. Testing
BrowserStack
http://browserstack.com

60. Deployment
The Six Parts of a Project
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitoring

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

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

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

64. The Six Parts of a Project
Monitoring
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitoring

65. Google Analytics’ Site Speed
Monitoring

66. PageSpeed Insights Extension
https://developers.google.com/speed/pagespeed/insights
Monitoring

67. Setting Up a Device Lab
Part Trois:

68. eBay
MobileKarma.com
Cellphone store leftovers
Open device labs
GET YOUR HANDS ON
REAL DEVICES
http://flic.kr/p/7972f6

69. OpenDeviceLab.com

70. Base on:
WiFi-capable, Analytics
Rank, OS, Screen
Dimensions, & Cost
Suggested focus:
iPod Touch, mid-level
Android, high-end Android,
a tablet, Blackberry,
Windows Phone 7
HOW TO DECIDE WHICH TO GET
iPod Touch w/ Retina
Samsung Fascinate +
Google Nexus One +
$537
Example:

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

72. Questions?

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