Slow web site

Get Started
1

Hello everyone,

I recently built a very simple table based website (it was part of my college coursework on tables).

Green Forest Resort

Here’s a few things I wanna clarify:

  • I used repeated image as a background in the body. When you click next page etc. there’s a short interval of WHITE color (no more than 1 sec) appearing which doesn’t look good - I guess this is time it takes to download a background image.
  • Images download slowly - is it because of the size…or?

I would appreciate any thoughts on this.

PS. This is HTML table based layout (some inline CSS at the bottom).

2

Try this:



 
<body background="bkgd-2.gif" style='background-color:#3f3' link="green" alink="olivedrab" vlink="darkgreen">
3

I assume you are a beginner as there loads of syntax errors in there and even a FONT. Part of the reason the images load slow is size (and the TABLE element rendering time) and the other because you have hard coded the background styles in HTML whereas CSS is supposed to do the task of background images.

4

Thanks for the tip, xhtmlcoder - I completely forgot about font tag. Will try to do that as well as reduce image size.

5

Thanks John - I tried that style=‘background-color:#3f3’…interesting, the color #3f3…it’s blue (is it…:))?but it doesn’t show up in the background. Anyways, I just checked my site in Chrome…and it doesn’t slow down comparing to Explorer 8…even though I haven’t reduced images size yet…

Anyways, thanks ! Will have to read up on cross browser compatibility…there seems to be tons of info on the web.

6

I had some time on my hands and decided to replace the tables with divs:

Green Forest Resort

he colours require changing but it should be quite an easy task.

7

Great job, thanks John. I will need to do same thing for the rest of the pages.

I am not understanding the purpose of info in between <pre> tags though, with lots of ‘&nbsp’ tags. I also noticed a few ‘php’ tags…was PHP used somehow?

Anyways, I have access to your css file which is good.

8

John used a php script that prints out the source of the specified files. Simply ignore the stuff in the <pre> tags. The   are used in the source print out script to make the code line up pretty for you.

9

k.got it. thanks,rguy84.

10

Some tips on making your site faster would be not using images when possible. When you must use an image, use a jpeg instead of a png. if you must use a pbg die to trasparency, then use a gif. And then, if you must, use a PNG,
Essentially, you are trying to make the image file size as small as possible so that it can load faster. Another way to do this is to make the dimensions of the image smaller.

Secondly, minimise http header requests by linking as few files as possible. this means combining styles into one file and or scripts into one file.

I hope I helped!

11

Actually PNG-8 is smaller than GIF in nearly all cases. So what was meant in the post before and transparency probably was referring to PNG-24 and alpha.

12

Thank you xhtnl coder, that is exactly what I meant.
So from largest to smallest:
Png-24
Max quality jpeg
Low quality jpeg
Gif
Png-8

13

that’s good to know. thanks everyone.