make my background image load quicker?

Question

My background image seems to be loading last. I don't mind the first time, but I was expecting it to be cached, so any subsequent pages that use the same background should be loaded instantly. However the background is only loading once the whole page is drawn.

My css is in the header, most of my js files are at the bottom. (I've kept jquery from cdn in the header too).

The background image, a 1X960 px (2 color gif), is pretty small in size and repeating along Y.

Is there anything I can do to make it load quicker?

To be honest this is noticable in chrome and firefox. In IE8 the backround loads promptly.

Answers your question quite well I think: http://stackoverflow.com/questions/4932664/optimum-size-of-css-tiled-background-images/4932875#4932875 (unless it's not being cached or there's some other problem) — thirtydot, Mar 14 '11 at 09:56
How big is the image and are you calling it via an external CSS? — jackJoe, Mar 14 '11 at 09:59
This seems odd, you're best off linking us to the problem since it doesn't even seem logical an image of that size taking ages to load. — daryl, Mar 14 '11 at 10:08
You're not using Visual Studio dev environment by any chance? — Rob, Mar 14 '11 at 10:17

score 1 · Answer 1 · answered Mar 14 '11 at 12:14

Make the Image Larger

It's only 1px high, some browsers struggle with repeating an image so many times. Try making it 50px high and see if it improves performance. I can't find the answer, but someone showed me once that some browsers really struggle with repeating backgrounds and they use up a huge amount of processing power to render them hundreds of times in repeat.

Different domain

Serving static data from a cookieless domain can improve image loading performance.

score 1 · Accepted Answer · answered Mar 14 '11 at 12:43

Since you are using VS Dev Server this might be worth a shot if you are using Windows 7 (and maybe Vista) it's to do with some DNS/IPv6 problem taking forever to resolve and was something that was driving me stark raving mad with exactly the same issues until about 5 days ago. It was taking 8 seconds to load a 500k page now it takes 383ms

navigate to your hosts file (C:\Windows\System32\drivers\etc) and check that the second localhost entry is commented out as follows with the # symbol:

# localhost name resolution is handled within DNS itself.
127.0.0.1       localhost
#::1             localhost

Commenting out this line fixed the problem instantly - not really sure exactly what the problem was but I know this fixed it.

i had both lines commented out, when i uncommented the 127.0.0.1 it improved — raklos, Mar 14 '11 at 19:13
@Raklos - improved somewhat but not completely or fixed the problem entirely? — Rob, Mar 14 '11 at 21:21

jackJoe · Answer 3 · 2011-03-14T12:10:59.383

0

Check your cache meta tag, if it's present and set to "no-cache" it may not cache your images.

Also, if your CSS file is very big it will affect the download of your images referenced in the CSS.

edited Mar 14 '11 at 12:10

answered Mar 14 '11 at 10:13

jackJoe

11,078
8
49
64

if all the OP has are comments he/she can never close/accept the question. – jackJoe Mar 14 '11 at 10:18
3

Regardless, explain to me how this is an answer? Looks to me like you just asked a question like the rest of us did. – daryl Mar 14 '11 at 10:26
@jackJoe, I'm using one css file for the entire site. its 45kb. would it be better to have the css for the background as an inline style? given that the page is drawn, im not sure if this is the problem. Also can you give more info on cache meta tag? – raklos Mar 14 '11 at 13:32
the inline style is a good idea for testing at least (I wouldn't use it at the final site), if it works then at least we have another pointer to what may be wrong. As for the meta tag, you have at least two types: pragma and expire, if both are set to expire, it's likelly that your content will not cache (but to be honest I haven't found this to work with CSS images). I suggest you read this about caching: http://www.mnot.net/cache_docs/ – jackJoe Mar 14 '11 at 14:40
also, it would be a good idea to check if the image referenced isn't being called in a dynamic way (I've seen something like this is some microsoft devs, such as the images being called via the CSS, but the actual image is "built" dynamically, strange). Also, check if the CSS is also called dynamizally, like thecssfile.css?someMSQuery=somethingRandom this may also cause the CSS to be called fresh everytime and may slow the images. – jackJoe Mar 14 '11 at 14:43

score 0 · Answer 4 · answered Mar 15 '11 at 09:30

0

A combination of all these answers helped. I have voted them all up.

answered Mar 15 '11 at 09:30

raklos

28,027
60
183
301

make my background image load quicker?

4 Answers4