Faster Websites! Kill Kill!


Published on

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?

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

  • 1) Images
    2) JavaScript
    3) CSS

  • Faster Websites! Kill Kill!

    1. 1. Optimize Your Website to Load Faster! By Mike Wilcox June 1st 2010
    2. 2. 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.
    3. 3. What is a "fast" website? “My boss needs a number.” The Mike Wilcox 7 second rule 10 seconds is about the limit for keeping the user's attention focused
    4. 4. It is a slow website. “How can I convince my boss/client that we need to invest in site speed?”
    5. 5. Time is Money
    6. 6. Affects Search Ranking Google announced they are factoring the load time of the page in rankings. Fast Web site
    7. 7. 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
    8. 8. 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.
    9. 9. Broadband - Good News US broadband penetration among active Internet users in December 2009 94.5 5%!
    10. 10. 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 Un
    11. 11. Bandwidth - How Much? Increasing bandwidth results in diminishing returns Decreasing round-trip-times are more effective
    12. 12. Okay. So where do I start?
    13. 13. 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
    14. 14. 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 .
    15. 15. Cache
    16. 16. 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>
    17. 17. Cache “I’ll just cache everything! I’ll cache it ALL!!”
    18. 18. 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
    19. 19. GZIP Easiest and most effective way to speed up site All major browsers support it US Pat ent for GZIP
    20. 20. GZIP - compared 20 / 12 17.9 / 11.9 17.6 / 11.6 5.9 / 4.4
    21. 21. 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”>
    22. 22. GZIP Best Practices Don’t abuse it. JavaScript != Java Good: var id = lib.byId(“list”); Bad: var uniqueIdentifier = myVerboseLibrary.returnElementById(“firstPageRightList”)
    23. 23. Mike Wilcox 3 Keys to Page Performance: 1) Resources 2) Resources 3) Resources
    24. 24. 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!!
    25. 25. Image Types Be sure to use the correct image type for the job JPEG GIF PNG
    26. 26. 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
    27. 27. 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
    28. 28. 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
    29. 29. Image Types demo
    30. 30. 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
    31. 31. 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.
    32. 32. 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??
    33. 33. 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
    34. 34. 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
    35. 35. 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
    36. 36. 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.
    37. 37. 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! m
    38. 38. 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
    39. 39. 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)
    40. 40. 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
    41. 41. 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
    42. 42. 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
    43. 43. 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
    44. 44. 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
    45. 45. 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
    46. 46. Tools Google PageSpeed YSlow! WebPageTest Firebug ZoomPF
    47. 47. References business/
    48. 48. end.