Common Tips Speed up Website

Posted: September 2, 2010 in HTML

While more and more people are getting access to high speed internet, there are many left on dial up. Be kind to those visitors and do a few, simple things to speed up your webpages. Not only will these tips give you a faster load time, most will also help keep your bandwidth fees low as well! As per search engine optimization our site should be load faster.

Use External Scripts

Use the same script on multiple pages? Switch to an external script. I’m not talking about remotely hosted, I mean loading javascript files from one source instead of adding all that code to each of your pages like this:

<script type=”text/javascript” src=”yourscript.js”></script>

That way the browser already has it in it’s cache and won’t have to read it each time another page loads. This one saves a ton of load time, specially for larger scripts!. Also user external js file after body so at least your content load quickly.

Use CSS for Faster Pages

Even if you decide to use tables, CSS can greatly improve your web sites load time! With your styles in an external .css file, the browser can cache all the formatting and stylizing for your pages instead of having to read each and every single tag all over again. Also it cuts down on long drawn out tags and replaces them with smaller class styles instead.

Avoid Nested Tables

OK, I’m not a big fan of using tables for layout anyway (I’m one of those people that believes content and presentation should be separate.. but that’s another tip page). With that said, if in your templates tables seem necessary (or the easier way to do it), try to avoid nesting. Why? When you place a table inside another table, it takes a lot longer for the browser to work out the spacing since it has to wait to read the entire html and then work out the layout. If at all possible, try using CSS to create the columns on your page.

Avoid Full Page Tables for Faster Rendering

If you use tables, try avoiding the whole page being one big table. The browser won’t show anything until it’s read the whole thing that way. For a faster loading webpage, either try multiple tables (not nested) or having stuff above the main table to make your content in the first table show up faster. That way your visitors will have something to read while the rest of your page loads. It may not really make you page faster, but it will feel like it to your visitors.

Split Up Long Pages – Multiple Short Pages Load Faster

By splitting up long pages into multiple pages you not only make the content show up faster but many people that see a very long scroll bar give up. Remember, people’s attention spans are often shorter than a grasshoppers (OK, not literally, but you get my point) since so much information is available at our fingertips. Try breaking it up into more readable lengths.

Keep Your Code Clean

If you do use a wysiwyg editor, most times the will add useless code to your pages for example, many will leave empty tags (ie. <font> </font>). Removing any of those excess tags will not only speed up your load time, but make you pages validate a lot cleaner.

Remove Excess “Whitespace”

Whitespace is the spaces between your coding, removing the unneeded tabs and spaces can help a lot! Doing this will take a lot of extra bytes off the total size of your page and will speed up load time quite a bit. (Careful using automatic squishers, I find they often squish too much and makes it rather hard to edit later.)

Speed up Images Load Time

Height And Width Tags

When the page loads and the image size is already defined (ie. you’ve used the height and width tags), the browser knows where everything will be before the images are loaded. Otherwise the page has to wait and load the images before the text. Same goes for tables, so try to use width tags when possible on those as well for a speedier page.

Don’t Go Overboard On Images

While images can greatly enhance the look of a site they can really slow it down if there are too many. Try to decide if all your images are really needed (quite a few nice effects can be done with css, so sometimes images are unneeded.)

Faster Images? Reduce Their File Size

There are many totally free, online image optimizers so you don’t even have to install anything and it’s extremely easy! some online image optimizer will greatly reduce the file size of your gif, jpg, or pngs and neither you or your visitors will be able to see the difference other than a page that loads a heck of a lot faster. They also keep the transparency and animations in gifs!

GIF vs JPG vs PNG

Personally on new sites I design I tend to go for optimized pngs. They have lossless compression (jpgs are lossy) and can be used without worry (gifs have the potential to have copyright issues) and load fast when optimized. Jpgs however are usually better for photos and sometimes highly detailed images. The best idea is really to try the image you want in different formats and compare file size to quality.

Here’s a bit of fast info… If you don’t need sharp resolution, choose PNGs or GIFs over JPEGs, as PNGs and GIFs generally load quicker. JPGs are generally best for photos, PNGs or GIFs for anything else.

Advertisements
Comments
  1. abid says:

    Sir, G8 tips give me,

    Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s