HELP! How to make a website for different web speeds?

Question

I'm in Greece right now helping out with a charity and they are trying to revamp their website. Internet capacity here is really behind, and many Greeks won't wait for pages to load. They'll simply close the page if it's loading too slow. But, we are trying to draw potential donors from the US and Wester Europe as well who have the capacity for more content-rich pages.

My question is this: Is there any way for have two different versions of a website that load automatically depending on the speed of your connection?

I'm looking for something like what Youtube is now able to do for videos (ex automatically playing something in 300 vs 1080p) How is this typically done??

The CMS they're using is Website X5, but I may convince them to switch to Wordpress. The website is benjaminorphans.com . We are specifically interested in making alterations to the eShop: shop.benjaminorphans.com

All answers appreciated.

Answer 1

you can check visiter's connection type, and according to different connection type, you let your vistors see different styles of your wordpress.

Answer 2

I think it is not wise to put significant effort into detection of visitors internet speed and to serve different code accordingly. Instead, you better do a full scale Web Performance Optimization (or PageSpeed optimization as some Googlers call it) of your website and serve faster web pages to all visitors and browsers! You would not believe what a difference proper optimization can make. It will not only affect positive experience of your visitors but it can also improve your position in search engines at the same time. This is because Google loves and encourages optimized and fast websites as they they know that it also means a better experience for their users.

There is an agency QuantifiedSpeed.com doing professional page speed web performance optimization and they are doing pro-bono (free) work for non-profit and charity organizations. I really think you should contact them as they could definitely help you boost your website speed quickly and retain lost visitors...

Answer 3

If you're really worried about people leaving right away if the first page load is slow, I guess you'd have to make your default assumption that their connection is slow and people will hit the slow version of the site first. If you think people would be willing to wait for the first load, I'd suggest loading the fast-connection version first.



You could put some javascript in your tag--pretty much before you load anything else--that looks something like this:







If you use jQuery or something, you can clean that up a bit, but I didn't want to assume.



This looks for an existing "connection" cookie or defaults to "fast" and then adds that variable (+ 'Connection') as a class on your tag.

It also fires off a couple setTimeouts and tells the browser to cancel those timeouts when the page finishes loading.

If the page takes too long to load, one or both of the setTimeouts will fire and set the connect varialbe to 'medium' or 'slow' and store the variable in a cookie for the next page load.

You might have to play with the timeout delays depending on the size of you page and the variance of your customers' page load times.



With the classname, the js variable and the cookie, you now have a lot of options.

Your stylesheets can key off the class on your html tag and load lower quality images for slower connections.

The js variable allows you to optionally do some lazy loading of content or just pull stuff in right away for faster connections.

You can read the cookie on the back-end and redirect them to speed-specific versions of pages.



Hope that helps.