Basic Ways To Speed Up Your Web Site

[kvarnerexpress 0]

Speed is certainly one of the most important factors when it comes to making a successful web site. These days people have high expectations, they expect a web site to load as fast as an application on their operating system, and therefore even a few seconds of waiting can frustrate them or leave altogether.

 

A good website should take about 8-12 seconds (for a 56K) to load. The website owner is going to have to decide how fast its pages are going to be, for example for a multimedia or a flash site they can afford to be a bit slower than others provided that the users know the nature of the site.

 

If you're curious as to how fast you're website is here are two websites that checks your speed:

 

http://www.vertain.com/?sst

http://www.websiteoptimization.com/services/analyze/

 

Ways to speed up your website

 

HTML issues:

 

- Use CSS where possible: Because pages with stylesheets load faster than those web sites designed with font tags and tables, and also it's much faster and easier to make changes. (Some resources on CSS http://www.w3schools.com/css/default.asp, http://websitetips.com/, and http://forums.xisto.com/no_longer_exists/)

 

- Stay clear of nested tables: Nested tables are basically tables within tables, but too many of theses can really slow down the browser. When a page loads the browser starts from the top and goes down in a consecutive manner, with nested tables it has to find the end of the table before it can display the entire thing.

 

- Specifying height and width: For tables and images it's a good idea to specify their height and width, as it helps out the browser and therefore speeds up the process.

[master_bacarra 0]

A good website should take about 8-12 seconds (for a 56K) to load. The website owner is going to have to decide how fast its pages are going to be, for example for a multimedia or a flash site they can afford to be a bit slower than others provided that the users know the nature of the site.

i've checken the first one of the links. it said that my website loaded in aroung 1.something seconds. looking at your definition of a good website being loaded, does it make my website look good or bad?

- Stay clear of nested tables: Nested tables are basically tables within tables, but too many of theses can really slow down the browser. When a page loads the browser starts from the top and goes down in a consecutive manner, with nested tables it has to find the end of the table before it can display the entire thing.
- Specifying height and width: For tables and images it's a good idea to specify their height and width, as it helps out the browser and therefore speeds up the process.

my webpage contains nested tables at level 2 meaning there are only two tables one is nested inside the other. but my page is loading quite well. although i don't specify the height and width of some of the images. tsk.

[Lozbo 0]

I believe that if the deffinition given for 8 to 12 seconds, one dot something is outsandingly good for the average speed time, I dont think it makes your website look bad, I dont even know why would you ask such thing...Anyway tables are necessary, but only for tabular data, like an ordered list of items with more than one field. But as of tables for design or layout, the main problem with them is that they are not as accessible (for the visually impaired mainly) as a pure xhtml / css driven layout, and besides you can totally upgrade your website design very quickly withouth touching the xhtml documents... And mbacarra, could you post a link to your site?

Edited March 4, 2006 by Lozbo (see edit history)

[tuyetmy 0]

I did the test on both links, and the second one was more detailed, and I didn't realized how long it toke my page to upload, since my whole layout is pictures, that are good quality, which is larger. Toke for dial up (56k), about 68 seconds to load. Damnn, that's real slow! But with my internet, the first link said it takes 2 seconds... but I think that's only my connection. Well thanks for the tip, well now I'm going to optimize more.

[rvalkass 5]

Some useful little tools, great finds kvarnerexpress. Using the first one, the main page of my site takes about half a second to load. The second tool gives more information and useful tips and such. Justa few more tips to speed your site up:

Reuse images and make them as small as possible

In forums and other scripts turn on the GZip compression

Don't use multiple external files of the same type. E.g. combine all your CSS into one document.

[Tyssen 0]

http://www.websiteoptimization.com/services/analyze/

If you've got the WebDev extension for Firefox you can get to this under the Tools menu.

[Chez 0]

Wow, cool, thanks for the links! Even though my most detailed and complicated site clocks in at a mere 4.79 seconds, I'm still going to smack it around til I get 2.00

