How to Minimise Requests and Bandwidth for Server & Client

A follow up to my last post, this one details other ways to reduce bandwidth and time for server and client such as minification, bundling and eager loading.

A modern web app can have many frontend dependencies, each with their own stylesheets and javascript files. Placed separately, a client’s browser must send a seperate request for each of these files. This can add up.

Bundling means taking the content of these separate files and putting them into one file which can lead to a longer initial load for the browser but a faster experience, one with less requests to the server otherwise. The content of these files is human-readable for debugging’s sake – which brings us to minification. While text is not a heavy medium, tens of thousands lines of code can still slow down the download process. Minification reduces this by replacing the human-readable text in the code with shorter placeholders. This can make the code unreadable when examining it on the browser without a mapping file but lowers it’s size significantly.

One for the backend, eager loading means to load all of the data needed for the page straight away. It contrasts lazy loading, which grabs only the data needed at the time with more requests being made as needed. While there are benefits to both of these approaches, eager loading can be used in database queries to massively reduce the number of separate requests that must be made.

Each of these techniques, used properly, can help ensure a fast browsing experience for the user while ultimately saving costs for the businesses who implement them.