Should users be prompted to determine bandwidth intensity of a site?

Question

Serving up web content based on user agents alone seems exclusionary to me; mobile devices aren’t always constrained to low bandwidth.

From a UX perspective, would it be a bad strategy to present content optimised for low bandwidth by default and have users ‘opt in’ to downloading additional resources after initial load? For example, in a website context, this could mean loading in custom fonts vs. system fonts, presenting video instead of images, or downloading additional javascript for strictly presentational purposes.

To clarify, I’m not referring to responsiveness with regards to screen sizes across different devices, and it should be assumed the layout of key elements (navigation, calls to action, etc) is consistent across the low/high bandwidth versions.

The benefits include an optimised load time across all devices by default and relatively simple SEO (vs. breaking a site across multiple domains for mobile/desktop). But it’s not something you see a lot of in the wild, so I’d love to hear some thoughts.

EDIT

I've mocked up an example of what I'm leaning towards, you can view it at https://www.nickdawes.dev/portfolio. This implementation allows the user to opt in to downloading additional content, which in this case is a full-screen background video and custom fonts. If they opt out, no additional content is served.

Answer 1

Don't make users think!

Golden rule for usability is to not make users think. The more they have to make decisions the more "decision fatigue" they experience. After a certain amount of brain power usage they are likely to go elsewhere.

Asking them which version of a site they want to view (which is effectively what we are doing) will damage your retention rate, bounce rate etc.

You also introduce doubt into their mind, "is this site going to use all my data". For someone on a low data availability connection (the exact people you are trying to help) they will probably go elsewhere due to worrying and ironically end up on a bloated site that doesn't consider these things.

Do it automatically

Although this site is not for technical answers I thought I would give you the broad strokes of what we do.

Basing what to show on bandwidth

There is a built in utility in the browser called performanceObserver with very good availability (performanceObserver has about 92% browser support).

From this you can get all sorts of useful information about when resources are loaded (among other things).

From this you can create a simple algorithm that looks at how long existing resources on the page take to download.

So your algorithm may say:

1. Grab the first 5 requests on the page.
2. How long did it take for the server to start sending data (which lets you know if they have high latency) for each entry.
3. How long did it take to download the resource. (take download time and resource size)
4. Work out their average latency and average download speed.
5. See if the averages are above (or below) some criteria you set, if your criteria is met, send extra data via AJAX.

You can then also use this to decide what image quality to send, whether to use custom fonts or web safe fonts etc.

for browsers that don't support performanceObserver just default to showing everything as odds are they are old browsers such as IE.

The one down side

Unfortunately the down side of this is if you are trying to preserve users data usage we still don't know if they get 1GB a month or 50GB.

At this stage you are back to a button if you really care.

Alternatively, just build your site to be light-weight from the start. You would be amazed what you can do in less than 200kb down the wire if you don't use frameworks, libraries etc.

Answer 2

I'm not sure this would be a bad pattern on the surface of it, but I don't believe it's very common to ask the users if they want to download additional resources. I can however cite two similar approaches.

1. Many sites these days perform lazy or deferred loading of resources through technical approaches such as code splitting (breaking down a large package of say, Javascript and only loading it on the pages it's needed on rather than all up front. The same approach can be used for CSS). Many frameworks such as Gatsby and Next can do this automatically.

2. Often sites will load a template component, Facebook definitely does, which shows the shape of the content before the content has loaded (often with a loading animation of sorts). This servers the purpose of allowing the user to interact with the site earlier, but again doesn't ask the user to download additional content, it happens automatically.

The other aspect I would be asking you if you proposed this solution is what type of resources we're talking about and how critical they are to the sites functionality (or other relavant business factors.) For example, if we're talking about external fonts and it's purely presentational and the site works perfectly well without I'd be asking why you're using them in the first place? A typical response might be, to enhance the brand association or improve the aesthetics. At this point I'd ask you to weigh up what's more important, the aesthetics or the low bandwidth experience? At the end of the day, there is no canonical answer for this type of question it's site/business specific, so you need to help have that conversation or make that decision. Perhaps a seperate low bandwidth option is business critical as your research shows 80% of your users are on low bandwidth connections, in which case you've likely got your answer already.

Answer 3

Personally I would say no. The user should never be prompted in this manner as it interrupts the experience. If I were to give this option I would look at making it a setting in a user profile or something. (Like ios or android has low power mode). Maybe a “high speed” setting or something that mentions that quality or resources take a hit in order to deliver faster page loads.

Answer 4

If we consider first impression to be the last impression, in that case, delayed page load time does affect the user experience. However @dougajmcdonald explained the technicalities.

Prompting users for selecting something that is of least concern to them (w.r.t what they came for to the site) is certainly a bad UX. Instead, doing that in the background, mentioned in previous answers is more effective. Adding to that, most sites have a mobile version while being accessed on phone - designed keeping the constraints.

One good example I have noticed is on Zomato App - while sometimes it takes time to load - the app displays a witty or quirky food fact. Another example could be to have engaging splash screens or loading screens.