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.