These backgrounds are driving me nuts!!!!!

I have a website with a large background and it takes forever to load and then I come across this site => http://www.thepixel.com/blog/ and the background is huge and it loads super quick. How do they do it?!

There are only three images, all together around 1mb and that is quite easy to load.

Look at that like this:

1. Header Image

2. Pattern

3. Footer Image

4. Background Color

Also I think you should shorten that link when posting here.

K, don’t get me wrong I love what they did to their site, I’m not bashing it. Link There’s my site and it takes forever to load in and I’m only loading about 500k worth of background images in the 3 sections.

Around 2 sec is needed for me to load (not so bad). What happen if you remove that background JS eg. ‘fly2by.png’, that loop trough images and positions seems like slowing down page a lot. Why you don’t simply create one pattern without that animations?

pebas said
Around 2 sec is needed for me to load (not so bad). What happen if you remove that background JS eg. ‘fly2by.png’, that loop trough images and positions seems like slowing down page a lot. Why you don’t simply create one pattern without that animations?

oops I didn’t have the backgrounds up when you looked at it. Can you recheck it for me?

pebas said
^ Around two sec again. That is quite acceptable.
By the way those drops flying around are quite annoying form me.
What they represent?

I actually like the drops, it was implemented in order to create the bubble effect in water I guess. In comparison with the website shown by you, yours loads slower which will damage your client’s experience.