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