advertisement

Speed Up Your Website

75 %
25 %
advertisement
Information about Speed Up Your Website

Published on October 30, 2008

Author: anupom98

Source: slideshare.net

Description

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

Eight Simple Steps to Speed Up Your Website! http://syamantics.com

Tools Apache2 PHP – CodeIgniter Firefox Firebug YSlow Some utility scripts

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;

Use Apache mod_headers

Use for static contents

Set max-age

Set Cache Type

Specify which types of proxies can cache certain content,

and how long files should be cached.

#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.

Use Apache mod_headers

Use for static contents

Set far future expiry date

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.

#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>

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!

#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]

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.

#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>

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

#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' ); }

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/

#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/

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

Case Study

Before

After

Before After

BENEFITS Faster Saves Bandwidth Less Pressure on Server

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

THANKS!

 

Add a comment

Related pages

How to Speed up Your Website - Hosting Facts

What are the benefits of speeding up a website? As a website owner, the impact of your website speed on traffic, conversions and revenue should not be ...
Read more

10 Ways to Speed Up Your Website - The Daily Egg

Even a 1-second delay in your website`s load time can lead to lower revenue and traffic. Try these 10 tips to speed up your website.
Read more

Make the Web Faster | Google Developers

Make the Web Faster; list ... Analyze and optimize your website with PageSpeed tools. ... Speed up your browsing with Google DNS
Read more

How To Speed Up Your WordPress Website – Smashing Magazine

Find out which 12 quick fixes can have a huge impact on the speed of your WordPress website, and other tips and tricks you can use to obtain results you've ...
Read more

How to speed up your website load times | Webdesigner Depot

Do you want your website to load blazing fast? This article will teach you how to make your website load faster than you ever thought possible. In order to ...
Read more

15 Tips to Speed Up Your Website - Moz

Moz Blog Tips tricks, news and tutorials to help you level-up your online marketing; YouMoz Posts submitted by the Moz community, often promoted to the Moz ...
Read more

6 Ways to Speed Up Your Site - Daily Blog Tips

88 Responses to “6 Ways to Speed Up Your Site ... Website Promotion ... I will follow your tips and I hope to speed up my blog.
Read more

GTmetrix | Website Speed and Performance Optimization

GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers ...
Read more

Website speed test

Use this free Website Speed Test to analyze the load speed of your websites, and learn how to make them faster.
Read more

15 Easy Ways to Speed Up WordPress - Sparring Mind

If you're looking to speed up WordPress without hiring a web developer, you need to read this article!
Read more