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



  • 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.



  • 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.



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2