How should you design for low bandwidth and mobile-first users in Africa?

Ghana had 38.3 million mobile connections for 34.7 million people in January 2025, according to DataReportal. Nigeria had 150 million connections and Kenya 68.8 million. Your visitors open your site on a phone, on a plan with a data cap, and the signal changes as they move.

Tribal House is a brand and web design studio in Accra. This guide sets out the audience facts, the cost of data, a performance budget tied to Google's Core Web Vitals, patterns for weak connections and a test plan that uses real phones.

What does mobile-first web design for Africa mean?

Mobile-first web design for Africa means designing the phone layout first, setting a page weight and speed budget before visual work starts, and treating a slow or interrupted connection as the normal case. The desktop layout grows from the phone layout, and each feature earns its bytes.

DataReportal's Digital 2025 reports supply these figures. Connections can exceed the population because people hold more than one SIM, and DataReportal notes that some connections carry voice and SMS but no internet.

GSMA's Mobile Economy Sub-Saharan Africa 2024 report, released in Nairobi on 7 November 2024, adds two warnings. It reports a 60% usage gap: people inside mobile coverage who do not get online because of unaffordable devices, limited digital skills or safety concerns. A second figure shows 13% of the population outside coverage. GSMA expects 4G to account for half of all connections by 2030, which leaves many slower connections in the mix.

How much does mobile data cost, and why does page weight matter?

Research ICT Africa priced a monthly 1GB data basket at USD 0.59 in Ghana and USD 0.66 in Nigeria in the first quarter of 2025. The cheapest basket in its index was Ethiopia at USD 0.47 and the dearest was Seychelles at USD 16.66. Each megabyte your page sends comes out of the visitor's data allowance.

The table is our arithmetic. A 1GB basket is a price yardstick, not a typical allowance, and visitors spend data on video, social apps and updates as well. A lighter page leaves them more for everything else, and it loads faster on a weak signal.

What performance budget should a mobile-first African site meet?

Google's Core Web Vitals give three pass marks at the 75th percentile of page loads: Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint of 200 milliseconds or less, and Cumulative Layout Shift of 0.1 or less. web.dev adds default budgets: under 170 KB of critical-path resources and Time to Interactive under 5 seconds on 3G.

Seven lines come from web.dev. Three are our starting targets, and you should tighten them once you see field data. Write the budget into the brief and the contract, so each added feature has to fit inside it.

How do you build lighter pages with images, fonts and scripts?

Cut weight where it concentrates: images, fonts and scripts. Serve AVIF or WebP images at the right size, subset and preload a small set of fonts, and defer any script that the first screen does not need. Each fix helps the load time that your visitors feel on a weak signal.

Images

• Pick the format. web.dev says WebP and AVIF compress better than older formats in most cases, with a JPEG or PNG fallback. Use vector files for logos and icons, and use video instead of animated GIFs.
• Serve the right size. web.dev recommends responsive images, so a 360-pixel-wide phone does not download a desktop hero.
• Reserve space. web.dev says to add width and height attributes to images and video so the layout holds steady while they load.
• Load the hero first. web.dev advises against lazy-loading the main above-the-fold image and suggests fetchpriority="high" for it. Lazy-load images below the first screen.
• Watch the split. web.dev suggests Largest Contentful Paint time divides into about 40% server response, about 40% resource download and under 10% for each of the two delays.

Fonts

• Limit the families. A full font with all its glyphs and weights can reach several megabytes, web.dev warns. Use two files at most.
• Subset and use WOFF2. web.dev shows unicode-range subsets and lists WOFF2 first in the font stack.
• Preload and set font-display. Together these prevent blank text and layout shifts from font loading, according to web.dev.
• Offer a system-font fallback. web.dev shows how to switch to a system font when the visitor turns on data saving.

Scripts

