How to build a website that loads fast on slow mobile data
If your site is slow on a phone, visitors leave and Google notices. These are the practical changes that make the biggest difference on weak connections.
Many people in Sierra Leone browse on a phone with mobile data. Data costs money and connections vary, so a heavy website is expensive to visit. If your pages take too long, people give up. Search engines also pay attention to how fast and smooth a page feels.
The good news is that most slow websites are slow for the same few reasons, and they are fixable.
What speed means to Google
Google measures a set of signals called Core Web Vitals. The three to know are:
- Largest Contentful Paint (LCP): how quickly the main content appears. Google calls 2.5 seconds or less "good".
- Interaction to Next Paint (INP): how fast the page responds when you tap. Under 200 milliseconds is "good".
- Cumulative Layout Shift (CLS): whether things jump around while loading. Under 0.1 is "good".
You do not need to memorise these. You need to know that a lighter page almost always scores better.
1. Fix your images first
Images are usually the heaviest part of a page. A photo straight from a phone camera can be several megabytes, far larger than any screen needs.
- Resize images to the size they are shown at.
- Use modern formats such as WebP or AVIF, which are much smaller than old JPEG or PNG files at similar quality.
- Load images below the first screen only when the visitor scrolls to them.
- Always set a width and height so the page does not jump.
2. Use fewer fonts and scripts
Every extra font weight and every third-party script (chat widgets, trackers, pop-ups, sliders) adds data and slows the page. Ask of each one: does this help a visitor do what they came to do? If not, remove it. Host fonts on your own site rather than fetching them from another server when you can.
3. Avoid autoplaying video and heavy sliders
A full-width video that starts by itself can cost more data than the rest of the page together. Show a still image and let people press play.
4. Send less code
Modern frameworks can ship a lot of JavaScript. Good tooling splits code so each page loads only what it needs. This is one reason I like building with Next.js, but any framework can be slow when it is used carelessly.
5. Cache and use a CDN
Caching lets a returning visitor reuse files they already downloaded. A content delivery network keeps copies of your files on servers around the world, so they travel a shorter distance. Both are usually a setting rather than a rebuild.
How to test your own site
- Open PageSpeed Insights (pagespeed.web.dev), enter your address and read the mobile results. They include real-world data if enough people have visited.
- In Chrome, open Developer Tools, go to the Network tab and choose a slow connection preset. Reload and watch what loads.
- Test on a real, modest phone, not only on your laptop.
Fix the biggest items first. Usually that is one or two oversized images.
A rule of thumb
Aim for a home page that loads quickly and stays light, and be suspicious of anything that makes it heavy without helping the visitor. Speed also feeds into local rankings, which I explain in my local SEO checklist for Freetown businesses.
If your website feels slow and you are not sure why, get in touch and I can take a look.