1. Top Level Northwestern Pages Go
Mobile

2. Need for Speed!
Why prioritize speed?
* Data diets (almost… American like)
* Bad reception situations (almost… Telephone like)
* Slow networks (almost… Telegraph like)
* Roaming data can be expensive
* Network-starved regions
* Speed is awesome

3. Need for Speed!
Why prioritize speed?

4. Students from the World
Why prioritize speed?
# of Foreign Students:
2,426
Top Countries:
China
South Korea
India
Canada
Taiwan
International Office Jan 2011 Report

5. Broadband Prices
“This… is a country. It’s a country we put a huge amount
of talent and money into… it’s a place where an 8mbps
home connection costs $160+ USD. No one seems to be
able to agree how to pronounce its name”.

6. Broadband Options
This slide intentionally left blank

7. HTTP and Web Browsers
To make performant websites, you really need to understand how the
browser and web server work, inside and out.
To me that’s like asking an astronaut to understand how the rocket
engine works, but whatever, we have to deal with it.
Besides, we’re better than astronauts.

8. HTTP and Web Browsers
Screwy rules
• Javascript blocks (halts) processing of page
• No more than N# HTTP requests per domain at any time
• DNS lookups take time
• ApplicationCache has same-origin restrictions
• Redirects eat at least 300ms
• Cellular Network and device configuration dictates radio power up/down
thresholds

9. HTTP and Web Browsers

10. HTTP and Web Browsers
Steve Souders, Google

11. HTTP and Web Browsers
Microframeworks not Frameworks.
Everyone uses jQuery! I’ll just use the jQuery CDN and no one will have to
download a thing.
Wrong.
Yahoo User Interface Blog
http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

12. Frameworks
jQuery “Mobile”, only 24KB!
Doesn’t count the jQuery dependency @ 31KB.
Other frameworks:
* Sencha Touch
* jqTouch
*…
Yahoo User Interface Blog
http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

13. Frameworks
Alternatives are available. Open directory at
microjs.com.
I prefer Zepto.js. Why?
It’s 5KB and packs a huge punch.
It is jQuery-compatible.
It targets webkit only, saves on speed & size.
You can serve it to mobiles and serve jQuery
to desktops (IE, Firefox) & others instead if
need be.

14. Frameworks
“The future is getting better, so none of this matters!”
Yahoo User Interface Blog
http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

15. Frameworks
“The future is getting better, so none of this matters!”
Nov 15 2010 Oct 15 2011
The HTTP Archive
http://httparchive.org/compare.php?&r1=Nov%2015%202010&s1=intersection&r2=Aug
%2015%202011&s2=intersection

16. HTML5

17. Quick Tour

18. CSS Animation

19. CSS3
FLEXBOX LAYOUT!
.column-in-thirds { Instead:
width: .column-in-equals {
33.33333333333333333333333333333 -webkit-flex: 1;
3%; }
}
Hocus-pocus set and forget
.column-in-thirds {
equal-width elements.
border: 2px solid purplepride;
padding: not-ugly-padding;
width: uhhhhhh
}

20. CSS3
Flexbox is the Advil of Front-end Design

21. HTML5 Markup
USE IT NOW!
Many new elements and attributes for existing elements
• <audio>, <video>
• HTML Forms
(input@autocomplete, input@autocapitalize, input@autocorr
ect)

22. Application Cache
Tell the browser “give me some disk space and put these files on
it, then keep them there and use them until I tell you otherwise.”
Yourapp.appcache – manifest of files
/css/style.css
/js/wowee.js

23. HTTP Headers
Spend time configuring eTags and Expires headers carefully for
CSS, JS, etc.
Can be an alternative to AppCache.

25. First-time Visitor. 10 SECONDS!?
According to Yahoo!'s Exceptional
Performance Team, 40% to 60% of
Yahoo!'s users have an empty cache
experience and about 20% of all page
views are done with an empty cache.

26. First-time Visitor. 10 SECONDS!?
35+ CSS files waited for connections
Combine these into one file by hand or using server-side scripts.
Use a CSS compressor.

27. First-time Visitor. 10 SECONDS!?
Compress and minify your Javascript as well, and
defer loading it until absolutely necessary. Paint a
screen for folks as fast as possible and load Javascript
to handle your interaction afterward.
It took 6.11 seconds just to paint anything on the
screen for this site and another 2.2 seconds to finish
downloading Javascript files.
Finally, images took another 1.5 seconds.
On a desktop computer.

28. First-time Visitor. 10 SECONDS!?
Images are usually the last thing to get loaded by the
browser from the network. Consider “sprite”-ing your
design/template images. That is, put them into a single
large image file and use CSS positioning rules to
move the viewable “window” that is the height and
width of your element to the right place on the gigantic
background image.

29. Second-time Visitor
Browser cache is not a free pass.
We didn’t transfer nearly as much data (82KB vs 1.2MB), but we STILL
had to spend a ton of time sending the last date we fetched each CSS
file up to the server and waiting for it to tell us if it had a newer copy we
needed to download.

30. Wrap-up
 HTML5: form inputs, caching
 CSS3: animations, layout
 Minify and combine CSS
 Minify and combine Javascript
 Defer Javascript until later
 Users hate slow sites
 Servers hate slow sites
 Google hates slow sites