Today, a Web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our websites look good across that spectrum of devices we may forget that we need to make sure that our websites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet. In this session, we’ll look at the tools that can help you understand, measure and improve the performance of your websites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply. This presentation builds upon Dave Olsen’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
5. The average weight of a home page today.
Source: HTTP Archive
Images JavaScript
Flash
HTML
CSS
Other
77%
1.5 MB
6. “RWD makes your website
mobile friendly.”
The marketing of
responsive web design...
7. RWD sites whose
small screen design
weighs the same as the
large screen design.
Source: Podjarny
72%
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. Over Downloading
Download & Hide
Download & Shrink
Download & Ignore
PRIMARY PERFORMANCE ISSUES FOR RWD
Poor Networks
High Latency
Variable Bandwidth
Packet Loss
16. Introducing the Team
“Dave”
full stack dev
“Adam”
front-end dev
Any resemblance to real persons, living or dead, is purely coincidental. Serious.
17. 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.
18. First Steps
The Six Parts of a Project
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitoring
19. 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
20. 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/
23. 1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitoring
Design & Performance
The Six Parts of a Project
24. 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.
25. Responsive Images
Most solutions are silly & verbose.
Focus on properly formatting
images. Lazy load them & don’t
worry about “high DPI.”
Addy Osmani’s Tool List
http://addyosmani.com/blog/image-
optimization-tools/
31. Best request is no request.
Worst request is one that
blocks the parser.
Source: Ilya Grigorik
- Ilya Grigorik
@ilyagrigorik
“
”
Design & Performance
32. Corollary: The next best request
is the one not parsed.
Source: My brain
- Me
@dmolsen
“
”
Design & Performance
33. Design & Performance
Your goal when using the Network
Panel is to shorten & compress
the waterfall by focusing on the
critical path.
Focus on delivering content that’s
above the fold.
Remember, test the squishy too.
37. Programming & Performance
The Six Parts of a Project
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitoring
38. 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.
56. Deployment
The Six Parts of a Project
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitoring
57. Deployment
Finally getting to “traditional”
performance techniques...
Performance can’t simply be
tacked onto the end of a project.
58. Concatenate files within reason.
Minify files as appropriate.
Make sure the server supports file
compression & cache headers.
Deployment
Things to Keep in Mind...
66. 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:
67. WEB PERF TWEEPS TO FOLLOW
@ilyagrigorik
@andydavies
@souders @patmeenan
@stoyanstefanov
@tameverts @yoavweiss@scottjehl
just a sampling...