NU Web Steering Committee - Oct 11 - Web Performance
Download as PPTX, PDF0 likes370 views
The document discusses various techniques for improving website performance and speed. It recommends prioritizing speed to provide a better user experience with slow networks or expensive data plans. Specific techniques mentioned include minimizing HTTP requests through combining and compressing CSS and JavaScript files, leveraging HTML5 features like application caching, optimizing images, and deferring unnecessary JavaScript loading. The document emphasizes that performance impacts both users and search engines like Google.
NU Web Steering Committee - Oct 11 - Web Performance
- 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
Editor's Notes
- #6: 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?)
- #7: You just don’t know what your user’s bandwidth or network access will be.
- #8: 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 "the places to be", 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.
- #9: 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&T is the worst of these.
- #10: 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&T is the worst of these.
- #11: 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&T has the worst configuration in regard to this aspect of performance in the U.S.
- #12: 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.
- #13: 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.
- #14: 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.
- #15: You might look at the progression in iOS and Android and think “okay, they’re working on it, it’ll be fine.”
- #16: 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.
- #17: Enter HTML5
- #19: 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
- #20: 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.
- #21: 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.
- #22: 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.
- #23: 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.
- #24: 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.
- #25: 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.
- #26: There were a ton of comments all over this CSS file that the browser doesn’t need.
- #27: 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.
- #28: There were a ton of comments all over this CSS file that the browser doesn’t need.
- #29: There were a ton of comments all over this CSS file that the browser doesn’t need.
- #30: 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.
- #31: 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.