Is it possible to load different webpage based on clients internet speed? If so how?

Question

If you have a website running on any server. And the website comes in three different version: Heavy, Medium and Lite. Now you have to load lite version if clients speed is below certain limit (Lets say 500kbps), Medium version (Lets say >500kbps and <25mbps), Heavy version (Lets say more than 25mbps). Can you do it?

I was thinking making a server side script that first check the connection speed with client (don't know how), then based on the speed result redirecting them to respected website. If there is another way, please do tell...

Answer 1

There is no definitive, reliable way to do this and I recommend that you focus on building an optimized site for your intended target audience and their devices.

Internet connections are pretty good around the world. The effort and ongoing maintenance in updating and managing three frontends is not feasible. Instead, focus on serving optimized content and use modern techniques to serve media targetting screen size and device. Limit unnecessary media, compile and bundle scripts, ensure servers are serving gzipped content and place your servers/cdn's near your audience.

If you did, however, want to pursue this exercise you can play with the following idea: You would need to make an initial request to the server to get a timestamp - we want to work with the server's time, not the client which could be off. The client receives the timestamp and responds immediately, passing the timestamp back to the server. The server considers the difference between the two and redirects accordingly.

The problem is that connections are not consistent, and you cannot rely on that first connection to represent the client's connection quality. There may be a dip in connection quality as they are connecting etc.

Answer 2

To maintain two or more server side codes is not easy or ideal. Focus on optimization especially on the website assets such as images. Images form about 75% of site load times.

Ideally you can have multiple image source to start with img srcset.

What you are talking about is obtainable with respect to images and videos. You can have more than three images and the browser will select the best based on the available connection speed.