Upload
lee-roberson
View
294
Download
0
Tags:
Embed Size (px)
Citation preview
Top Level Northwestern Pages Go Mobile
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
Need for Speed!
Why prioritize speed?
Students from the World
Why prioritize speed?
International Office Jan 2011 Report
# of Foreign Students:
2,426
Top Countries:
China
South Korea
India
Canada
Taiwan
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”.
Broadband Options
This slide intentionally left blank
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.
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
HTTP and Web Browsers
HTTP and Web Browsers
Steve Souders, Google
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/
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/
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.
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/
Frameworks
“The future is getting better, so none of this matters!”
The HTTP Archive
http://httparchive.org/compare.php?&r1=Nov%2015%202010&s1=intersection&r2=Aug
%2015%202011&s2=intersection
Nov 15 2010 Oct 15 2011
HTML5
Quick Tour
CSS Animation
CSS3
FLEXBOX LAYOUT!.column-in-thirds {
width: 33.333333333333333333333333333333%;
}
.column-in-thirds {
border: 2px solid purplepride;
padding: not-ugly-padding;
width: uhhhhhh
}
Instead:
.column-in-equals {
-webkit-flex: 1;
}
Hocus-pocus set and forget equal-width elements.
CSS3
Flexbox is the Advil of Front-end Design
HTML5 Markup
USE IT NOW!
Many new elements and attributes for existing elements
• <audio>, <video>
• HTML Forms (input@autocomplete, input@autocapitalize, input@autocorrect)
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
HTTP Headers
Spend time configuring eTags and Expires headers carefully for CSS, JS, etc.
Can be an alternative to AppCache.
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.
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.
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.
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.
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.
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