Speed Loading


Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

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

No notes for slide
  • tonight im going to cover some ways to get your pages to load faster. specifically, pages with a larege amount of javascript and css like the ones we build when creating highly interactive web sites or web appiications.
  • I would imagene you have heard of many if not all of these things before. They are commonly used for the kind of javascript development we to do nowadays. What im seeing however, is that few people actually implement them.
  • The single greatest speed savings lies in concatenating your javascript and css files. when we have multiple javascript files, the browser does something called script blocking, which is where it forces each javascript file to be completely downloaded before the next is started.  each request also carries with it the overhead of header information used for the http request. we can elimnate this as well by concatenation our javascript and css. There is a tool out there called JSBuilder that lets us do this, which we will cover in a a moment, but first lets look at script blocking and why it sucks so much.
  • Speed Loading

    1. 1. Speed Loading Tactics for a quicker initial page load
    2. 2. What to do First <ul><ul><li>Concatenate </li></ul></ul><ul><ul><li>Remove Fluff </li></ul></ul><ul><ul><li>GZip </li></ul></ul><ul><ul><li>Cache </li></ul></ul><ul><ul><li>Sprite </li></ul></ul>
    3. 3. Concatenation <ul><ul><li>Multiple JavaScript files == slow </li></ul></ul><ul><ul><ul><li>  Script blocking </li></ul></ul></ul><ul><ul><ul><li>  Overhead for each request  </li></ul></ul></ul><ul><ul><ul><li>  Image loading is delayed  </li></ul></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><ul><li>Tools </li></ul></ul><ul><ul><ul><li>  JSBuilder </li></ul></ul></ul><ul><ul><ul><li>  Also Removes Fluff </li></ul></ul></ul><ul><li>  </li></ul>
    4. 4. Script Blocking <ul><li>Each script waits for the previous </li></ul>
    5. 5. HTTP Negotiation combined file contents 2.26s negotiation 0.37s combined negotiation 2.37s file contents 1.1s
    6. 6. Using JSBuilder <ul><li>Demo time! </li></ul>
    7. 7. GZip Compression <ul><li>Can you say Kick Ass! </li></ul>
    8. 8. Reasons to use GZip <ul><li>  </li></ul><ul><li>60% smaller files </li></ul><ul><ul><li>Server compresses on the fly </li></ul></ul><ul><ul><li>Browser decompresses </li></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>Notes </li></ul><ul><ul><li>Works for css as well </li></ul></ul><ul><ul><li>Don't use on compressed content (jpg, gif, png, etc) </li></ul></ul>
    9. 9. GZip Results <ul><li>Reduced download time by 45% </li></ul>
    10. 10. Enabling GZip <ul><li>  </li></ul><ul><li>Load Apache2 Module in httpd.conf </li></ul><ul><li>  </li></ul><ul><li>LoadModule deflate_module modules/mod_deflate.so </li></ul><ul><li>  </li></ul><ul><li>.htaccess or httpd.conf </li></ul><ul><li>  </li></ul><ul><li><IfModule mod_deflate.c>   SetOutputFilter DEFLATE   AddOutputFilterByType DEFLATE text/html text/plain text/css text/javascript application/javascript application/x-javascript </IfModule> </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>Note: Uses 'gzip' routine, not MS 'deflate' routine </li></ul>
    11. 11. Caching <ul><ul><li>Set Cache-Control headers </li></ul></ul><ul><ul><li>Sends expiration date in response </li></ul></ul><ul><ul><li>Browser reads expiration date </li></ul></ul>
    12. 12. Cache Content <ul><li>Cached files not downloaded on re-visit </li></ul>
    13. 13. Enabling Cache/Expire <ul><li>Load Apache2 Module in httpd.conf </li></ul><ul><li>  </li></ul><ul><li>LoadModule expires_module modules/mod_expires.so LoadModule headers_module modules/mod_headers.so </li></ul><ul><li>  </li></ul><ul><li>.htaccess or httpd.conf </li></ul><ul><li>  </li></ul><ul><li><IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css &quot;access plus 30 days&quot; ExpiresByType text/javascript &quot;access plus 7 days&quot; ExpiresByType application/x-javascript &quot;access plus 7 days&quot; ExpiresByType application/javascript &quot;access plus 7 days&quot; ExpiresByType image/x-icon &quot;access plus 7 days&quot; ExpiresByType image/vnd.microsoft.icon &quot;access plus 7 days&quot; ExpiresByType image/png &quot;access plus 30 days&quot; ExpiresByType image/gif &quot;access plus 30 days&quot; ExpiresByType image/jpeg &quot;access plus 30 days&quot; ExpiresByType image/jpg &quot;access plus 30 days&quot; ExpiresByType application/x-shockwave-flash &quot;access plus 30 days&quot; </IfModule> </li></ul>
    14. 14. Bust The Cache <ul><ul><li>Update the users files </li></ul></ul><ul><li>  </li></ul><ul><li>Version numbers embedded in file name </li></ul><ul><li>  </li></ul><ul><li>YourCoolJavaScript. 2.2 .js becomes YourCoolJavaScript. 2.3 .js </li></ul><ul><li>  </li></ul><ul><li>Version number as query string </li></ul><ul><li>YourCoolJavaScript.js?ver= 2.2 becomes YourCoolJavaScript.js?ver= 2.3 </li></ul>
    15. 15. Sprites <ul><ul><li>Combine multiple images into one </li></ul></ul><ul><ul><li>Use CSS to display image by coordinates </li></ul></ul>
    16. 16. Sprite Sample <ul><li>Single Image (Sprite) - 2.5k </li></ul><ul><li>  </li></ul><ul><li>Multiple Images - 6.1k total </li></ul>
    17. 17. Sprite Results <ul><li>60% faster </li></ul>
    18. 18. General Notes <ul><ul><li>CSS Always goes in the head </li></ul></ul><ul><ul><ul><li>Other locations will delay page rendering </li></ul></ul></ul><ul><ul><li>GZip can actually be slower on old server/client hardware </li></ul></ul>
    19. 19. Tools <ul><li>JSBuilder </li></ul><ul><li>http://code.google.com/p/js-builder/ </li></ul><ul><li>  </li></ul><ul><li>IBM Page Detailer </li></ul><ul><li>http://www.alphaworks.ibm.com/tech/pagedetailer </li></ul><ul><li>Live HTTP Headers </li></ul><ul><li>http://livehttpheaders.mozdev.org/installation.html </li></ul>