[Sam Granger]

I thought I'd make a post about speeding up the front-end of a website. We all love sites that load fast don't we? So what can you do to improve your websites speed?

1. Reduce HTTP Requests - Try to reduce the amount of files to load. This can include people having tons of javascript and CSS files. Try to keep this to a minimum where possible. However, the main thing that people don't do is make use of sprites. Sprites are basically images combined into one image. If you have a menu for example with a background image with a hover, it's best to have the hover background under the main background in the same image file. This is a very simple example but if you think about it, you can combine all kinds of images into one. By doing so, reducing the amount requests and images are then already preloaded so you don't get any annoying hover issues.
2. Using remotely hosted files - Many files such as jQuery libraries are hosted for free on big sites such as Google. Quite a few sites already include these files. By doing so, a user may already have the file in their cache. Make sure that the file is on a fast and reliable server. Google: http://code.google.com/apis/ajaxlibs/

If you have any other suggestions or comments please post! If you have anything to add to the list, please share.

Ofcourse you can also compress your js files and use gzip but focussing on the HTML/CSS and ways to include files here.

[Will Roberts]

Clean Your Code - Try to make sure your code is small and clean. Even with CSS it is sometimes easy to go overboard with your <div> tags but with a little perseverence you may find you can limit them a lot more.

Smaller Images - Most of the time your images can be shrunk even more than you are doing. Try experimenting with filesizes whilst saving your images and you will notice an increase in speed on all of your pages. Sometimes you can even create your desired effect using CSS in your documents so look at that first as CSS is less bulky in size.

Repeater Images - Repeater images are generally used for things such as title bars where there is a gradient stretching vertically or horizontally. A lot of the time people use one large image covering the complete area they need to fill rather than creating a much smaller version and setting it to repeat using CSS. Always try to make use of repeater images where you can. Repeater images are much smaller in filesize and allow the same (if not more) flexibility.

[LewisR]

good read

[paulOr]

Making my sites fast is something im really crap at, so thanks for the tips

[Sam Granger]

Making my sites fast is something im really crap at, so thanks for the tips

Funny and sad thing is, programmers spend more time trying to get a site loading a few milliseconds faster than frontenders spend on speeding up the html/css code - which makes a bigger loading speed difference.

[Salathe]

The Yahoo developer zone has an area dedicated to front-end performance (*giggle*) with lots of well thought out "rules" to aid in this process. A great place to start is their rules page: Best Practices for Speeding Up Your Web Site.

[Sam Asante]

Good read.
I think I'll try using sprites in a navbar next time I code one of my designs.

[Gaz]

One of the main errors that I used to make was to use too many divs. A regular example of this I see is:

<div id="nav">
<ul>
<li></li>
</ul>
</div>

Because ul is a block level element the div is not needed. I used to call this "DIVITIS"...!

[Sam Asante]

One of the main errors that I used to make was to use too many divs. A regular example of this I see is:

<div id="nav">
<ul>
<li></li>
</ul>
</div>

Because ul is a block level element the div is not needed. I used to call this "DIVITIS"...!

Does having Divitis effect the load time a lot?

[Gaz]

Maybe not a huge deal, but I'm sure it would, yes. And taking in to account semantics etc. (not the purpose of the topic but still valid and important).

[Sam Granger]

Does having Divitis effect the load time a lot?

Not really but it's unnecessary code really. Key to good code is to keep it as clean as possible.

[Alex Leeds]

Not really but it's unnecessary code really. Key to good code is to keep it as clean as possible.

If by clean you mean:

CODE

<body>
    <div>
        <li>
            <a>link</a>
        </li>
    </div>
</body>

Then you would be incorrect. Although this is awesome for developmental stages. The best coding style is to take away ALL white spaces and tabs to reduce file size which will then reduce the amount the client has to download allowing a faster page load time.

Something like this is more efficient:

CODE

<body><div><li><a>link</a></li></div></body>

Also remember to compress your clean your css and javascript of ALL white spaces as well and not to double define when not needed.

Also another technique used by many companies out there is having images and javascript files on another deomain/subdomain. The reason for this is because a browser only opens two simultaneous connections to one single server. And browser will cache the dns immediately so you don't have to worry about the extra dns resolving going on due to the extra domain.

Another thing to point out is not using useless comments in css and html along with javascript. It's totally not needed and if you don't know whats going on then don't code

Anyway this is all I can think of at the moment since its getting kinda late here.

Enjoy!

[Will Roberts]

One of the main errors that I used to make was to use too many divs. A regular example of this I see is:

<div id="nav">
<ul>
<li></li>
</ul>
</div>

Because ul is a block level element the div is not needed. I used to call this "DIVITIS"...!

The code you posted above is 100% ok to use and is not an "error". Sure you could shrink it a little and remove the div but what if you have a navigation bar that stretches 900px and you only want your menu to be 600px?

Simple, you use.....

CODE

<div id="nav">
<ul>
<li></li>
</ul>
</div>

That is why you see this used more and more

[Diffraction]

It depends on this situation. Don't get in the habit of divitis.