This post offers strategies to address the "avoid enormous network payload" warning on performance evaluation tools like PageSpeed Insights. Techniques include browser caching, GZIP compression, CSS optimization, JavaScript handling, minification, lazy loading, and image optimization. Reducing payload size enhances user experience and performance scores, particularly for core web vitals like largest contentful paint (LCP).
Are you encountering the “avoid enormous network payload” warning on website performance evaluation tools like PageSpeed Insights and you’re not sure how to tackle the issue?
We’ll guide you through various different processes that will fix the sizes of pages of your Wordpress website. In essence, large network payloads are highly correlated with long load times and anything we can do to make them smaller will help to fix this issue.
—
When we’re facing the warning about enormous network payloads, mending this issue will require us to fix other issues that PageSpeed Insights throws at us as well. In other words, it’s an issue that encapsulates consequences of other issues and it focuses on the total size of all resources that a browser needs to download in order to render a page. Moreover, you get this warning when the page’s size is larger than what Google considers is within optimal range.
Besides improving your website’s performance score, reducing the total size of network requests also boosts user experience. More specifically, it has a direct impact on one of the core web vitals, the largest contentful paint (LCP).
Popular website performance evaluation tools like PageSpeed Insights use Lighthouse under the hood, which will list all resources (images, CSS & JavaScript files) requested by the webpage and order from largest to smallest. Furthermore, you will only receive this warning if the page size exceeds 5 MB. The reason behind this limit is to help surface the payloads that are larger than the median size which lies somewhere between 1.7 and 1.9 MB.
How it affects the performance
An obvious consequence of large network payloads is that it will take longer to load the page and therefore it will take longer to render it. This can have a significant negative impact on the user experience of your visitors.
When we’re evaluating a page using PageSpeed Insights, you’ll get a poor score because of it. The reason why is because it directly affects the largest contentful paint (LCP) metric, one of the core web vitals, which accounts for 25% of the overall performance score.
Another good reason you should work toward fixing this issue is the fact that it can hurt your conversions on mobile. Not everybody has lightning fast internet connection and you could be missing out on potential customers who might get frustrated because of the long loading times and leave.
How to reduce payload size
Main goal you should be focusing on here is to keep the total byte size of your page below 1.6 MB. This limit is based on the amount of data that can be downloaded on 3G connection while still achieving a time to interactive (TTI) score of 10 seconds or less.
Browser caching and GZIP compression
Setting up an efficient browser caching policy will help reduce the number of network payloads on repeat visits. This means that static resources will get cached in on users’ browsers and whenever they load the site again those resources will get pulled from cache rather than being downloaded again from the server.
On the other hand, you can further optimize the files by using GZIP compression functionality on the server itself. In order to enable this tool, you should check with your hosting provider. This is something every hosting provider should be able to offer.
Remove unused CSS
This is a common issue whenever a website is built using page builders like Elementor or Divi for example. Page builders tend to add a lot of useless code to your pages, which can bloat them and slow them down. There are a few ways you can deal with this issue, and you can find out more about it in our “How to remove unused CSS in Wordpress” article.
Delay JavaScript execution and remove unused JavaScript
By delaying JavaScript execution, the JS file won’t get loaded until the first user interaction, which may be scroll, mouse move or click. You can also use the setTimeout() function, which allows you to execute code after a certain amount of time.
Minify JavaScript and CSS
It’s considered a standard best practice to minify and compress files when you’re pushing for production. While you’re working on a website in the development stage, it may be essential to use indentations and comments, but when you’re building a production version of the site you should always remove all unnecessary whitespaces and characters, since the machine (server) will find no use for them.
Lazy loading
This is a more common expression, but we also know it by deferring assets. Basically, by deferring assets like images, you’re loading them as they’re needed. This can have a significant impact on performance if a page has lots of elements like image, videos and iframes because browser’s not loading all of them immediately as page loads.
Optimize images
In a lot of cases, pages use images in the hero section, which if unoptimized can cause a poor LCP score. In order to deal with this, you can convert them to a modern format like WebP. Moreover, you can tweak options inside conversion tools like cwebp or Squoosh to further optimize the file size.
Conclusion
To wrap it up, we mentioned several different options for optimizing network payloads to make your website load faster. We also recommend you check out the other articles that address each optimization solution separately as they go even more in depth of the matter providing you guidance to make the best version of your website as possible.
