Designing for slow connections

You probably build and check your membership site on a fast office or home connection. Many of your members do not use it that way. They open lessons on a patchy mobile signal, in a rural area with slow broadband, on a train between stations, on hotel wireless or on a phone plan with a strict data allowance. For them, a page that loads instantly for you may take a long time to appear, or may never finish loading at all.

Slow connections do not generate complaints so much as silence. Members give up on a heavy page and try again later, or not at all. Designing for slow connections is about making sure the important parts of your site arrive quickly and work even when the connection is poor.

Know who is on a slow connection

It is easy to assume slow connections are someone else's problem. In our experience, most memberships have more affected members than the owner realizes, including:

• Members in rural or remote areas
• Members in countries where mobile data is expensive or limited
• People using phones on the move, where signal strength changes constantly
• Members with older phones or computers, which process heavy pages more slowly
• Anyone who watches their data allowance and avoids heavy pages until they are on wireless

If your membership serves farmers, travelers, field workers or an international audience, assume slow connections are common.

Send the words first

The most important thing on most pages is text: the lesson notes, the event details, the answer to a question. Text is tiny compared with images and video, so a page designed around it can become usable within moments even on a poor connection. Problems start when the text waits for everything else.

• Avoid designs where nothing appears until large images, sliders or animations have loaded.
• Limit custom fonts to one or two families and a small number of weights, each of which has to be downloaded.
• Remove decorative elements that add weight without adding meaning, such as background videos and large animated headers.
• Never put important text inside images, where it cannot be read until the image arrives.

Make images earn their weight

Images are usually the heaviest part of a page that is not a video. A single photo uploaded straight from a modern phone can weigh more than everything else on the page combined. Most of that weight is wasted, because the image is displayed far smaller than its full size. To fix it:

1. Resize images to roughly the largest size they will actually be shown before uploading them.
2. Compress them. Free tools can reduce file size considerably with no difference visible on screen.
3. Use modern image formats where your platform supports them, as they are usually smaller.
4. Turn on lazy loading, so images further down the page load only as the member scrolls toward them.

Handle video and audio gently

Video is by far the heaviest content on most membership sites. A few habits make it far kinder to slow connections:

• Never autoplay. Let the member decide when to spend data.
• Use video hosting that adjusts quality to the connection, and let members choose a lower quality manually.
• Offer an audio-only version of talk-based lessons, which members can use on a weak signal.
• Provide transcripts, so members can read the lesson when video will not play.
• Where your platform allows, let members download lessons on wireless to watch or listen later.

Where you place video on the page matters too; the layouts in where to put video on the page keep the text and materials usable even before a video plays. Audio deserves more attention than it usually gets, and audio content and private podcasts for members explores it as a format in its own right.

Cut the extras nobody asked for

Many pages carry hidden weight from add-ons: chat widgets, embedded social media feeds, tracking scripts, pop-up tools, font libraries and plugins that were installed once and forgotten. Each one adds requests the member's device must complete. Review your site for scripts and embeds, remove any you no longer use and question the rest. A social feed in the sidebar of every lesson is rarely worth what it costs slow-connection members.

A worked example: a smallholders' lesson page

Saoirse runs a membership for smallholders and hobby farmers, many of whom live in areas with weak signal. Members told her lessons were “stuck loading” out in the barn. She measured one lesson page and found it weighed well over ten megabytes. Here is what she changed:

Before: a full-width header photo straight from her camera, a background video on the page header, three custom fonts, an embedded social feed in the sidebar, a chat widget and the lesson video set to autoplay.

After: a resized and compressed header photo, no background video, one font family, no social feed or chat widget, the lesson notes and a transcript at the top, the video below with a clear play button and a note offering an audio version. The page now weighs under one megabyte before the video is played.

Members on weak signals can read the lesson notes almost immediately and decide for themselves whether to play the video.

Test like a member with a weak signal

You can simulate a slow connection without leaving your desk. Most desktop browsers have developer tools with a network throttling setting that imitates a slow mobile connection. Load your home page, a lesson and your checkout with throttling on and note how long it takes before you can read and use each page. Better still, walk to the spot in your home with the weakest signal and try the site on your phone with wireless turned off.

Your first steps

1. Load your three most-used pages with network throttling on and note what appears first.
2. Resize and compress every large image on those pages.
3. Turn off autoplay and add transcripts to your most-used video lessons.
4. Remove unused scripts, widgets and embeds.
5. Offer audio-only versions of talk-heavy lessons.
6. Set a rule for new pages: text first, images resized, video only when pressed.