Easy Steps to Optimize Your Website

You can write million things on website optimization for speed. Here are few of them important steps which need to consider for the same.
Easy Steps to Optimize Your Website
1. Run your images through smushit.com.
While it’s obvious to keep your image sizes down as low as possible, it’s not as obvious that some image editing programs like photoshop can add extra meta and formatting data in your images. Its viewable if you open the image in a text editor.Smushit is a firefox plugin that strips out all of this extra formatting and can reduce your image sizes without sacrificing quality. Once the plugin is installed, simply go to the webpage you want to optimize, click the smushit icon in the bottom right of your firefox window, and smushit will tell you how much you can save on each image as well as give you a zip file filled with the smushed images.

2. Use the Fastest CSS Selectors.
When styling the HTML elements there are many ways to do this, but according to me you should just try to style tags like,

a, img
next fastest way is css by class like,
.link
Then its Then its descenders:
Div p a.link
Finally the slowest is child selectors,
div > div > div > p > a.link

3. Use Sprite CSS
To reduce your HTTP requests which are most important thing in optimization, all of your background images, put them in one combine image, and use sprite CSS to use them, also don’t repeat that image and then if you want to set some part of that image in background you can do like example below.

.myClass{
background:url(images/spriteimage.png) -15px 0 no-repeat;
}

4. Run all of your css and JS files through compressors.
To keep code size less your all CSS and JS files should be compressed. Many of the professionals are agreed with this technical aspect of website optimization. For CSS compressor you can use utility like [http://iceyboard.no-ip.org/projects/css_compressor]
When it comes to compress JS files Yahoo! has a service Yahoo’s YUI compressor, which is most popular among most of other services as they are inaccurate or not functioning well.

5.Try to use Image formats – JPG, PNG, GIF
Always use jpg, pngs and gifs in your site don’t even use bmps, wbmps as they are too large and outdated formats. Try to reduce image sizes when making them from photoshop.
Use <script> tags in bottom
Always include your all <script> tags into bottom just above your <body> tag, as when browser is rendering your page it always download all js, css images, so it is better to load js after your html renders.

6.Attach scripts without blocking parallel downloads.
If you cannot place your script in bottom there is a way where you can put them without blocking parallel downloads. You can attach them using JS itself

var js = document.createElement('script');
js.src = 'examplescript.js';
js.type = 'text/javascript';
var head = document.getElementsByTagName('head')[0];
head.appendChild(js);

7.Implement CDN
Just distribute your site assets to other domain or sub domains, Idea behind this implementation is browsers download 2 items parallel with one domain, so if we put assets on other domain that will download things parallel with other domain so as a result page will render fast.
But it is advice that you should not have too many DNS lookups in you pages as each subdomain forces browser for DNS look up and that might cause speed issues again.

8.Gzip your components.
This is not the easy step to implement as many people don’t aware with this. The basic idea here is, reduce component sizes. By Gzipping components [http://www.thewojogroup.com/wp-content/uploads/2008/10/Picture-16.png]
If your site is running on apache, you can use .htaccess file to compress components.
See example .htacess file to achieve the same

 mod_gzip_on Yes
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include mime ^application/json$
mod_gzip_item_include mime ^text/.*$
mod_gzip_item_include file \.html$
mod_gzip_item_include file \.php$
mod_gzip_item_include file \.js$
mod_gzip_item_include file \.css$
mod_gzip_item_include file \.txt$
mod_gzip_item_include file \.xml$
mod_gzip_item_include file \.json$

If you have Apache 2 add this to the .htaccess file instead:

AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml
application/x-javascript application/json
Header append Vary Accept-Encoding

If you have trouble doing this and if your site build in PHP script, PHP has functions which does the same thing.

Feel Free to comment on this.

You might like:

Leave a Reply