Strange Symphonies The best way to predict the future is to invent it

Losing Web Customers in 4 seconds? Tips and Tricks!

4 seconds, thats a pretty short amount of time. 1, 2, 3, 4...presto, gone!

Well that's how long people are saying your site needs to load before losing potential. Customers. Alright, its true, If pages don't load quickly I get irritated, very irritated if they don't load at all. And then toddle along somewhere else.

But with the creasing usage of tabs and multi tasking the "load in 4 pages" rule isn't going to hold up. They (at least I) am distracted by my other possible open 20 tabs to browse through. Lots of stuff there to keep me busy. While reading the site I open links in new tabs, so they load in the background while I'm continuing reading (Firefox Hint! Ctrl-click opens a link in a new tab). Then again, I'm not the average Joe. If your customers are thoroughly concentrated on the site, then yes. This rule applies, you cannot break their train of thought. You want them to make that purchase, you need that purchase! So load!

Humbug...they didn't even suggest how to make things load in under 4 seconds.

Without going into the technical details, lets see what we can do to the HTML/CSS/Javascript part at least, because I am more confident in that section. Similarly these don't just apply to improving loading times, they help in keeping your code clean and tidy.

So lets see how we can save a few kilobytes...

Trimming the X/HTML

Though possibly the most dangerous (Yes you have been warned!) is to trim your HTML code. Make it shorter, neater, cleaner. This also includes into Javascript and CSS.

Wrong!

First of all HTML is dead. Learn XHTML script kiddies. Second, <table< tags are also dead. Learn up < div > tags. Okay some pretty serious claims here, but I'm dead serious about this. You can remove alot of 'cruft' from your HTML by learning to use concise <div> tags, don't go crazy now on them. You can still rely on the beloved <table> but just watch out, k? If your X/HTML isn't well formed (meaning you may be missing or have extra tags), then your site would look screwy.

Correct!

Much cleaner code

Clean up those Styles!

Wrong!

Hello World

I still see this around! For describing 1 or 2 elements, I'll give some leeway. But when they are done into a bunch of list elements < li > thats just suicide! Stuff like this should be moved into stylesheets, which can be cached (read further on) to further improve the mad speedz! Similarly stylesheets provide many benefits! Separation of content and logic, you can categorize elements into a class, then easily update them only. Update one, update all! Their brilliant! Best thing since sliced bread!

Learn to use them people!
Correct!

Hello World

Clean up those Stylesheets!

So now that people are using stylesheets, they manage to use them wrongly.

Wrong!

.box {
border-width: 1px
border-color: #fffff;
border-style: dashed;
}

Alot of the CSS elements can be grouped together for example the above can be magically tranformed into:
Correct!

.box {
border: 1px #ffffff dashed;
}

If you can, trim those hex colors!
Wrong!

.box { color: #ffffff }
.box2 { color: #aabbcc }
.box3 { color: #abbccd }

Certain pairs can be grouped together if they are the same code. Only shrink them when you can get three characters. Possible Pairs: 1st & 2nd, 3rd & 4th, 5th & 6th
Correct!

.box { color #fff; }
.box2 { color: #abc; }
.box3 { color: #abbccd; }

Notice how the last one doesnt change? It's because the pairs don't correspond.
Wrong!

.box {
border-top: 1px #fff dashed;
border-left: 1px #fff dashed;
border-right: 1px #fff dashed;
border-bottom: 1px #fff dashed;
}

Humbug, similar to the example above, these thing scan be grouped together.
Correct!

.box {
border: 1px #ffffff dashed;
}

What happens if you only need one side to be different?

.box {
border: 1px #fff dashed;
border-right: 1px #999 dotted;
}

Process of elimination of course!

Tips and Tricks:

Cache Static Items

A production box should cache static items which includes: images, CSS, Javascript. (Yes dynamic images do exist, so be careful).
They should also utilize the HTTP Cache Headers. You might think about put thing them in a domain for fine control, for example http://static.example.com/ .

Stripping CSS and Javascript

Though they have/can be cached, cache always runs out. And not everyone has access to turn caching on for certain elements. But you can do a bit of magic for CSS and Javascript. Use sed or other text manipulation tools to remove comments, empty lines, and starting and trailing spaces. Sure its a bit more difficult to read, but this is only meant for production. You still have your master development code, from which you can keep hacking on, right?

Apply these now!

Looky looky a competition for making a website in under 10KB (10KB for graphics, not the code). But you get the idea, now go for it! The prizes do look nice though.