There are more than trillion webpages over the internet. Research shows, that an average every day Internet user visits about 300-500 pages a day. Time is money, nowadays, every second makes a difference, Internet users have become impatient, for almost anything and everything, they rely on search engines to help them seek what they are looking for.

Websites need to be fast, shouldn’t make its visitors wait a lot. So here are some practices if followed will help your website faster.

1. Minimize HTTP Requests

One way to reduce the HTTP Requests for a website, is to simplify its design. Content is still the most important thing majority of users look for over looks. We can try to achieve appealing looks for the websites by using simple design techniques.  Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.

1.1 Load all at once … locally

The most important thing, reduce the number of files which are included (i.e mainly CSS and Javascripts) . Try to reduce the no.of required CSS files to render your website. Similarly, put all your JS into one file and then load it. Remember to store your JS locally (within your website), instead of calling it off another website.

Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

Try to avoid loading Javascript libraries from other websites in a bid to save bandwidth or for any other reason. For example, Users try to load jQuery library file off jQuery.com or from Google Script Hosting.

The problem caused by scripts is that they block parallel downloads. The HTTP(1.1 specification) suggests that browsers download no more than two components in parallel per hostname. While a script is downloading, however, the browser won’t start any other downloads, even if they are on different hostnames.

1.2 Make the CSS/JS File External

Try to avoid huge chunks of CSS code or JS code written directly inside the document HEAD. When CSS/JS files are made external, they can be cached by browsers and no need to download em again and again.

2. CSS – Stylesheets

2.1 Placement of Stylesheets

Always load stylesheets inside the document HEAD (on the top). This is because putting stylesheets in the HEAD allows the page to render progressively.

The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.

The HTML specification clearly states that stylesheets are to be included in the HEAD of the page. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.

2.2 Compress CSS

These are ways through which, your CSS can be minified, i.e removed all redundant white-space and comments. Use any online CSS Compressor utilities like

• http://www.cssdrive.com/index.php/main/csscompressor/
• http://developer.yahoo.com/yui/compressor/ – Yahoo User Interface Compressor (also minifies JS)

Remember, do not go on how many KB’s it saves but how much % size of your stylesheet does it compress.

Web Development Codex style.css

Original size: 30846 bytes
Compressed size: 25125 bytes
Savings: 5721 bytes (19%)

Every byte does make a difference

2.3 Avoid CSS Expressions

I never use them. CSS Expressions are a way of making CSS dynamic.

The problem with expressions is that they are evaluated more frequently than most people expect. Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page. Adding a counter to the CSS expression allows us to keep track of when and how often a CSS expression is evaluated. Moving the mouse around the page can easily generate more than 10,000 evaluations.

Yahoo Performace Rules

2.4 Use CSS background instead of <img>

Every <img> makes an individual request to the server. Its always a good practice to reduce the number of images called via <img> and instead use CSS to include images in a website viz background:url("#");

3. JS – Javascript

3.1 Placement of Javascripts

Scripts are recommended to be put in the bottom, just before the </body> tag. But some scripts cannot be moved to the bottom, the ones which modify any DOM element, write some HTML to some particular DOM. In such cases it is ok to have em included in HEAD section.

Remember, scripts donot allow parallel download while the browser is downloading a script. So try to minimize the number of Javascript external inclusions.

3.2 Compress Javascript Code

There are 2 ways to compress Javascript code.

• Minification - removes all white-spaces, redundant spaces,nextline tags etc. Basically uglify’s your code and makes it harder to debug.
• Obfuscation - is an alternative optimization that can be applied to source code. It’s more complex than minification since it tends to pack the source code and thus more likely to generate bugs.

• http://javascriptcompressor.com/ – Online JS Compressor
• http://crockford.com/javascript/jsmin – Works on DOS
• http://developer.yahoo.com/yui/compressor/ – Yahoo User Interface Compressor (also minifies CSS)

Compiled from : Google Webmasters,Yahoo Developers Network

About the Author

Michael is a freelance web developer. Fluent with PHP, Ruby on Rails, AJAX, CSS and HTML. Runs his own Web Designing Firm viz Vision Master Designs, who deal with customized solutions for business needs, blog design and development. Currently selected with this year's Google Summer of Code, working with Wordpres. Follow Michael on Twitter

Enjoyed the Article ?