NU Web Steering Committee - Oct 11 - Web PerformancePresentation Transcript
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 WorldWhy prioritize speed? # of Foreign Students: 2,426 Top Countries: China South Korea India Canada Taiwan International Office Jan 2011 Report
Broadband Prices“This… is a country. It’s a country we put a huge amountof talent and money into… it’s a place where an 8mbpshome connection costs $160+ USD. No one seems to beable to agree how to pronounce its name”.
Broadband OptionsThis slide intentionally left blank
HTTP and Web BrowsersTo make performant websites, you really need to understand how thebrowser and web server work, inside and out.To me that’s like asking an astronaut to understand how the rocketengine works, but whatever, we have to deal with it.Besides, we’re better than astronauts.
HTTP and Web Browsers
HTTP and Web Browsers Steve Souders, Google
HTTP and Web BrowsersMicroframeworks not Frameworks.Everyone uses jQuery! I’ll just use the jQuery CDN and no one will have todownload a thing.Wrong. Yahoo User Interface Blog http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/
FrameworksjQuery “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/
FrameworksAlternatives are available. Open directory atmicrojs.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 jQueryto desktops (IE, Firefox) & others instead ifneed 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!” 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
HTML5 MarkupUSE IT NOW!Many new elements and attributes for existing elements• <audio>, <video>• HTML Forms (input@autocomplete, input@autocapitalize, input@autocorr ect)
Application CacheTell the browser “give me some disk space and put these files onit, then keep them there and use them until I tell you otherwise.”Yourapp.appcache – manifest of files /css/style.css /js/wowee.js
HTTP HeadersSpend time configuring eTags and Expires headers carefully forCSS, 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 connectionsCombine these into one file by hand or using server-side scripts.Use a CSS compressor.
First-time Visitor. 10 SECONDS!?Images are usually the last thing to get loaded by thebrowser from the network. Consider “sprite”-ing yourdesign/template images. That is, put them into a singlelarge image file and use CSS positioning rules tomove the viewable “window” that is the height andwidth of your element to the right place on the giganticbackground image.
Second-time VisitorBrowser cache is not a free pass.We didn’t transfer nearly as much data (82KB vs 1.2MB), but we STILLhad to spend a ton of time sending the last date we fetched each CSSfile up to the server and waiting for it to tell us if it had a newer copy weneeded to download.