Website optimization

Web Site Optimization

Why ???

To know some basic rules/practices while
developing a web-application.

Whom ???

Web devlopers who are working html,css,js and
other web technology.

What ???

Its difficult to implement all the points that we
discuss today. But we can check something.

In this session we'll go through 4 basic stuffs.

Basic optimization rules

Optimizing assets (images, scripts, and styles)

Optimizations specific to scripts

Optimizations specific to styles


Decrease Download Sizes

Keep all the assets as lightweight as possible

Creating lean HTML code

Make Fewer HTTP Requests

Combine scripts and style sheets

Use image sprites

Avoid redirects

Avoid frames
Basic Optimization Rules


Use a Content Delivery Network (CDN)

Host Assets on Different Domains but Reduce
DNS Lookups

Place Assets on a Cookie-free Domain

Split the Assets Among Domains

Use the Header Expiry/caching

Serve gzipped Content

Handling web images
Optimizing Assets

Using a Content Delivery Network – CDN

CDN is a network of servers in different
geographical locations.

Each server has a copy of a site’s files. When a
visitor to your site requests a file, the file is
delivered from the nearest server

Its expensive :(
Optimizing Assets

Why host assets on different domains ?????
Seems its an extra headache for me !!!!! :(

The biggest impact on end-user response times
is the number of components in the page.

Each component requires an extra HTTP
request.

Browser allows a limited number of component
for parallel downloading per host. (mostly only
2)
Optimizing Assets

Lets see what if there is parallel download....
Lets assume we have 10 components along with
the page.
Optimizing Assets

What if components are on different domains..
( Create subdomains and host assets )
Optimizing Assets

Warning !!!!!!!!!!

Depending on your bandwidth and CPU speed,
too many parallel downloads can degrade
performance.

It takes about 20-120 milliseconds for DNS
(Domain Name System) to resolve IP address
for a given hostname or domain name and the
browser cannot do anything until the process is
properly completed.
Optimizing Assets

Place Assets on a Cookie-free Domain

If you set a lot of cookies, the request headers
for your pages will increase in size, since those
cookies are sent with each request.

If you use subdomains to host your assets, you
need to make sure that the cookies you set are
for your canonical domain name (e.g.
www.example.org) and not for the top-level
domain name (e.g. example.org).
Optimizing Assets

Customized Expiry header.....

By using a customized Expiry header, your web
components like images, static files, CSS,
Javascript skipped unnecessary HTTP request
when the same user reload the page for the
second time.

Setting the Expires header in Apache is easy:
Lets see the example on next slide
Optimizing Assets

Example Expiry header.....
Add an .htaccess file that contains the following
directives to the root folder of your i1 and i2
subdomains
ExpiresActive On
ExpiresDefault "modification plus 10 years"
If you want, you can even set an expiration date per file
type:
ExpiresActive On
ExpiresByType application/x-javascript "modification plus 2 years"
ExpiresByType text/css "modification plus 5 years"
For more : http://httpd.apache.org/docs/2.0/mod/mod_expires.html
Optimizing Assets

Handling Web Images...
Images are important part of your website.
However if they are not properly optimize, they
can become a burden and end up utilizing
unpredictably large amount of bandwidths on
daily basis.

Don’t Scale Images. Always practice inserting the
width and height for each images. Also don’t scale
down an image just because you need a smaller
version on the web. For example: Do not force scale a
200×200 px image to 50×50 px for your website by
altering the width and height. Get a 50×50 px instead.
Optimizing Assets

Serve gzipped Content...

Apache 1.x and 2.x can automatically compress
files, but neither one comes with a compressor
enabled by default. Enabling compression
reduces CSS, HTML, and JavaScript file sizes
by 55-65% and speeds up overall page load
times by 35-40%.

Apache uses plug-in modules to add
functionality. For Apache 1.x, use the free
mod_gzip module to compress files. For
Apache 2.x, use mod_gzip or the built-in
mod_deflate module.
Optimizing Assets

For gzipped Content...

The mod_gzip module can be used with Apache 1.x or 2.x,
but it doesn’t come with either Apache distribution. You’ll
need to download and install it separately.

Add the following lines to your server configuration file or
to a site’s “.htaccess” file:
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
Optimizing Assets

For gzipped Content...

For IIS
http://www.smallworkarounds.net/2009/01/aspnet-iis-tricks-using-
gzip.html
http://jeeshenlee.com/2010/08/01/how-to-gzip-on-asp-net-and-godaddy/
Optimizing Assets


Merge .js f iles

Minify scripts

For Minify http://compressor.ebiene.de/

http://javascriptcompressor.com/

Place scripts at the bottom of the page

Remove duplicates
Javascript Optimizations

Merge script files ….

You should aim for your JavaScripts to make as
few requests as possible; ideally, this also
means that you should have only one .js file.
This task is as simple as taking all .js script files
and placing them into a single file.
Example : http://code.google.com/p/phpflair/
Javascript Optimizations


Merge and Minify

For Minify http://compressor.ebiene.de/

http://www.cleancss.com/

Place styles at the top of the page

Ban Expressions

#content {

left: expression(document.body.offsetWidth)

}
CSS Optimizations

#element-id{
background-image: url(image.png);
background-position: -8px -8px;
width: 16px;
height: 16px;
}


Firebug’s Net panel for Firefox, at
http://www.getfirebug.com

YSlow, Yahoo!’s performance extension to
Firebug, at http://developer.yahoo.com/yslow/

LiveHTTP Headers for Firefox, at
http://livehttpheaders.mozdev.org/

Fiddler — for IE, but also a general-purpose
packet sniffer, at
http://www.fiddlertool.com/fiddler/

Web Inspector for Safari, at
http://webkit.org/blog/?p=41
TOOLS FOR PERFORMANCE OPTIMIZATION

Website optimization

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Website optimization (20)

More from Mindfire Solutions (20)

Recently uploaded (20)

Website optimization