Welcome to WebmasterWorld Guest from 54.205.96.97

Forum Moderators: not2easy

Container background loads too slow

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

WebmasterWorld Senior Member 10+ Year Member



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?
4:13 pm on May 7, 2012 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
5:29 pm on May 7, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
4:55 pm on May 8, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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?
6:46 pm on May 8, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
2:21 pm on May 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Load the image in your HTML document using display:none

<img src="myimage.gif" style="display: none;">
5:25 pm on May 15, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month