• Defer by default. web.dev says synchronous scripts delay DOM construction and rendering. Use async or defer.
• Audit third parties. Chat widgets, tag managers and embeds add weight and main-thread work. web.dev recommends removing them or lazy-loading those below the fold.
• Keep taps responsive. web.dev links long main-thread tasks to poor INP and advises breaking work up so the browser can respond between tasks.
• Animate with transform. web.dev says animating properties such as top and left causes layout shifts, while transform does not.

Which offline and low-data patterns work on weak connections?

Three patterns help most: a service worker that caches the shell and key pages, an offline page you design instead of the browser's error, and a lighter version of the page for visitors who switch on data saving. web.dev documents each pattern, and none needs a native app.

• Offline fallback. web.dev says a progressive web app should not show the browser's own error message. Use the service worker to show your own page with contact details and the pages already cached.
• Cache with care. web.dev says caching everything suits small assets that seldom change, and that resources which must stay current may be better left uncached.
• Right storage. web.dev points to Cache Storage for URL-addressed files and IndexedDB for searchable data. Visitors can clear storage at any time, so plan for an empty cache.
• Respect Save-Data. Chrome, Opera and Yandex send a Save-Data header when the visitor turns on data saving. web.dev suggests serving 1x images, skipping non-essential images and falling back to system fonts, and adding Vary: Save-Data when the response changes.
• Keep the full version one tap away. web.dev advises giving users an obvious way to turn data saving off.

web.dev notes that the Network Information API behind navigator.connection.saveData works in Chrome, Chrome for Android and Samsung Internet. Treat it as a bonus on those browsers and not as a requirement. If you are weighing a PWA against an app, read what a mobile app costs in Ghana.

How do you test a site on real mid-range phones?

Test on two real Android phones, one mid-range and one low-end, over a mobile data connection, and use Chrome DevTools throttling for a first pass. Chrome's documentation calls device mode a first-order approximation and says that when in doubt you should run the page on a mobile device.

1. Throttle first. In Chrome DevTools, "Mid-tier mobile" simulates fast 3G with a CPU four times slower, and "Low-end mobile" simulates slow 3G with a CPU six times slower. The slowdown is relative to your own computer.
2. Borrow real phones. Statcounter shows Android on 70.84% of Ghana's mobile traffic in September 2026. Test on Android first, then on an iPhone.
3. Use mobile data. Test outside the office, on a prepaid SIM, at different times of day.
4. Test offline. Switch to airplane mode after the first load and check the fallback page.
5. Turn on data saving. Check that the lighter version works and that the full version stays one tap away.
6. Check field data. Core Web Vitals pass or fail at the 75th percentile of real visits, so compare lab results with what Google measures for your pages.

What belongs on a mobile-first design checklist?

A short checklist covers the decisions that decide speed: the budget, the first screen, the images, the fonts, the scripts, the offline page and the real-phone test. Run it before design sign-off and again before launch, because each late addition adds weight.

• The brief states a page weight, LCP, INP and CLS target.
• The phone layout is designed and approved before the desktop layout.
• The first screen shows the offer, a call to action and a phone or WhatsApp button without loading a carousel.
• Each image has width and height, a modern format and a responsive size set.
• The hero image is not lazy-loaded; the images below it are.
• Two font files at most, in WOFF2, with a system fallback.
• Third-party scripts are listed, justified and deferred.
• Tap targets, forms and payment steps work with one thumb on a small screen.
• An offline page exists, and Save-Data visitors get a lighter version.
• Two real Android phones have run the full journey on mobile data.

For West African markets, our guide to website design for West Africa adds language, payments and trust signals. Cost matters too, so see what a website costs in Ghana and our checklist for choosing a web design company in Accra.

How does Tribal House build for mobile-first audiences?

Tribal House designs and builds websites and digital products from Accra for clients in Ghana, West Africa, Africa, North America and Europe. We start with a 30-minute discovery call, then send a written scope and fee. Brand and website projects start at US$6,000 and ship in four to eight weeks.

Ask us for a performance budget in the scope, and for the numbers at launch. See our services, recent projects and plans, or book a call.