Avoid Enormous Network Payloads

Before we dig into how to avoid enormous network payloads, it is important to know what a payload is, in terms of computing and web page structure. Payload is the actual packet of data, which can be a file, or a message, within an HTTP (Hypertext Transfer Protocol) request. When an HTTP request is made, it contains additional information, such as the header, metadata, but this is excluded from the payload itself.

In terms of performance, obviously, the larger the file size or the more requests necessary, the longer the page is going to take to load. Reducing the page “weight” can go a long way to enhance the user experience. Not only that, but mobile providers also charge customers based upon the amount of network data they use, so reducing and optimizing a page’s size can help save your end users money as well.

So, how do you know if your page is too heavy for users? Or which files are causing bottlenecks? The best place to start is to run a website speed test. The free website speed test tool from Dotcom-Tools will also allow you to choose from multiple locations, for better testing accuracy, depending on where your users are located. Once the test is complete, you can view the waterfall chart. This will show you all the load times, size of all the page elements, and overall size of your page. You can also view which elements are taking the most time to load and which ones are the fastest, so you have some baseline to compare performance. Specific to Lighthouse reports, any network requests that are over 5,000 kB will be flagged for review. Data from the HTTP Archive shows that median page size for mobile devices are 1900 kB and 2100 kB for desktop devices.

If you have optimized as much as you can, but your pages are still loading slowly, you can also defer, or delay them from loading. For example, you can load the appropriate and relevant resources you need to display the above-the-fold content, so the user is not left waiting. The rest of the non-critical HTML, style sheets, and JavaScript can be loaded after. You can also minify and/or combine these elements, like CSS, but we will talk more about that later in this guide. Lastly, take advantage of caching static elements, like images, so that the server does not have to send these files each time the user accesses the page. Caching is a fantastic way to offload work from the server onto the browser.