Top Level Northwestern Pages Go             Mobile
Need for Speed!Why prioritize speed?  * Data diets (almost… American like)  * Bad reception situations (almost… Telephone ...
Need for Speed!Why prioritize speed?
Students from the WorldWhy prioritize speed?                                                               # of Foreign St...
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 8m...
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...
HTTP and Web BrowsersScrewy rules•   Javascript blocks (halts) processing of page•   No more than N# HTTP requests per dom...
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 hav...
FrameworksjQuery “Mobile”, only 24KB!Doesn’t count the jQuery dependency @ 31KB.Other frameworks:    * Sencha Touch    * j...
FrameworksAlternatives are available. Open directory atmicrojs.com.I prefer Zepto.js. Why?It’s 5KB and packs a huge punch....
Frameworks“The future is getting better, so none of this matters!”                                                        ...
Frameworks“The future is getting better, so none of this matters!”            Nov 15 2010                                 ...
HTML5
Quick Tour
CSS Animation
CSS3FLEXBOX LAYOUT!.column-in-thirds {                          Instead:     width:                                  .colu...
CSS3Flexbox is the Advil of Front-end Design
HTML5 MarkupUSE IT NOW!Many new elements and attributes for existing elements• <audio>, <video>• HTML Forms  (input@autoco...
Application CacheTell the browser “give me some disk space and put these files onit, then keep them there and use them unt...
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 em...
First-time Visitor. 10 SECONDS!?35+ CSS files waited for connectionsCombine these into one file by hand or using server-si...
First-time Visitor. 10 SECONDS!?Compress and minify your Javascript as well, anddefer loading it until absolutely necessar...
First-time Visitor. 10 SECONDS!?Images are usually the last thing to get loaded by thebrowser from the network. Consider “...
Second-time VisitorBrowser cache is not a free pass.We didn’t transfer nearly as much data (82KB vs 1.2MB), but we STILLha...
Wrap-up HTML5: form inputs, caching CSS3: animations, layout Minify and combine CSS Minify and combine Javascript Def...
NU Web Steering Committee - Oct 11 - Web Performance
Upcoming SlideShare
Loading in …5
×

NU Web Steering Committee - Oct 11 - Web Performance

464 views

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Best viewed in 'Speaker Notes' mode.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
464
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
2
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • Story about “Dean”, ananonymized person working in Qatar who lived in a building with poor wiring and some kind of slow connection (can’t remember – satellite or just bad DSL?)
  • You just don’t know what your user’s bandwidth or network access will be.
  • Paul Rouget went to Taiwan and found that pretty much everyone there was using a phone or tablet all the time.Chinese websites work on Opera. Opera is a safe way to browse the web when you are in Asia. Opera works for any websites, on any phones;they are present on feature phones;they are in &quot;the places to be&quot;, talking to OEMs, and being actively present at all the web-related events. They were giving talks at COSCUP (an Open Source conference. Opera is not Open Source at all);Android devices are sold with Opera.
  • Cell network data radio configuration greatly affects battery life, while on one hand keeping the radio on full power definitely helps you load pages faster, it eats through the battery at a fairly high, constant rate while active. The problem is, once the radio goes back into sleeping mode, it can take as much as 3 seconds for it to power up again and download a simple image. AT&amp;T is the worst of these.
  • Cell network data radio configuration greatly affects battery life, while on one hand keeping the radio on full power definitely helps you load pages faster, it eats through the battery at a fairly high, constant rate while active. The problem is, once the radio goes back into sleeping mode, it can take as much as 3 seconds for it to power up again and download a simple image. AT&amp;T is the worst of these.
  • Cell network data radio configuration greatly affects battery life, while on one hand keeping the radio on full power definitely helps you load pages faster, it eats through the battery at a fairly high, constant rate while active. The problem is, once the radio goes back into sleeping mode, it can take as much as 3 seconds for it to power up again and download a simple image. AT&amp;T has the worst configuration in regard to this aspect of performance in the U.S.
  • There’s no disk cache in iOS. Just a memory cache. Whoops.jQuery isn’t a mobile version of jQuery, it’sbasically a giant jQuery “plugin” – at 31KB of jQuery + 24KB of jQuery Mobile, that’s a lot of Javascript. That doesn’t even count the jQuery Mobile CSS and images.
  • jQuery isn’t a mobile version of jQuery, it’sbasically a giant jQuery “plugin” – at 31KB of jQuery + 24KB of jQuery Mobile, that’s a lot of Javascript. That doesn’t even count the jQuery Mobile CSS and images.
  • And if you change your mind while using Zepto, you can just go for broke and drop in jQuery without having to rewrite any of your application-specific code.Most of these frameworks try to emulate another framework in syntax. The objective isn’t to re-invent syntax, it’s to save on network and memory resources.
  • You might look at the progression in iOS and Android and think “okay, they’re working on it, it’ll be fine.”
  • 50% growth in JS size alone. This cannot be ignored. It seems obvious that our applications grow ever-more complex, but in case your brain is off right now, here’s some evidence. NB, to be fair, these graphs analyze all sites in the http archive, not just mobile sites.For the Javascript average to increase almost 30K means that the actual size of some of these scripts is much larger than that. This could be partially attributed to the proliferation of those nasty Twitter and Facebook buttons.
  • Enter HTML5
  • CSS Animation! By changing the class on DOM nodes dynamically using JS, these elements animate according to the CSS properties I’ve specified. Finally, animation is where it belongs, in the presentation layer. You can do everything with this that you can with JS animation and more. And on many devices, it’s hardware-accelerated.Used in the expanding functionality for the NU Home Page
  • In the border-box model, borders affect the width of an element and this “clean” percentage based width no longer works. At all. You’ll probably see line-wrapping.CSS layout has been about print, magazines, lots of text. Until the last couple of years it’s never been about the things we’ve actually been building in web browsers but spec designers are finally waking up.Important limitation: doesn’t work on HTML input elements (but what does!? Argh) – need to wrap these in nonsemantic elements that are flexed.
  • In the border-box model, borders affect the width of an element and this “clean” percentage based width no longer works. At all. You’ll probably see line-wrapping.Important limitation: doesn’t work on HTML input elements (but what does!? Argh) – need to wrap these in nonsemantic elements that are flexed.
  • The new input forms are great on mobile devices, since they have so much assistive technology. It allows you to disable the assistive technology. These are listed in order of most-useful. Autocapitalize=off is mostly an aesthetic thing.
  • Two benefits. One: you can cache things that don’t change often, like your CSS and Javascript. Two: you can have OFFLINE applications!Be creative with this. You can cache HTML files.Completely blows away the HTTP connection limits and network round trip time issues for subsequent accesses.We’re using this for our prototype shuttle timetable system so that folks can “download” an easy to read timetable on their iPod or iPad tablet in addition to their phones when they have no internet access.
  • Two benefits. One: you can cache things that don’t change often, like your CSS and Javascript. Two: you can have OFFLINE applications!Be creative with this. You can cache HTML files.Completely blows away the HTTP connection limits and network round trip time issues for subsequent accesses.We’re using this for our prototype shuttle timetable system so that folks can “download” an easy to read timetable on their iPod or iPad tablet in addition to their phones when they have no internet access.
  • A reminder to apply these principles to your desktop applications too. Performance matters everywhere. This web server gets slammed with 35+ requests for just the CSS files attached to the page, not to mention images and javascript and so on. Woah. Drupal for the win!I lost count of the number of CSS files this page needs.
  • There were a ton of comments all over this CSS file that the browser doesn’t need.
  • There were a ton of comments all over this CSS file that the browser doesn’t need.30k less data to transfer and Nx~250ms waits less for this page to load.
  • There were a ton of comments all over this CSS file that the browser doesn’t need.
  • There were a ton of comments all over this CSS file that the browser doesn’t need.
  • We didn’t transfer nearly as much data, 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.
  • We didn’t transfer nearly as much data, 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.
  • NU Web Steering Committee - Oct 11 - Web Performance

    1. 1. Top Level Northwestern Pages Go Mobile
    2. 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. 3. Need for Speed!Why prioritize speed?
    4. 4. Students from the WorldWhy prioritize speed? # of Foreign Students: 2,426 Top Countries: China South Korea India Canada Taiwan International Office Jan 2011 Report
    5. 5. 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”.
    6. 6. Broadband OptionsThis slide intentionally left blank
    7. 7. 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.
    8. 8. HTTP and Web BrowsersScrewy 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. 9. HTTP and Web Browsers
    10. 10. HTTP and Web Browsers Steve Souders, Google
    11. 11. 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/
    12. 12. 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/
    13. 13. 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.
    14. 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. 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. 16. HTML5
    17. 17. Quick Tour
    18. 18. CSS Animation
    19. 19. CSS3FLEXBOX 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. 20. CSS3Flexbox is the Advil of Front-end Design
    21. 21. HTML5 MarkupUSE IT NOW!Many new elements and attributes for existing elements• <audio>, <video>• HTML Forms (input@autocomplete, input@autocapitalize, input@autocorr ect)
    22. 22. 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
    23. 23. HTTP HeadersSpend time configuring eTags and Expires headers carefully forCSS, JS, etc.Can be an alternative to AppCache.
    24. 24. 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.
    25. 25. 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.
    26. 26. First-time Visitor. 10 SECONDS!?Compress and minify your Javascript as well, anddefer loading it until absolutely necessary. Paint ascreen for folks as fast as possible and load Javascriptto handle your interaction afterward.It took 6.11 seconds just to paint anything on thescreen for this site and another 2.2 seconds to finishdownloading Javascript files.Finally, images took another 1.5 seconds.On a desktop computer.
    27. 27. 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.
    28. 28. 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.
    29. 29. 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

    ×