• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Speed Up Your Website
 

Speed Up Your Website

on

  • 3,661 views

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

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

Statistics

Views

Total Views
3,661
Views on SlideShare
3,353
Embed Views
308

Actions

Likes
4
Downloads
0
Comments
0

9 Embeds 308

http://www.syamantics.com 253
http://syamantics.com 35
http://www.slideshare.net 9
http://www.linkedin.com 5
http://174.143.27.153 2
http://static.slideshare.net 1
http://www.lmodules.com 1
https://www.linkedin.com 1
http://www.slideee.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Speed Up Your Website Speed Up Your Website Presentation Transcript

    • Eight Simple Steps to Speed Up Your Website! http://syamantics.com
    • Tools
      • Apache2
      • PHP – CodeIgniter
      • Firefox
      • Firebug
      • YSlow
      • Some utility scripts
    • #1. Add Cache-Control Header
      • Use Apache mod_headers
      • Use for static contents
      • Set max-age
      • Set Cache Type
      <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>
      • Specify which types of proxies can cache certain content,
      • and how long files should be cached.
      Header set Cache-Control &quot;max-age=12400, public, must-revalidate&quot;
    • #2. Add Future Expires Header
      • Use Apache mod_headers
      • Use for static contents
      • Set far future expiry date
      <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>
      • 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.
      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.
    • #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.
    • #4. Remove Last Modified Header
      • Totally eliminate requests to check for updates using If-Modified-Since requests
      • And their 304 Not Modified Responses
      • A file will stay cached until the Expires header indicates new content is available!
      <IfModule mod_headers.c> <FilesMatch &quot;.(dcr|W3D|wav|swf|css|js|gif|jpg|png)$&quot;> Header unset Last-Modified </FilesMatch> </IfModule>
    • #5. Use Version Numbering
      • 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.
      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]
    • #6. Turn on HTTP Compression
      • GZIP
      • DEFLATE
      • Use Apache 2 mod_deflate to compress your static contents
      • Do not compress images
      • Support starts from HTTP/1.1
      • All modern browsers support http compression
      <IfModule mod_deflate.c> <FilesMatch &quot;.(dcr|W3D|wav|swf|js|css|w3d|cct)$&quot;> SetOutputFilter DEFLATE </FilesMatch> </IfModule>
    • #7. Minify JS & CSS
      • Minify Javascripts and CSS using minification tools
      • Can be done on the fly and cached for future uses
      • CSSTIDY csstidy.sourceforge.net/
      • JSMIN–PHP code.google.com/p/jsmin-php/
      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' ); }
    • #8. Optimize Images
      • Compress PNGs
      • Compress JPEGS
      • Compress GIFs
      • PNG GAUNTLET – .NET PLATFORM, GUI, BATCH http://brh.numbera.com/software/pnggauntlet/
      • OPTIPNG – WIN/*NIX, SHELL, BATCH optipng image.png http://optipng.sourceforge.net/
      • PNGCRUSH - *NIX, SHELL, BATCH pngcrush -rem alla -reduce -brute image.png result.png http://pmt.sourceforge.net/pngcrush/
      • JPEGTRAN - *NIX utility, BATCH jpegtran -copy none -optimize -perfect src.jpg dest.jpg
      • IMAGEMAGICK - *NIX identify -verbose image.gif http://www.imagemagick.org/
      • Case Study
    • Before
    • After
    • Before After
      • BENEFITS
      • Faster
      • Saves Bandwidth
      • Less Pressure on Server
      • THANKS!
      MORE INFO: Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html
    •