Are you having problems with how to avoid enormous network payloads on your website?
If you just ran your site through PageSpeed Insights or Lighthouse, you might be staring at the Avoid enormous network payloads diagnostic message, 🩺 which triggers if the page’s file size is above 1.6 MB.
Thankfully, there are some easy ways to reduce your page’s size and fix the diagnostic.
In this post, you’ll learn ⏩ how to avoid enormous network payloads by implementing four high-level tactics.
Beyond helping you fix the Avoid enormous network payloads diagnostic and improving your score in Google PageSpeed Insights, these tips will just generally help you create a faster-loading website and improve your site’s user experience. 🧑🏼💻
What is an enormous network payload?
Network payload refers to the size of the data being transferred between your website’s server and the client’s browser.
It’s the digital “freight” that your website has to load every time someone visits a page. This includes HTML files that structure your content, CSS files that style it, JavaScript files that add interactivity, and media files like images and videos that enhance user experience.
In other words, it’s the total size of everything needed to make your page visible to your human visitors. Data from HTTP Archive places the median size between 1,700 and 1,900 KiB (1.7 and 1.9 MB) [1].
Google will trigger the Avoid enormous network payloads diagnostic if the page’s total size exceeds 1,600 KiB.
Some of the factors that may balloon a network payload to such enormous proportions include:
- Unoptimized images: A single high-resolution image can be several megabytes in size. So, without compression, they could easily take up a significant chunk of your bandwidth.
- Bloated code: Redundant HTML, CSS, and JavaScript lines not only amplify the network payload but also slow down the parsing process.
- Unnecessary requests: If you’re not using tactics like browser caching, you could be requiring users’ browsers to download files unnecessarily.
If you expand the diagnostic in PageSpeed Insights, it will show you the exact requests that are contributing to your site’s large network payload.
Why avoid enormous network payloads?
Beyond improving your PageSpeed Insights scores, here are some specific reasons why you should learn how to avoid enormous network payloads:
- Speed up your site: reducing your network payloads will help you speed up your site, which has all kinds of benefits for bounce rates, conversion rates, search engine optimization (SEO), and improving user experience in general.
- Optimize for mobile users: Statista reports that as of 2023, 58.33% of all web traffic comes from mobile devices [2]. These are the surfers who are often on the move, relying on broadband connections that may not be as stable as regular Wi-Fi or LAN. Add an enormous network payload to that, and the result would be a severely compromised mobile browsing experience.
- Reduce bandwidth usage (for you and visitors): Enormous network payloads don’t just slow down your site – they also eat up more bandwidth. The impact of that is twofold. For you, the website owner, higher bandwidth usage could mean higher hosting costs. For your visitors, especially those on limited data plans, it may lead to extra charges.
How to avoid enormous network payloads
If you’re struggling with how to avoid enormous network payloads, try implementing these four tactics:
Optimize your website’s images (compression, lazy loading, and more) ⚡
Images are often the main culprits behind slow-loading web pages and large network payloads, as they account for up to 60% of the data. So, by optimizing your images, you should be able to cut down on network payload substantially and boost speed.
👉 There are a few different ways that you can reduce the size of network payloads by optimizing your images:
- Compress your images – compressing your images using lossy or lossless algorithms will help you shrink their file sizes, which reduces the network payload.
- Resize images to the smallest dimensions possible – reducing the dimensions of your images to the smallest usable dimensions will also help shrink their file sizes.
- Use optimized image formats – using optimized next-gen image formats like WebP and AVIF is another great way to reduce the file sizes of your images.
- Lazy load your images – lazy loading lets you wait to load below-the-fold images until a user scrolls down. While the images will still load eventually if the user fully engages with your page, lazy loading lets you reduce the initial network payload needed to load the visible content.
If you’re using WordPress, the free Optimole plugin can help you implement all of these strategies automatically.
It uses real-time adaptive optimization technology to serve optimized images to each visitor based on the visitor’s device and connection speed.
Beyond implementing all four of the image optimization tactics that we listed above, Optimole will also serve your site’s images from its built-in content delivery network (CDN). While a CDN won’t add any additional reductions in network payload size, it will still speed up your site by reducing the download time of your images.
To use Optimole, just install the free Optimole plugin from WordPress.org and connect it to your free Optimole account.
The default settings should work fine for most sites, but you’re free to configure it further if you want to tweak things.
Remove or delay as much CSS and JavaScript as possible 🧹
Your site’s CSS and JavaScript can be another source of a large network payload.
👉 To further shrink your site’s payload size, you’ll want to do two things:
- Remove any unnecessary CSS or JavaScript. This will permanently reduce the size of the network payload.
- Delay necessary CSS and JavaScript where possible. This will reduce the payload size for the initial request, which will speed up your site’s perceived load time.
If you’re using WordPress, performance plugins like WP Rocket, FlyingPress, and Perfmatters can help you optimize your site’s code.
If you want the simplest solution, we recommend paying for WP Rocket or FlyingPress. While these plugins only come in premium versions, the benefit is that they’re very easy to use for non-technical users.
For example, WP Rocket offers one-click options to remove unused CSS and delay JavaScript execution.
If you’re willing to spend more time configuring things, you can also use free plugins like Autoptimize and Asset CleanUp.
👉 For more details about WordPress code optimization, check out these posts:
For those who have the technical skills, though, linting tools may help with web development. Solutions like ESLint can automatically flag JavaScript errors, unused code, and other issues that could contribute to your enormous network payload. The tools integrate with most code editors, allowing you to audit in real time as you work.
Minify your code for further savings 👨💻
Another trick on how to avoid enormous network payloads is minification. It compresses your code by stripping away all the non-essential elements – like line breaks and comments – without affecting functionality.
When done manually, code minification is tedious and prone to errors. A more practical approach would be using automated tools.
For example, tools like UglifyJS for JavaScript and CSSNano for CSS can be integrated into your build process. And if you’re on WordPress, plugins like Fast Velocity Minify should be able to handle the task. They automatically reduce the size of CSS, HTML, JavaScript files, and, by extension, your network payload.
Beyond using a minification-specific plugin like WP Super Minify, general performance plugins like WP Rocket and FlyingPress also include minification features.
However, even though automated tools and plugins may minimize those risks, you should always proceed with caution. If done incorrectly, it could break your site’s functionalities and accessibility.
For instance, you might want to test the minified code on a staging site before implementing it live. This allows you to catch any broken functionalities before they compromise the user experience on your main site.
And if you’re using WordPress plugins for minification, make sure they are compatible with your theme and other tools. Also, remember to save a copy of the code before optimizing it. That’ll be your backup in case something goes wrong during the minification process.
Enable browser caching 🌐
Browser caching is a technique that stores copies of a website’s static files – like images, CSS, and JavaScript – on a user’s local device. So, whenever they revisit your site, the browser proceeds to load the stored files from their local cache instead of your hosting server.
You can set up browser caching on a WordPress site in two main ways. The first involves tweaking the .htaccess file on your server to specify caching rules. The method is effective but requires a solid grasp of server configurations.
If you’re looking for a simpler solution, the WP Rocket and FlyingPress performance plugins include this as a feature. If you’re already using one of them for code optimization, there’s no need to add another plugin.
For a feature-specific plugin, you can use something like the free Speed Up – Browser Caching plugin. There are no settings to configure – just enable the plugin and call it a day.
Once you’ve implemented browser caching, you can test if it’s working using something like this browser caching checker tool from GiftOfSpeed.
That’s how to avoid enormous network payloads on your site ⚠️
Having covered the basics, here’s a quick rundown of how to avoid enormous network payloads:
- ⚡ Optimize your site’s images with a plugin like Optimole
- 🧹 Remove or delay as much CSS and JavaScript as possible
- 👨💻 Minify your code for further savings
- 🌐 Enable browser caching
Thankfully, you don’t need to be a tech expert to make those changes. Smart plugins are now capable of handling all the technical stuff on your behalf – from compressing code to optimizing images. That means you should be able to lighten your site’s network payload without hiring web developers.
Check out these other resources for more in-depth details on how to avoid enormous network payloads with various WordPress tools and plugins:
💡 For some other ways to speed up your site, check out our full list of WordPress performance tips.
Do you still have any questions about how to avoid enormous network payloads in Google PageSpeed Insights? Let us know in the comments!