Network and delivery optimisation

Contents

Overview

Network and delivery optimisation focuses on how data travels from servers to users so that essential content arrives quickly and reliably under constrained conditions. It includes compression, caching, content distribution, protocol tuning, and reducing network round-trips.

The goal is practical: users should still access core information even on slow, expensive, or unstable connections.

Why this matters for low-resource users

Users in low-resource environments often face:

  • Limited bandwidth on 2G/3G networks
  • High data costs with pay-per-MB usage
  • High latency due to distant infrastructure
  • Intermittent connectivity and packet loss

Without optimisation, pages time out, data-heavy content becomes unusable, and users abandon services quickly.

Common Problems

Large payload sizes

  • Uncompressed images, JavaScript, and stylesheets
  • Higher transfer cost and slow first render

Too many network requests

  • Multiple API calls and third-party scripts
  • Delay is amplified on high-latency networks

No caching strategy

  • Same assets re-downloaded repeatedly
  • Wasteful on metered data plans

Long-distance delivery and no edge distribution

  • Single-region hosting causes avoidable latency
  • Users far from origin servers wait significantly longer

No offline resilience

  • App fails completely when connection drops
  • Work cannot continue during temporary outages

Design principles

  • Minimise bytes over the wire
  • Reduce round-trips and request chains
  • Use graceful degradation and progressive enhancement
  • Cache aggressively and invalidate predictably
  • Serve content as close to users as possible
  • Design for reconnect and offline continuity

Strategy options

Compression and payload reduction

  • Enable Brotli with Gzip fallback
  • Minify JS, CSS, and HTML
  • Optimise images using modern formats (WebP/AVIF)

Efficient caching

  • Use browser caching and cache headers correctly
  • Use service worker caching for core resources
  • Use CDN edge caching for regional proximity

LRO recommendation: Cache static versioned assets for long durations, for example:

Cache-Control: public, max-age=31536000, immutable

Reduce request count and critical path weight

  • Bundle and prioritise critical assets
  • Avoid non-essential third-party scripts
  • Defer below-the-fold and non-critical resources

Protocol and connection optimisation

  • Use HTTP/2 or HTTP/3 multiplexing
  • Reuse connections with keep-alive
  • Avoid repeated handshake overhead where possible

Offline support and adaptive delivery

  • Use service workers with cache-first fallbacks
  • Serve lighter variants under slow network conditions
  • Ensure essential content remains available during disruptions

Implementation guidance

  1. Measure first: baseline with Lighthouse or WebPageTest under slow 3G simulation
  2. Shrink payloads: compress assets and switch to efficient formats
  3. Implement caching: browser, edge, and service-worker cache layers
  4. Add CDN distribution: configure edge locations near target regions
  5. Optimise critical path: inline critical CSS and defer non-essential scripts
  6. Test realistically: throttle bandwidth and simulate unstable connectivity

Illustrative impact

Unoptimised:
HTML: 200KB
JS: 2MB
Images: 3MB
Total: 5.2MB

Optimised:
HTML: 50KB
JS: 500KB
Images (WebP): 400KB
Total: ~950KB

Do / Don't

Do

  • Use compression and caching by default
  • Serve content from the nearest practical location
  • Prioritise above-the-fold and essential content
  • Test under slow and unstable networks

Don't

  • Ship large frameworks and payloads unnecessarily
  • Depend heavily on blocking third-party scripts
  • Assume stable connectivity or low latency
  • Ignore cache headers and revalidation strategy

Checklist

Metrics and tools

Key metrics

  • Time to First Byte (TTFB)
  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • Total page size
  • Number of network requests
  • Cache hit ratio and timeout/error rate

Tools

  • Google Lighthouse
  • WebPageTest
  • Chrome DevTools network throttling
  • Cloudflare or CloudFront analytics


How can we improve this article?

Your feedback will help improve the framework and its documentation and will only be visible to the development team.