Speed Loading
- 2. What to do First Concatenate Remove Fluff GZip Cache Sprite
- 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)
- 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
- 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
- 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
Editor's Notes
- 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.