Speed Up Your Website


Published on

Some simple techniques to speed up your website using apache, codeingiter, php etc.

  • Be the first to comment

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

No notes for slide

Speed Up Your Website

  1. 1. Eight Simple Steps to Speed Up Your Website! http://syamantics.com
  2. 2. Tools <ul><li>Apache2 </li></ul><ul><li>PHP – CodeIgniter </li></ul><ul><li>Firefox </li></ul><ul><li>Firebug </li></ul><ul><li>YSlow </li></ul><ul><li>Some utility scripts </li></ul>
  3. 3. #1. Add Cache-Control Header <ul><li>Use Apache mod_headers </li></ul><ul><li>Use for static contents </li></ul><ul><li>Set max-age </li></ul><ul><li>Set Cache Type </li></ul><IfModule mod_headers.c> # 1 YEAR <FilesMatch &quot;.(dcr|W3D|wav|swf|css|js|gif|jpg|png)$&quot;> Header set Cache-Control &quot;max-age=29030400, public“ </FilesMatch> </IfModule> <ul><li>Specify which types of proxies can cache certain content, </li></ul><ul><li>and how long files should be cached. </li></ul>Header set Cache-Control &quot;max-age=12400, public, must-revalidate&quot;
  4. 4. #2. Add Future Expires Header <ul><li>Use Apache mod_headers </li></ul><ul><li>Use for static contents </li></ul><ul><li>Set far future expiry date </li></ul><IfModule mod_headers.c> <FilesMatch &quot;.(dcr|W3D|wav|swf|css|js|gif|jpg|png)$&quot;> Header set Expires &quot;Thu, 15 Apr 2010 20:00:00 GMT“ </FilesMatch> </IfModule> <ul><li>A first-time visitor to your page will make several HTTP requests to download all your sites files, but using the Expires header you make those files cacheable. </li></ul>Header set Expires &quot;Thu, 15 Apr 2010 20:00:00 GMT“ Header set ExpiresDefault &quot;access plus 10 years&quot; *You have to change the component’s filename whenever the file changes.
  5. 5. #3. Turn Off Etag <IfModule mod_expires.c> FileETag None Header unset ETag Header unset Pragma </IfModule> By turning it of we disable caches and browsers from being able to validate files , so they are forced to rely on your Cache-Control and Expires header. Entity tags (ETags) are a mechanism to check for a newer version of a cached file. Basically you can remove If-None-Match requests and their 304 Not Modified Responses.
  6. 6. #4. Remove Last Modified Header <ul><li>Totally eliminate requests to check for updates using If-Modified-Since requests </li></ul><ul><li>And their 304 Not Modified Responses </li></ul><ul><li>A file will stay cached until the Expires header indicates new content is available! </li></ul><IfModule mod_headers.c> <FilesMatch &quot;.(dcr|W3D|wav|swf|css|js|gif|jpg|png)$&quot;> Header unset Last-Modified </FilesMatch> </IfModule>
  7. 7. #5. Use Version Numbering <ul><li>As now the browser will not check for update until the expiry date is over, we need to provide some mechanism to enforce the browser to download latest content every time a change occurs. </li></ul>shop.js — > shop_1.0.js CUSTOM HTML HELPER function link_js ( $file ) { $js_tag = '<script type=&quot;text/javascript&quot; src=&quot;%s&quot;></script>' ; $js_dir = base_url (). 'js/' ; $CI = & get_instance (); $version = $CI -> config -> item ( 'version' ); return sprintf ( $js_tag , $js_dir . $file . '_' . $version . '.js' ); } CONFIG $config [ ‘version' ] = “1.0&quot; ; APACHE RewriteRule ^(.*.)v[0-9.]+.(js)$ $1$2 [L]
  8. 8. #6. Turn on HTTP Compression <ul><li>GZIP </li></ul><ul><li>DEFLATE </li></ul><ul><li>Use Apache 2 mod_deflate to compress your static contents </li></ul><ul><li>Do not compress images </li></ul><ul><li>Support starts from HTTP/1.1 </li></ul><ul><li>All modern browsers support http compression </li></ul><IfModule mod_deflate.c> <FilesMatch &quot;.(dcr|W3D|wav|swf|js|css|w3d|cct)$&quot;> SetOutputFilter DEFLATE </FilesMatch> </IfModule>
  9. 9. #7. Minify JS & CSS <ul><li>Minify Javascripts and CSS using minification tools </li></ul><ul><li>Can be done on the fly and cached for future uses </li></ul><ul><li>CSSTIDY csstidy.sourceforge.net/ </li></ul><ul><li>JSMIN–PHP code.google.com/p/jsmin-php/ </li></ul>CUSTOM HTML LIBRARY function link_js ( $file ) { $cached_js_file = $this -> cached_dir_js. $file ; if (! file_exists ( $cached_js_file )) { $js_file = $this -> dir_js. $file ; file_put_contents ( $cached_js_file , JSMin :: minify ( file_get_contents ( $js_file )); } return sprintf ( $this -> js_tag , $cached_js_file . '_' . $this -> version. '.js' ); }
  10. 10. #8. Optimize Images <ul><li>Compress PNGs </li></ul><ul><li>Compress JPEGS </li></ul><ul><li>Compress GIFs </li></ul><ul><li>PNG GAUNTLET – .NET PLATFORM, GUI, BATCH http://brh.numbera.com/software/pnggauntlet/ </li></ul><ul><li>OPTIPNG – WIN/*NIX, SHELL, BATCH optipng image.png http://optipng.sourceforge.net/ </li></ul><ul><li>PNGCRUSH - *NIX, SHELL, BATCH pngcrush -rem alla -reduce -brute image.png result.png http://pmt.sourceforge.net/pngcrush/ </li></ul><ul><li>JPEGTRAN - *NIX utility, BATCH jpegtran -copy none -optimize -perfect src.jpg dest.jpg </li></ul><ul><li>IMAGEMAGICK - *NIX identify -verbose image.gif http://www.imagemagick.org/ </li></ul>
  11. 11. <ul><li>Case Study </li></ul>
  12. 12. Before
  13. 13. After
  14. 14. Before After
  15. 15. <ul><li>BENEFITS </li></ul><ul><li>Faster </li></ul><ul><li>Saves Bandwidth </li></ul><ul><li>Less Pressure on Server </li></ul>
  16. 16. <ul><li>THANKS! </li></ul>MORE INFO: Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html