Inclusive Design Tip : Slow connections

A network tip

Why do it

People with slow connections often disable images, or use offline modes and wait until they can access a better connection (e.g. wifi at work).

What to do

  • Chrome: open Developer tools (inspect any element) > Network tab > throttle your network connection from “Online” to “Slow 3G” > refresh your site.
  • Firefox: Tools > Web Developer > Responsive Design Mode. Select “Regular 3G” with the dropdown menu to the right of “Responsive Design Mode” > refresh your site.
  • Use your browser’s “private” or “incognito” mode to avoid cached images and content.

Things to check

  • How long does your site take to load? (You can measure this in the Network tab of DevTools)
  • What are the biggest/slowest resources? (Probably images…)

Things you could change

  • Optimise your images to be as small as possible.
  • Use the picture HTML element or the srcset attribute on img to serve smaller images.
  • Use skeleton screens or placeholder content to fill whitespace while images load.