How do you reduce network latency and bandwidth?

1 Use HTTP/2

HTTP/2 is a newer version of the protocol that powers the web. It offers several advantages over HTTP/1.1, such as multiplexing, compression, prioritization, and server push. Multiplexing allows multiple requests and responses to be sent over a single TCP connection, reducing the overhead of opening and closing connections. Compression reduces the size of headers, which can be redundant and verbose in HTTP/1.1. Prioritization enables the server to send the most important resources first, improving the perceived speed of the app. Server push allows the server to preemptively send resources that the app will likely need, reducing the number of round trips.

2 Optimize images and media

Images and media are often the largest and most bandwidth-intensive components of a mobile app, and optimizing them can significantly reduce the network load and improve performance. To achieve this, use appropriate formats and compression levels, such as JPEG for photos, PNG for graphics, and WebP for both. You can also use tools like ImageOptim or TinyPNG to compress images without losing quality. Additionally, consider using responsive images and media queries, so that the app only downloads the necessary data. Finally, lazy loading and prefetching can be helpful in loading images and media only when needed or in advance.

3 Cache data and resources

Caching is a technique that stores data and resources locally on the device or on a proxy server, so they can be reused without making network requests. This reduces network latency and bandwidth by avoiding redundant or unnecessary requests, and providing faster access to data and resources. To implement caching, you can use HTTP caching headers like Cache-Control, Expires, ETag, and Last-Modified. Service workers are also useful for caching data and resources using the Cache API or IndexedDB. Additionally, local storage can be used to store user preferences, settings, or other app-specific data that does not need to be synced with the server.

4 Minify and bundle code

Code is another component that can affect the network latency and bandwidth of your app. Minifying and bundling code can reduce the size and number of files that need to be downloaded by the app. Minifying code involves removing unnecessary characters, such as whitespace, comments, or variable names, from your code. Bundling code means combining multiple files into one or a few files, decreasing the number of requests and connections. To help with minifying and bundling code, you can use tools like ProGuard for Android and Webpack for web apps. ProGuard is a tool that shrinks, optimizes, and obfuscates your code, which can reduce the size of your APK file, improve the runtime performance, and protect your code from reverse engineering. Webpack is a module bundler that can transform, bundle, and optimize your code while handling different types of assets such as JavaScript, CSS, images, and fonts. It also provides features like code splitting, tree shaking, and lazy loading.

5 Monitor and test network performance

Monitoring and testing your app's network performance is a key strategy to reduce network latency and bandwidth. Network inspection tools, such as Chrome DevTools, Charles Proxy, and Android Studio Network Profiler can help you inspect the network traffic of your app and simulate different network conditions. Additionally, performance analysis tools, like Lighthouse, Firebase Performance Monitoring, and Android Studio Profiler can measure and analyze the performance of your app and help you find and fix any performance issues. Monitoring and testing can thus help you identify and fix any issues, bottlenecks, or inefficiencies in your app's network communication.

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?