Your SlideShare is downloading. ×
0
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
! ...
What is a "fast" website?
“My boss needs a number.”

        The Mike Wilcox 7 second rule
http://useit.com
http://webpage...
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.




                ...
Mobile
How most pages will be viewed in the future
   Mobile phones hate lookups

   Graceful degradation




            ...
Tethering
More and more users connect by tethering their
laptops to their cell phones. They are also using G3
cards, WiFi ...
Broadband - Good News
US broadband penetration among active Internet
users in December 2009




                          ...
Broadband - Bad News
Broadband penetration for the US was still out of the
top 20, coming in at 22nd place worldwide at 73...
Bandwidth - How Much?
    Increasing bandwidth results in diminishing returns
    Decreasing round-trip-times are more eff...
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.

Sve...
Who’s Steve Souders???
Yahoo Google Performance Specialist

Created YSlow!    (which is
awesome)
And Hammerhead          (...
Cache
Cache
 Temporary storage of frequently accessed data

 Avoids round trips to the origin server

 Reduces bandwidth consump...
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...
GZIP
 Easiest and most effective way to speed up site

 All major browsers support it
                                 US ...
GZIP - compared

                   20 / 12


                  17.9 / 11.9


                  17.6 / 11.6


            ...
GZIP Best Practices
Write code with a proper convention - major attribute
first, then alphabetical

Good:
<a href=”foo.html...
GZIP Best Practices
 Don’t abuse it. JavaScript != Java

 Good:
var id = lib.byId(“list”);

 Bad:
var uniqueIdentifier =
 ...
Mike Wilcox 3 Keys to Page
Performance:

         1) Resources
         2) Resources
         3) Resources
Who’s Mike Wilcox???                                    ight
                                               ndi ng r
     ...
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...
Image Types
GIF                                                 GIF
  Introduced in 1987 by CompuServe

  Suitable for sha...
Image Types
PNG                                               PNG

 Portable Network Graphics format introduced by the
 W3...
Image Types
              demo
Image Sprites
 For the hover and active states, instead of swapping
 the background-image URL, use one image containing
 a...
Stylesheets
 Combine all styles into one sheet or modular sheets

 Set cache-expire headers

 Avoid inline styles. Use an ...
Resource Waterfalls
To get a firm understanding of page load time, it’s
imperative to analyze network resource waterfall ch...
Anatomy of a Page Load
   <head>
     <script src=”script1.js”></script>
     <script src=”script2.js”></script>
   </head...
Blocking
In older browsers (IE < 7 and FF < 3.5), scripts do not
load in parallel, they are “blocked”. One needs to finish
...
Parallel Loads
Modern browsers can load up to six (or more) resources
in parallel at one time. The execution is deferred u...
IE8 Parallel Loads like a MoFo
                       Wow, 12!
                      Sometimes
                      as hi...
Domain Sharding
  By loading scripts from another domain, The 6-resource
  limit can be subverted, allowing FF 3.5+ and We...
Defer Scripts
   Scripts should be placed at the bottom of the document.




 DOM and
images start
   loading
 right away ...
Firebug Net Detail
Other factors need to be considered other than just
download time.

                                   ...
Best Practice Checklist
1. Caching
   1.1. Set headers properly for Expires, Last-Modified,
        and ETags

   1.2. Vers...
Best Practice Checklist
3. Use CDNs
   3.3. Better chance for caching

   3.4. Domain Sharded

   3.5. Multiple server loc...
Best Practice Checklist
5. Turn on GZIP
6. JavaScript
   6.1. More than 3 JS files means you need to re-
        evaluate t...
Best Practice Checklist
7. CSS
  7.1. More than 2 CSS files means you need to re-
       evaluate the situation

  7.2. Str...
Best Practice Checklist
8. Images
   8.1. Use the proper image type (PNG/GIF/JPG)

   8.2. Use image sprites

   8.3. Do n...
Best Practice Checklist
9. Reduce the Number of DOM Elements
   9.1. Do you really need all those tables for that
        ...
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-
bus...
end.
Upcoming SlideShare
Loading in...5
×

Faster Websites! Kill Kill!

2,159

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,159
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide






















  • 1) Images
    2) JavaScript
    3) CSS

























  • Transcript of "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 http://useit.com http://webpagetest.org http://alexa.com 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 http://compuware.com
    6. 6. Affects Search Ranking Google announced they are factoring the load time of the page in rankings. Fast Web site http://googlewebmastercentral.blogspot.com
    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%! http://websiteoptimization.com
    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 http://websiteoptimization.com Un
    11. 11. Bandwidth - How Much? Increasing bandwidth results in diminishing returns Decreasing round-trip-times are more effective http://belshe.com
    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 . http://www.stevesouders.com/
    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 http://yuiblog.com/blog/
    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!! http://clubajax.org/
    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! this.com that.co 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 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
    48. 48. end.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×