Site it very slow, how can I speed it up?

[unplugged_web]

I've been working a site that uses a lot of Javascript and in particular Jquery, but it's very slow to load on a few pages. I've tried to force it to load some of the images in a particular order by following this tutorial but that doesn't seem to make any difference. I just wondered if anybody had any advice or tips that might help me speed it up. The main pages I'm having problems with are http://bit.ly/yJDFfy - the jquery scroll doesn't load until everything else has and http://bit.ly/HQhrrF - the whole page just takes forever to load It's a portfolio site so if I can help it I'd really prefer not to compress the images at all. Thanks

[thescientist]

looking at it in the Network tab in Chrome, you are loading a lot of images, and they are fairly large in size. Multiple HTTP requests is a surefire way to slowdown a site. If it's possible to use sprites, that may be an option, or try and consolidate the amount of pictures you need to load at once per page.

[unplugged_web]

Unfortunately I do ideally need the image to stay at the size they are because it's a website for an artist and they want their work to not be compressed if possible. I've not heard about sprites though - what does that mean?

[thescientist]

http://www.w3schools.com/css/css_image_sprites.asp

[unplugged_web]

Thanks I'll have a read of that

[thescientist]

Yeah, I'm not sure how much it will help, but being able to reduce the amount of images needed at once would be my recommendation. Maybe some sort of pagination to only have one page/section of images display at a time, instead of everything.

[unplugged_web]

I'm hoping that the sprites thing will work. I've tried doing something similar to pagination, but because of the script I'm using to get the scroll 'page' to the work I have to have them all load first!!

[justsomeguy]

There's just a lot of stuff there, the first link downloads 137 different files to build the page, which is 5MB. The second link is 26 files at 2MB, but it takes a while to download the one image that itself is 1.88MB. It took me almost 20 seconds to download that image, so it sounds like the server doesn't have a lot of bandwidth. So you can either move to a server with more bandwidth or upgrade your account, or reduce the number of files or the file size. You can't have it both ways, you can't have a site that uses high-resolution pictures and also loads immediately. If you want to use high-res pictures then it's going to take longer, if you want it to load immediately then you need to use smaller images. That's just the tradeoff, it's up to you to find the right balance. Obviously, a faster server helps in any situation.

[unplugged_web]

I've made all of the background images into block images instead now and using image sprites to get the right areas to show at the right time. This appears to have speeded things up a bit. One thing though I've noticed, on some browsers like Safari when I click on a link on the first page there's a white box that shows before the next page loads. Is there a reason for this? I've not set a white background for any page at all so I'm not sure where this is coming from. Thanks

[eTianbun]

Normally, a web browser document needs to be BLANK/EMPTY (white), untill the browser retrieve the HTML. When it does, it starts interpreting the commands (e.g. Making the body to have red background, etc).

Edited April 23, 2012 by eTianbun

[unplugged_web]

Is there anything I can do to stop that happening? At the moment it's only blocks of white rather than the whole page