How to Optimize Mobile Web Resource Loading for Faster Performance

Introduction

Resource loading optimization is crucial in mobile development due to low bandwidth, high latency, small devices, limited memory, and low processor performance. This article shares translated insights from Chrome DevTools and practical tips.

1. Checking Page Load Speed

Use Chrome DevTools to simulate a specific network speed (e.g., regular 3G), refresh the page, and compare the loading time before and after optimization.

2. Resource Loading Order and Timing

The Network panel displays a timeline of resource loading; the red line indicates DOM loading time.

The lifecycle stages are:

Queueing : Resources wait for previous connections to finish.

Stalled : Delay before the request is sent.

DNS Lookup : Time to resolve the domain.

Initial Connection : Time to establish the connection.

Request Sent : Time to send the request.

Waiting (TTFB) : Time waiting for the first byte of the response.

Content Downloading : Time to download the resource.

3. Diagnosing Issues and Solutions

3.1 Queueing

Browsers limit concurrent connections per host (6 for HTTP/1.1). Excess resources queue, causing delays. Reduce requests by using CSS sprites, minifying JS/CSS, leveraging caching, lazy loading, or placing resources on different subdomains (ineffective with HTTP/2).

3.2 High TTFB

Target TTFB should be under 200 ms. High TTFB can stem from poor network conditions or slow server response. Optimize server-side performance by improving database queries, enabling resource caching, adjusting web server configuration, or migrating to a faster server.

3.3 Long Download Time

If download dominates the loading time, compress files (e.g., gzip) to reduce size.

4. Tools

Use the Performance API to inspect resource timing, for example:

performance.getEntriesByType('resource').filter(item => item.name.includes("style.css"))

Conclusion

Front‑end optimization for mobile is a continuous battle against milliseconds, requiring many techniques and careful analysis.

Reference

Google Chrome DevTools – Network Performance