Optimizing Web Performance for Users on Mobile Data: Lessons from Building a Travel Tech Platform

Mohamed Bihi — Mon, 06 Jul 2026 00:30:46 +0000

As developers, we often build and test our applications on high-speed fiber Wi-Fi networks using powerful desktop machines. But the reality is that a massive portion of internet traffic comes from users browsing on mobile data, often while in transit, at airports, or roaming internationally.

When your target audience consists of travelers who need critical information on the go, every kilobyte and every millisecond counts.

While working on the optimization of esimmiami.com—a platform dedicated to digital connectivity solutions—I had to rethink our frontend asset delivery pipeline. When a user lands at an international flight hub, they might be relying on a degraded 3G or unstable 4G connection. A heavy, unoptimized site means a dropped session.

Here are the key technical strategies we implemented to ensure blazing-fast load times on cellular networks.

Aggressive Image Optimization with Next-Gen Formats Images are almost always the biggest culprit behind high PageWeight. For a travel-centric platform, visual appeal is important, but standard JPEGs or PNGs are unacceptable for mobile performance.

We transitioned the entire asset library to WebP and AVIF.

The Result: A reduction of over 60% in total image file sizes without any visible loss in quality.

The Code: We implemented responsive image syntax to ensure devices only download the exact dimensions they need:

Minimizing the Critical Rendering Path (CRP) On cellular networks, latency (RTT - Round Trip Time) is significantly higher than on stable Wi-Fi. Minimizing the number of requests required to render the first meaningful paint is crucial.

Inline Critical CSS: We extracted the CSS required to render the hero section and above-the-fold content, inlining it directly into the .

Defer Non-Critical JavaScript: Any third-party tracking, analytics, or interactive widgets were deferred or loaded asynchronously using defer or async tags.

If a traveler is trying to quickly check options on esimmiami.com while ordering a ride at the airport, they shouldn’t have to wait for a 500kb JavaScript bundle to parse just to read text.

Designing for the Network Constrained User Optimizing the code is only half the battle; the UI must also adapt to mobile data limitations.

System Font Stacks: Avoid loading multiple heavy custom web fonts. Relying on system fonts (-apple-system, BlinkMacSystemFont, Segoe UI) ensures instant text rendering.

Resource Hinting: Use dns-prefetch and preconnect for crucial external origins (like payment gateways or API endpoints) to resolve connection handshakes early.

Conclusion
Optimizing for mobile data isn’t just about achieving a 100/100 score on Google Lighthouse; it's about accessibility and empathy for the end-user. Whether someone is looking for a local cellular plan or navigating an unfamiliar city, a fast website is a functional website.

Have you ever had to optimize a web application specifically for high-latency or roaming environments? What are your go-to strategies for keeping bundle sizes minimal? Let's discuss in the comments below!

DEV Community: Mohamed Bihi

Optimizing Web Performance for Users on Mobile Data: Lessons from Building a Travel Tech Platform