In this entry, I will show you how to increase the speed of your site! Some designers/developers tend to overuse images and Flash when the plain text would be sufficient. Also, some designers/developers like to use too many cascade styles sheets files for one simple page. Though the 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 on 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 quiet. 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 at all speeds 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 saves some kilobytes on 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 written 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:
<link type="text/css" href="css/styles.css" rel="stylesheet" rev="stylesheet" />
<link type="text/css" href="css/header.css" rel="stylesheet" rev="stylesheet" />
<link type="text/css" href="css/alternative.css" rel="stylesheet" rev="stylesheet" />
<script type="text/javascript" src="js/actions.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
Reducing all CSS in a single file named styles.css and all scripts in another file named behlayer.js.
<link type="text/css" href="css/styles.css" rel="stylesheet" rev="stylesheet" />
<script type="text/javascript" src="js/behlayer.js"></script>
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 frameworks 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 result using the 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