[Dragonfly 0]

Very useful tips on making websites load faster. The problem is images. If I want to make it looks good it should retain the maximum colors which give clarity to the images but just for the sake of loading faster if I reduce the picture quality clarity is being sacrificed.

 

I'm still thinking if there is another way to implement this. Because my site needs many images in the homepage itself.

 

And for CSS, what rvalkass said is very useful. Putting all the CSS in one file. I used to have different css for different pages. Nice tip.

[Saint_Michael 3]

ok that is odd i tried both of them gfxtrap is clocked at 3 seconds the other is clocked at 58 seconds (56k) which one is right?But to comment of external css files, I find it more convient to use more then one external sheet, only for a few reasons. using css sheet for layout purposes and using the other one for content purposes. it also gives a little breathing room to locate the error your trying to find.But of course in order to use more then one external style sheet you have to use the correct coding as well, so css can lag if you don't use the right coding.

[jmb2006 0]

well you may or may not know this but say you have a head banner at the top of your site and is what 700kb in size, that will take a while to load especially on 56k dial-up, well in cases like this all you need to do is open up the banner in MSPaint then save it then exit paint, after that your banner should still be the same quality but now only around 200kb, works for me 80% of the time, if your going to do this make a backup of the image first otherwise you MIGHT end up ruining your banners quality forever unless you have the PSD saved

[Lozbo 0]

Hey jmb2006. that is interesting, you mean the exported jpg or gif should be opened up in ms paint and just save it as it is? You mean it doesnt save on ms-paint format? I will try it, but as of now, I'm reluctant to believe it.

About time variations in sites, let's do a test, lets grab a site, say

http://forums.xisto.com/no_longer_exists/

for instance (or propose something else if you like), and see what people find out to be clocking in their own machines... I tryed it with the firefox webdeveloper extension (for this site) and got:

14.4K 128.34 seconds
56K 33.45 seconds
T1 1.44Mbps 1.47 seconds

And with vertain:

Page speed: 6.19 sec

Does any one know what are the references for vertain's way? (the link that kvarnerexpress provided at the beggining of this thread: http://www.vertain.com/?sst )

[Inspiron 0]

Another tip is to minimize the use of javascript, especially during onload events and using multiple timers. Having your page to automatic refresh requires javascript to run a timer. This will slow down your site's response and increase your total bandwidth everytime it refreshes.

[WindAndWater 0]

A few more tips:1) Know your audience. Example: If the main people you're trying to get to view your site are college students, then they're going to be on at least a Cable or DSL line, so worrying about how a page will load on a 56k modem is fairly irrelivant. Same with most business users.2) Pretty much any flash content will bog your site down -- use it sparingly.3) Keep your images small. a. Most everything should be saved as a .jpg. If you have photoshop, when you save a file as a .jpg, you should be able to select the quality you want. Usually you shouldn't need over "9"; look at the preview and if you don't see any artifacts then decrease the quality until right before you do see them. Gimp (a free alternative to photoshop) has a similar option. Doing this is essential for webpage content as it will usually halve the filesize. b. If your image uses only a few colors or especially if it uses clean or simple geometric shapes, then try saving it as a .png (portable network graphic). Pngs use a very nice algorithm to decrease the filesize and unlike .jpgs they're lossless -- when you save something as a .jpg it'll degrade the image quality (sometimes imperceptably), if you save it as a .png it won't. c. Never save anything as a .bmp or a .tiff, as both are massive and inefficient. d. Only save something as a .gif if it either needs a transparent layer or it's animated.

[Tyssen 0]

d. Only save something as a .gif if it either needs a transparent layer or it's animated.

I'd argue that there are many more cases where GIFs are useful. GIFs in most cases produce similar quality and file size images as 8-bit PNGs. 24-bit PNGs are much better quality, especially when reproducing gradients, but they're also much larger in file size.

[Fermy 0]

that was pretty cool! keep up the posts like this! i love em!