Container background loads too slow

Forum Moderators: not2easy

Message Too Old, No Replies

Container background loads too slow

Lorel

10:58 am on May 6, 2012 (gmt 0)

I have a website set up with a dark green background in the body with a small image (fake columns) about 20 pixels high that tiles down the page in the container area.

Everything else on the page loads first and while that is happening the green background shows up. The whole page takes 43 seconds to load according to a download site with images taking up 189K. However, I tried removing most of the images and one security logo with no affect -- the green background still loads first.

Here is the CSS:

body {
margin:0;
padding:0;
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color:#030; }

#container {
position:relative;
width: 900px;
margin: 0 auto;
border: 1px solid #000000;
min-height: 600px;
background-image: url(assets/parchment_columns2.jpg);
background-repeat: repeat-y; }

Can someone tell me what might be wrong?

rocknbil

4:13 pm on May 7, 2012 (gmt 0)

You say it tiles. Have you optimized it? Is it something you can reduce to a single pixel high and allow that to tile?

Experimented with .gif, and reduced the .gif palette as much as possible? You can get as little as 1/10 file size out of a .gif as you can with other formats. Seriously, 1/10 the size. You may have to compromise a little in terms of "image quality" but honestly 189 K for a single image is just gigantic.

If it's just the green BG flash that bothers you, you can assign **that** background color with Javascript after it loads. Not a perfect solution, but it will get over it.

Lorel

5:29 pm on May 7, 2012 (gmt 0)

Sorry I wasn't clear enough. the whole page's images equal 189K in total. The background image in question is only 812bytes so that is hardly slowing anything down. I can save it as a gif and it will reduce it to 500bytes. not a big change.

I have other sites set up with the same design and only this one slows down the container image from loading.

Lorel

4:55 pm on May 8, 2012 (gmt 0)

I changed the container background image to a 1 pixel height and saved as a .gif but it still loads after the body background which is a solid color and not an image.

Any other suggestions that might help?

Lorel

6:46 pm on May 8, 2012 (gmt 0)

I figured out the solution myself. The problem was the body background (green) loads first behind the whole page content (images and text) THEN and the image in the content area loads slower (tan colored background). So I added a plain color to the content background so the plain color loads fast and then content then the tan background image. On a fast computer you can't even tell the difference.

thecoalman

2:21 pm on May 13, 2012 (gmt 0)

Load the image in your HTML document using display:none

<img src="myimage.gif" style="display: none;">

Lorel

5:25 pm on May 15, 2012 (gmt 0)

I I tried that. didn't work. The other works fine.