CODEWITHSUNDEEP
htmlcssbackground-image
raklos
raklos

Reputation: 28545

make my background image load quicker?

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.

Upvotes: 1

Views: 1052

Answers (4)

raklos
raklos

Reputation: 28545

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

Upvotes: 0

Rob
Rob

Reputation: 10248

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.

Upvotes: 1

Tom Gullen
Tom Gullen

Reputation: 61729

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.

Upvotes: 1

jackJoe
jackJoe

Reputation: 11148

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.

Upvotes: 0

Related Questions