Good Advice to Increase your Site’s Speed

March 17th, 2009 by Teylor Feliz Good Advice to Increase your Site’s Speed

speedyoursite
In this entry, I will show you how to increase the speed of your site! Some designers/developers tend to over use images and flash, when plain text would be sufficient. Also, some designers/developers like to use too many cascade styles sheets files for one simple page. Though style is essential to a great site, simplicity is the key when it comes to increasing the speed of your website. In this fast paced world, people want information as soon as possible, and if you do not give it to them, they will leave your site frustrated. The purpose of a website is to give information, so make sure you give it as quickly as possible. This can be accomplished by using simple plain text whenever possible in your site.

In my opinion, the average website should load in no more than 15 seconds. And, when a website takes more than 8 seconds to load, I highly recommend using a loading image to keep the user’s eye (client) patient and quite. Remember that 90% of the time people are looking for information when they enter a website, and they are looking for that information immediately. The simple text information that people are requiring is just 10k worth of information. The extra items that tend to slow a site’s loading time are just design elements used to make your site more pleasing to the eye. Do not get me wrong, style is very important and a visually pleasing site is crucial; however do not sacrifice the speed of your site for non-essential design elements. Also, read below to get other great ideas to speed up your site.

P.S. I recommend, always developing for 56k modem users because that gives you the ability to create websites for all speed without worrying about any issues.

Below please see my entry entitled, “Good Advice to increase your site’s speed:”

Using CSS

a) Always use CSS in your designs. Try to use CSS in external files. That way you can share the same file for multiple pages.

b) I recommend the use of Shorthands in your design because that save some kilobytes in your pages. For example:

  #content {
	width:200px;
	height:100px;
	background-color:#CCCC66;
	border-top-color:#333333;
	border-top-style:solid;
	border-top-width:1px;
	border-bottom-color:#333333;
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-right-color:#333333;
	border-right-style:solid;
	border-right-width:1px;
	border-left-color:#333333;
	border-left-style:solid;
	border-left-width:1px;
}

Can be rewritten like this:

#content {
	width:200px;
	height:100px;
	background:#CCCC66;
	border:1px solid #333333;
}

C) Avoid tons of images and JavaScript using CSS.
There are so many affects you can apply to your designs using only CSS, for example mouseovers, drop down menus, etc.
D) Do not use images instead of text.

Minimizing HTTP Requests

Every file we include in our web page is a request to the server. That includes images, style sheets, JavaScript files, etc. For example:
Reducing all CSS in a single file named styles.css and all scripts in another file named behlayer.js.
Now we have only two HTTP Requests instead of five.
Ajax Frameworks

Why to reinvent the wheel? If you know that there are so many JavaScript Framework that work perfectly. Don’t waste your time and effort coding something that is already done.

A good example of a framework and its potential is JQuery. With this JavaScript Framework you write less and do more… Example:
```
window.onload = function(){
       var mybtn =  document.getElementById('mybuttom');
       mybtn.onclick = function(){
                 alert('Hello Admix Web');
       }
}
```
You can get similar using JQuery Framework:
```
$().ready(function(){
      $('#mybuttom').click(function(){alert('Hello Admix Web');})
});
```
Optimize the images

One of the most important issues in website speed is image optimization. Always choice the right format for the images:

GIF is very useful for background and animation but at the same time it only could has from 2 to 256 colors.

PNG is a W3C recommendation and it is the only one that can have transparency. The only issue is that some browsers like IE6 don’t allow transparency.

JPEG is still the most used compression method that allow compress 5 times the size without loosing the quality. And, it is great for slide shows, pictures, backgrounds, etc.

Some websites just reduce the size of a picture, scaling the width and height properties. However, the picture is going to keep the real kilobytes and you are going to loose some seconds of the page load. Don’t be a couch potato and take your time to optimize the images.

Another tip about images is using the width and height properties to tell the browser the size of your images before start loading. That’s helpful because the browser reserve the space for the image.

There are so many tools you can use to reduce/optimize your pictures, like Photoshop,Paint Shop Pro, Gimp, and the online tool Web Resizer.
JavaScript at the bottom

When the browser requests a web page on the server, the page loads from top to the bottom. If you have a numerous amount of JavaScript files or at least they are so heavy, the browser is going to first load the files that are located on the top and then continue with the ones that are at the bottom (body).

Removing unnecessary code

When we are developing or testing our applications, we always left unnecessary code around. Like commented code, duplicate scripts, duplicate styles, etc.

An alternative for comments in our site is creating a text file with the description of our code, example:

//Description file
//Author: Author Name
//Date: 20/03/2009
-------------------------------------------------------------------
File                 Element                   Comments
-------------------------------------------------------------------
index.html           divajax                    Div to get the answer by Ajax.

Recommended Books

High Performance Web Sites
Website Optimization
Speed Up Your Site

Recommended Links

Yahoo! Developer

Teylor Feliz is a well-known XHTML/CSS/JavaScript enthusiast from Santo Domingo, Dominican Republic. He has more than 10 years experience in the computer programming and development world, including 2 years teaching computer science. He is currently living in Louisiana, where he plans to complete his degree in Computer Science, and begin a Masters in the field.

Subscribe to our RSS

Please help us to promote this article.

Tags: (X)HTML, CSS

Comments 8

Christopher Scott says:

March 19, 2009 at 1:24 pm

Great advice, too often designers forgo speed for looks.

I want to note that whilst PNG transparency support is somewhat limiting, it’s use as a more compact version of a GIF is widely supported.

Reply
sriganesh says:

March 19, 2009 at 1:36 pm

nice articles. , good job.

Reply
joyoge designers' bookmark says:

March 19, 2009 at 2:56 pm

nice article thanks..
trackback:
http://www.joyoge.com/story.php?title=good-advice-to-increase-your-sitersquos-speed-admix-web

Reply
nerieru says:

March 20, 2009 at 3:08 am

A nice addition is minifying your files. It reduces your files by a lot of kb more info about it here: http://code.google.com/p/minify/

Reply
drdesign says:

March 20, 2009 at 9:29 am

Nice article. I will be waiting read yuour upcoming posts!

Reply
Emilio(Florida web designer) says:

March 22, 2009 at 5:44 am

yeah , The ease of your audience is topmost priority and design comes after that . Moreover search engine loves simple sites .

Reply
WebDesignExpert.Me says:

September 2, 2009 at 10:04 am

You could also use punypng for compressing gif/jpg/png images, and you could also use php caching. Search for ‘best practices for speeding up your web site’ at developer.yahoo.com for more tips..

Reply
Richie says:

January 30, 2010 at 9:16 am

Excellent. Even though, I’m not a hard-core web designer. I was able to understand this like an expert.

Thanks for sharing the information

Reply