• Save
Speed Up Your Website
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Speed Up Your Website

  • 3,944 views
Uploaded on

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,944
On Slideshare
3,634
From Embeds
310
Number of Embeds
9

Actions

Shares
Downloads
0
Comments
0
Likes
4

Embeds 310

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
https://www.linkedin.com 2
http://www.slideee.com 2
http://static.slideshare.net 1
http://www.lmodules.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Eight Simple Steps to Speed Up Your Website! http://syamantics.com
  • 2. Tools
    • Apache2
    • PHP – CodeIgniter
    • Firefox
    • Firebug
    • YSlow
    • Some utility scripts
  • 3. #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;
  • 4. #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.
  • 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. #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>
  • 7. #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]
  • 8. #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>
  • 9. #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' ); }
  • 10. #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/
  • 11.
    • Case Study
  • 12. Before
  • 13. After
  • 14. Before After
  • 15.
    • BENEFITS
    • Faster
    • Saves Bandwidth
    • Less Pressure on Server
  • 16.
    • THANKS!
    MORE INFO: Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html
  • 17.