Lighthouse: Avoid enormous network payloads
Overview
Large network payloads increase page load times. Reducing total request size helps files download faster and improves overall user experience.
How does your site score on this audit?
How does a high network payload affect page performance?
Every time your page loads, the browser requests the server for your page resources. The total size of all these resources determines your network payload.
The higher the network payload, the larger the page; thus, the longer it takes to download the resources and load the page.
As if you didn't need more incentive to reduce your total page size, large payloads may also cost your visitors more money.
In many countries, internet connection pricing depends on the amount of network data transferred, particularly for mobile connections. Reducing your network payload ensures you aren't burdening your visitors with additional costs.
Optimizing your page requests can help reduce your network payload, decrease page load times, and improve your visitors' page experience.
How does GTmetrix trigger this audit?
GTmetrix evaluates your page resources and reports the total page size in KB/MB. This audit triggers if your page size exceeds 2.667 MB.
Clicking the audit reveals all the page resources, ordered by size, starting with the largest resources.
How to avoid enormous network payloads?
Like many of the other audits, the optimizations mentioned here should be an integral part of your development workflow to ensure you are providing a fast-loading page from the moment your website is live.
You can avoid enormous network payloads using the following strategies:
1) Defer non-critical resources
Non-critical resources are those resources that aren't needed to display above-the-fold content.
Defer these resources to ensure you aren't unnecessarily transferring more bytes over the network.
2) Minimize the size of your resources
Always try and serve resources at the smallest size possible to reduce bandwidth consumption and overall page load times.
Compress your HTML, CSS, and JavaScript files and minify your CSS and JavaScript to ensure your text-based resources are as small as they can be.
Optimize your image delivery by sizing them properly and compressing them for smaller sizes.
3) Cache relevant requests
Cache relevant requests to deliver faster loading pages for repeat visitors.
With caching enabled, fewer bytes are transferred over the network as the browser retrieves these resources from its local cache instead of downloading them again from the server.