Some people have slow internet

Most people don’t have your level of internet access, thats just a fact. As a hobbyist/amateur web-designer I look at web-content differently than most and what I see are problems that could be avoided easily.

If you think your internet connection is slow, think again. Anyone above 1MBit/s (that is 0.125MB per second or 125KB) is considered a broadband user, but that connection is not even enough to watch a 360p Youtube-Video, let alone stream HD on Netflix or download software updates without planning when to clog the pipes of your home connection.

If you publish on the internet these days you have to produce content that works on displays as small as a 3.5" iPhone (320px width times two for retina) and as large as a Retina iMac with a 27“ 5K display (effectively up to 6400px width, scaled). Additionally your customers could be on connections ranging from an old EDGE mobile-network (120 KBit/s = 0.015 MB/s) to the most recent LTE standard (300 MBit/s = 37.5 MB/s), effectively giving you less than 0.015MB (or 15 KB) to deliver a first response from your server — your loading animation shouldn’t be 50KB (3,3 seconds load time).

This video illustrates nicely what happens when you design your content around the assumption that desktop computers have good internet connection. What you are looking at is Apple’s iPad Pro website loading large image resources it doesn’t even use when the connection is too slow — but still loads them. The connection speed while recording that Video was 5 MBit/s, the global average currently.

When you access the page again, without using the reload-function of your browser, for example by simply clicking on the address bar and hitting enter again, the cached resources get used and the page loads into a nice scroll-animation of jupiter.

While this might be a decent compromise for the programmer to implement, it is a bad user experience. The page loads unused resources immediately that could be loaded and cached after everything else is done, thereby increasing the load time on slow internet connections needlessly. Other options are available and are being implemented by less experienced and smaller companies with less people and actual budgets — like lazy loading.

If you design web content, remember, your content will be viewed by people with less luxurious connections than the Gigabit optical fiber connecting your office to the web. Plan your content to load intelligently, not just on mobile, but on desktop too.

  • Use semi-hacks like javascript that removes a no-js class from your body element to see if you could determine the necessary resources before requesting any heavy resource from the server.
  • Use the nosrcipt-element to wrap your fallback content to avoid loading it when javascript is going to replace it anyway.
  • Use server side compression.
  • Compile your CSS on the server to only load whats necessary.
  • Set (and update) a cookie with the pixel density and window size. Since cookies happen in the document header, you’ll get the data to select the image resources for your visitor before they have downloaded anything — not even a javascript snipped that sniffs out these properties.

These are just 0.01% of the options available, use them.