Please Speed Up My Site!

October 5, 2010 10:15 AM

I am trying to design a website with an autoplay slideshow on the home page, and I am learning that this webpage loads too slow on DSL or slower connections, please help me achieve this effect for slower connections!

Here is a link to a mock-up of the home page of the site:

http://www.embassylane.com/sitetest/

The slide show was created with the jQuery Cycle Lite Plugin which I chose because I want the site to work on iPhones and iPads which it does now.

There's also an autoplay sound file, which I am happy to lose if it would speed things up dramatically - it only works sporadically in Firefox anyway for some reason.

I have a cable modem, and the page loads fine, but on slower connections, I have heard it takes around 8-12 seconds, with just grey showing.

So, my questions are as follows:
1. Is there a better way to do the slideshow? gif? better plug-in? (I think I have compressed the images files as much as I am comfortable with). I do want it to play on iPhone platform.
2. If the slideshow I've chosen is as good as it gets, is there a way to make it so one slide loads and that's what slower sites see till the rest of the show is loaded? (Please note, I know css and html well enough, but I do not know javascript or anything of that sophistication - I can implement, but cannot code)
3. For future reference, is there a way to see how your site runs at slower connections? Like a program or site that would simulate different connections speeds, kind of like those sites that show screencaps of your website in different browsers?

Thanks for your help.

posted by bonsai forest to Computers & Internet (6 answers total)

Goodness graces, that's hard to watch. The first thing I wanted to do was hit the back button and never visit it again. From a simple design point.. consider an increase of the length of time between image transitions or something.

Not sure how well it will work with your current jquery script.. but you could consider preloading the images.
posted by royalsong at 10:21 AM on October 5, 2010

This doesn't answer your question at all, but watching that, even for a few seconds, made me feel really seasick.
posted by phunniemee at 10:37 AM on October 5, 2010

Site loads fine for me on a cable modem. But it's sort of ugly, and the transitions on the slides do invoke a certain sea sick feeling rather quickly. I'd go with a much smaller image size on the homepage and let readers click through if they want the full size barf-tastic experience.
posted by COD at 10:51 AM on October 5, 2010

Response by poster: OK, i appreciate the feedback, the site is for an experimental filmmaker who uses vintage found footage, this is just a clip from one of their films, but it does play smoother in their film than here.

They want a slideshow though...

Perhaps I'll change the slideshow so that instead of seeing the frames fade into one another, it does something like a checkerboard with one frame appearing in the corner, and then another, so the end of the slideshow would show the same twelve frames, but appearing in a grid 4 high by 3 across or something like that.

But does anyone know just how to implement the preload using the jquery cycle lite plugin, or another script that has that built in I could implement?

Thanks!
posted by bonsai forest at 11:16 AM on October 5, 2010

I have heard it takes around 8-12 seconds, with just grey showing.

You've got 24 images, each about 40KB, which comes to about 1000 KB total. Preloading can't do anything to change the fact that it's going to take 8-12 seconds to download a megabyte on slower DSL connections.
posted by Rhomboid at 11:28 AM on October 5, 2010

If the slideshow I've chosen is as good as it gets, is there a way to make it so one slide loads and that's what slower sites see till the rest of the show is loaded?

If you could find a different jquery plugin that lets you pass an array of image paths so it can load them one at a time instead of all at once, you might be able to do this. But then the animation effect would be ruined for slow users anyway, because the framerate would depend on bandwidth.

A better solution would be to make it into a movie - Windows Live Movie Maker will do this and it's free. Upload it to youtube and then embed it on the page. This wouldn't work for the iphone of course, but generally you want to avoid high-bandwidth stuff for mobile anyway.
posted by AlsoMike at 11:58 AM on October 5, 2010