• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Faster Websites! Kill Kill!
 

Faster Websites! Kill Kill!

on

  • 2,115 views

Slow websites are not only frustrating, they can cause you to lose your audience — and money. What is a “fast” website? What are the keys to page performance? What image type is best? And most ...

Slow websites are not only frustrating, they can cause you to lose your audience — and money. What is a “fast” website? What are the keys to page performance? What image type is best? And most importantly, what is the best way to load all external resources for optimal speed?

Statistics

Views

Total Views
2,115
Views on SlideShare
1,998
Embed Views
117

Actions

Likes
1
Downloads
38
Comments
0

2 Embeds 117

http://clubajax.org 115
http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • 1) Images <br /> 2) JavaScript <br /> 3) CSS <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Faster Websites! Kill Kill! Faster Websites! Kill Kill! Presentation Transcript

  • Optimize Your Website to Load Faster! By Mike Wilcox June 1st 2010
  • What is a "fast" website? Scientific Questionnaire to determine if a site is slow or not: 1) Does it feel slow? ! A) Yes ! B) No 2) Does anyone care? ! A) Yes ! B) No END.
  • What is a "fast" website? “My boss needs a number.” The Mike Wilcox 7 second rule http://useit.com http://webpagetest.org http://alexa.com 10 seconds is about the limit for keeping the user's attention focused
  • It is a slow website. “How can I convince my boss/client that we need to invest in site speed?”
  • Time is Money http://compuware.com
  • Affects Search Ranking Google announced they are factoring the load time of the page in rankings. Fast Web site http://googlewebmastercentral.blogspot.com
  • Mobile How most pages will be viewed in the future Mobile phones hate lookups Graceful degradation iP hone 5.0 pro totype I foun d at the bar
  • Tethering More and more users connect by tethering their laptops to their cell phones. They are also using G3 cards, WiFi hotspots and various other ways of connecting.
  • Broadband - Good News US broadband penetration among active Internet users in December 2009 94.5 5%! http://websiteoptimization.com
  • Broadband - Bad News Broadband penetration for the US was still out of the top 20, coming in at 22nd place worldwide at 73.2% es at St d ite http://websiteoptimization.com Un
  • Bandwidth - How Much? Increasing bandwidth results in diminishing returns Decreasing round-trip-times are more effective http://belshe.com
  • Okay. So where do I start?
  • Steve Souders Performance Golden Rule 80-90% of the end-user response time is spent on the front-end. Start there. Svelte Java Guy! Front End Developer
  • Who’s Steve Souders??? Yahoo Google Performance Specialist Created YSlow! (which is awesome) And Hammerhead (which sucks) Hey Potts! Let’s go to Arnold’s! He wrote these books . http://www.stevesouders.com/
  • Cache
  • Cache Temporary storage of frequently accessed data Avoids round trips to the origin server Reduces bandwidth consumption Eases server load Improves latency <Directory "/home/website/public_html"> ExpiresDefault A300 <FilesMatch ".html$"> Expires A86400 </FilesMatch> <FilesMatch ".(gif|jpg|png|js|css)$"> Expires A2592000 </FilesMatch> </Directory>
  • Cache “I’ll just cache everything! I’ll cache it ALL!!”
  • Cache - not 100% 40-60% of Yahoo!’s users have an empty cache experience and ~20% of all page views are done with an empty cache. Safari cache buggy Always clears User’s first time on page cache. Cache was automatically cleared User cleared the browser cache User’s cache is full IE cache could be set to as little as 8MB http://yuiblog.com/blog/
  • GZIP Easiest and most effective way to speed up site All major browsers support it US Pat ent for GZIP
  • GZIP - compared 20 / 12 17.9 / 11.9 17.6 / 11.6 5.9 / 4.4
  • GZIP Best Practices Write code with a proper convention - major attribute first, then alphabetical Good: <a href=”foo.html” class=”zap” tabIndex=”-1”> <a href=”bar.html” class=”zap” tabIndex=”-1”> Bad: <A class=zap href=”foo.html” tabIndex=’-1’ > <a href=”bar.html” class=”zap” tabIndex=”-1”>
  • GZIP Best Practices Don’t abuse it. JavaScript != Java Good: var id = lib.byId(“list”); Bad: var uniqueIdentifier = myVerboseLibrary.returnElementById(“firstPageRightList”)
  • Mike Wilcox 3 Keys to Page Performance: 1) Resources 2) Resources 3) Resources
  • Who’s Mike Wilcox??? ight ndi ng r He’ s sta th ere. •Front-end Engineer •AJAX Developer •Web & Graphics Artist •Web-Multimedia Specialist •AS3 Programmer •Dojo Committer Worked on Dojo Resource L oader Dudley Do-Right will never save her in time!! http://clubajax.org/
  • Image Types Be sure to use the correct image type for the job JPEG GIF PNG
  • Image Types JPEG JPG Created by the Joint Photographic Experts Group in 1992 Best on photographs of realistic scenes with smooth variations of tone and color Poorly handles redundant data JPEG is the compression codec, not a file JFIF or Exif (with meta data) are actually the files In 2003 Forgent Networks claimed patent rights, which expired in 2006
  • Image Types GIF GIF Introduced in 1987 by CompuServe Suitable for sharp-edged line art with flat areas of color (such as logos) Used to store low-color data (game sprites) 256 color (8 bit), 1 bit alpha Handles redundant data very well Animation Lempel-Ziv-Welch (LZW) Lossless Compression which was patented in 1985 by Unisys which expired in 2005
  • Image Types PNG PNG Portable Network Graphics format introduced by the W3C in 1996 in response to the Unisys patent fiasco Adoption was slow. IE7 support is buggy. IE6 support is uber buggy. Uses DEFLATE, a non-patented lossless compression; better than GIF, less than JPEG 8 or 24 bit color, 1 or 8 bit alpha No animation, but there is MNG and APNG
  • Image Types demo
  • Image Sprites For the hover and active states, instead of swapping the background-image URL, use one image containing all three states, and change the background-position DIV button{ Click Me background-image:url(btn.png); background-position:0px 0px; } Click Me button:hover{ background-position:0px -75px; Click Me } button:active{ background-position:0px -150px; ojoX } s fro mD Sp rite Dra wing
  • Stylesheets Combine all styles into one sheet or modular sheets Set cache-expire headers Avoid inline styles. Use an external stylesheet that can be cached. Avoid using @import. Besides the additional requests, they may not load at predictable times. Should be inserted at the top of the page to avoid a layout shift on load, and because of “blocking” in older browsers.
  • Resource Waterfalls To get a firm understanding of page load time, it’s imperative to analyze network resource waterfall charts. or... Why is it taking m y 20 JQuery scripts so long to load??
  • Anatomy of a Page Load <head> <script src=”script1.js”></script> <script src=”script2.js”></script> </head> <body> Two scripts loa <img src=”agent.png” /> d at once - new bro wsers DOM (body) <img src=”access.png” /> only! starts and </body> ends here scripts finish loading scripts start loading script execution Images Done! time
  • Blocking In older browsers (IE < 7 and FF < 3.5), scripts do not load in parallel, they are “blocked”. One needs to finish loading and execute in case it contains dependencies for the next. s No parallel download for Opera 10.5?! execution times Took longer to finish! First script second script
  • Parallel Loads Modern browsers can load up to six (or more) resources in parallel at one time. The execution is deferred until the set is downloaded. First six Last two scripts scripts execute execute here here
  • IE8 Parallel Loads like a MoFo Wow, 12! Sometimes as high as IE8 is the first 20 browser to implement parallel downloads. Tests vary but leave no 500ms is doubt that it very fast exceeds other and over the net, not browsers in this localhost area.
  • Domain Sharding By loading scripts from another domain, The 6-resource limit can be subverted, allowing FF 3.5+ and Webkit to attain similar parallelism as that of IE8. Opera doesn A dozen ’t count scripts at . once! this.com that.co m
  • Defer Scripts Scripts should be placed at the bottom of the document. DOM and images start loading right away Faster because execution time is deferred
  • Firebug Net Detail Other factors need to be considered other than just download time. Download Wait time Connection time time DNS Lookup time Blocked time (not shown)
  • Best Practice Checklist 1. Caching 1.1. Set headers properly for Expires, Last-Modified, and ETags 1.2. Version slow-changing resources: 1.2.1. <script src=”dojo.js?v=0151”> 1.3. Keep components under 25k 2. Minimize DNS Lookups 2.1. Can be expensive; balance this with domain sharding
  • Best Practice Checklist 3. Use CDNs 3.3. Better chance for caching 3.4. Domain Sharded 3.5. Multiple server locations 4. Use Subdomains 4.3. Domain sharding 4.4. Use “cookieless” subdomain to reduce even more bytes
  • Best Practice Checklist 5. Turn on GZIP 6. JavaScript 6.1. More than 3 JS files means you need to re- evaluate the situation 6.2. Use Minification tools 6.3. Minimal inline script 6.4. Place scripts at bottom of page 6.5. Be aware of slow-running code
  • Best Practice Checklist 7. CSS 7.1. More than 2 CSS files means you need to re- evaluate the situation 7.2. Strip comments, line breaks and tabs 7.3. <link />, not @import 7.4. Place stylesheets at top of page 7.5. Be aware of slow-running selectors 7.6. Use a design professional who knows how to write CSS properly
  • Best Practice Checklist 8. Images 8.1. Use the proper image type (PNG/GIF/JPG) 8.2. Use image sprites 8.3. Do not resize images in the browser 8.4. Use CSS styling where possible (ergo, rounded corners) 8.5. Use a PNG compressor tool (PNGOUT, PNGCrush) 8.6. Use a design professional who knows how to work with images properly
  • Best Practice Checklist 9. Reduce the Number of DOM Elements 9.1. Do you really need all those tables for that form? It’s not 1999. 9.2. Make use of unique tag names and selectors instead of verbose classes 9.3. Use background-images instead of <img /> 9.4. No iframes! (or back up your reasoning) 9.5. Use a design professional who knows how to write HTML properly
  • Tools Google PageSpeed YSlow! WebPageTest Firebug ZoomPF
  • References http://blog.dynatrace.com/2009/09/18/top-low-hanging-fruit-to-performance-optimize-your-web-site-and-boost- business/ http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ http://www.stevesouders.com/ http://developer.yahoo.com/performance/rules.html http://www.compuware.com/fastcalc/ http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ http://www.useit.com/papers/responsetime.html
  • end.