nu web steering committee - oct 11 - web performance
TRANSCRIPT
![Page 1: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/1.jpg)
Top Level Northwestern Pages Go Mobile
![Page 2: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/2.jpg)
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
![Page 3: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/3.jpg)
Need for Speed!
Why prioritize speed?
![Page 4: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/4.jpg)
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
![Page 5: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/5.jpg)
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”.
![Page 6: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/6.jpg)
Broadband Options
This slide intentionally left blank
![Page 7: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/7.jpg)
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.
![Page 8: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/8.jpg)
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
![Page 9: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/9.jpg)
HTTP and Web Browsers
![Page 10: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/10.jpg)
HTTP and Web Browsers
Steve Souders, Google
![Page 11: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/11.jpg)
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/
![Page 12: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/12.jpg)
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/
![Page 13: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/13.jpg)
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.
![Page 14: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/14.jpg)
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/
![Page 15: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/15.jpg)
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
![Page 16: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/16.jpg)
HTML5
![Page 17: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/17.jpg)
Quick Tour
![Page 18: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/18.jpg)
CSS Animation
![Page 19: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/19.jpg)
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.
![Page 20: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/20.jpg)
CSS3
Flexbox is the Advil of Front-end Design
![Page 21: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/21.jpg)
HTML5 Markup
USE IT NOW!
Many new elements and attributes for existing elements
• <audio>, <video>
• HTML Forms (input@autocomplete, input@autocapitalize, input@autocorrect)
![Page 22: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/22.jpg)
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
![Page 23: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/23.jpg)
HTTP Headers
Spend time configuring eTags and Expires headers carefully for CSS, JS, etc.
Can be an alternative to AppCache.
![Page 24: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/24.jpg)
![Page 25: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/25.jpg)
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.
![Page 26: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/26.jpg)
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.
![Page 27: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/27.jpg)
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.
![Page 28: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/28.jpg)
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.
![Page 29: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/29.jpg)
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.
![Page 30: NU Web Steering Committee - Oct 11 - Web Performance](https://reader030.vdocuments.us/reader030/viewer/2022032615/55a266661a28abbe6b8b46f3/html5/thumbnails/30.jpg)
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