TL;DR: Preventing enormous network payloads includes compressing and optimizing images, using WebP, lazy loading non-essential items, and using CDNs for resource distribution. Consider also trimming unnecessary scripts and styles, and prioritizing critical resources shrink data sent between the server and user's device.
You just ran a Google PageSpeed Insights report, and this warning popped up in the diagnostics section:
Although “enormous” sounds scary initially, the “Avoid enormous network payloads” message is easily fixable.
In this guide, you’ll find the most effective techniques to root out the problem and make sure you never see the warning again.
Let’s dive straight in!
What are network payloads?
Much like a dialogue between two people, browsers and servers communicate through network requests and responses. So network payloads are the information a web browser and a server exchange when a user loads your website.
In a more technical sense, network payloads represent the total size of resources transferred over the network, such as HTML, CSS, JavaScript files, images, videos, and other content that makes up your website.
What does the Avoid Enormous Network Payloads warning mean?
In simpler terms, “Avoid enormous network payloads” means your page size is too big. The reason the Google PSI report is bringing this to your attention is you’ve exceeded the recommended total page size of 1.6MB (or 1,600kB).
Remember!
In the case of this warning, you shouldn’t limit your optimization efforts to your home page only. All pages need to be monitored and their size reduced whenever feasible.
And to set some general wonderings out there to rest – payload size, page size, and page weight all refer to the overall size of a particular web page and can be used interchangeably.
What should an optimal page size be?
While there is no optimal page size, Google has found that the cap target of 1.6MB is the maximum amount of data that can be theoretically downloaded on a 3G connection while keeping Time to Interactive under 10 seconds.
The Google PSI test uses a 1.6 megabit connection (that's pretty slow), so realistically, to be competitive among audiences with access to fast networks, you’d want to aim for anything between 1-1.5MB.
This allows enough room for popular third-party services like Google Analytics, Facebook Pixel, and a good amount of images to be transferred without affecting your site speed in a bad way.
Which brings us to the next significant bit.
Why are enormous network payloads harmful?
Large amounts of data transferred over the network negatively impact your website performance and visitors.
Large network payloads require more time to download, which hurts your:
Meanwhile, users and mobile users on slower networks and limited data plans are greeted with sluggish, frustrating user experience, unresponsive pages, and even denied access to your website. Not to mention, they might get charged extra by network providers for trying to load your website.
Unsurprisingly, this would mean your business will experience higher bounce and exit rates, decreased user engagement, and bad conversion rates.
Ultimately, not fixing the Avoid enormous network payloads warning will cost your online business and users real money.
Luckily, the PageSpeed Insights report allows a more granular look, so you can narrow down the culprits much faster before you begin troubleshooting.
Identifying the causes of enormous network payloads
Expanding the “Avoid enormous network payloads” warning will give you a detailed breakdown of the page weight by the type of files and where they are being served.
The most common culprits for large network payloads are:
- Unoptimized CSS and JavaScript files (including third-party JS)
- Large images and videos
- Excessive use of plugins or third-party libraries
- Unoptimized web fonts
Naturally, the next step is to explore which techniques and optimizations will help you reduce your webpage size most effectively.
How to Avoid Enormous Network Payloads in WordPress
1. Choose Light-Weight WordPress Themes and Page Builders
Using a lightweight setup in the first place guarantees a reduced page size. Some WordPress themes and page builders (like Divi and Elementor) come with excessive features, customization options, and pre-loaded assets that can quickly bloat and slow down your website.
Consider testing their CSS, JavaScript, and fonts before developing your website. Also, check out which WordPress themes have shown great results on speed and Core Web Vitals performance.
If you already use a bloated theme or page builder, there are several ways to optimize them to reduce network payloads:
- Code your header, footer, and sidebar in CSS (avoid doing this in the page builder)
- Limit the usage of extra page builder plugins and test their CSS and JavaScript before you do
- Lazy load background images (jump straight to the techniques we recommend)
- Consider parting with some of the functionalities to simplify your page design and resources
2. Beware WordPress Plugins That Bloat Your Website
WordPress offers a great volume of functionalities through plugins.
However, using too many plugins, especially ones that generate dynamic content or load external resources, can increase the network payload. Each plugin may add extra CSS, JavaScript, or other assets to be loaded by the browser, resulting in a larger payload.
Here’s what you can do to prevent WordPress plugins from bloating your page size:
- Check if your active plugins are still relevant to your website and business needs: with large plugin collections, site owners often lose track of what was considered useful at a specific moment and then forget to revisit the plugins in the course of the site’s development.
- Unload plugin CSS and JavaScript: some plugins tend to load site-wide when in reality, they only need to fire on a particular page or element. Using a tool like Asset CleanUp can help you restrict them. By unloading scripts and styles where they’re not used, you can reduce the size of CSS and JavaScript files and reduce network payloads.
- Uncover jQuery dependencies: some plugins rely heavily on jQuery or use it inefficiently. If you notice plugins among the largest CSS/JS files in your PSI warning breakdown, turn to a developer to optimize script dependencies.
3. Minify CSS and JavaScript files
Minification involves removing unnecessary characters from CSS and JavaScript files, such as whitespace, comments, and line breaks. Eliminating these extraneous elements has an immediate effect on page size.
4. Delay Third-Party JavaScript
Once you’ve identified third-party culprits, it’s time you deprioritize them by loading them below the viewport to free up space in the main thread for more essential resources.
Reducing the impact of third-party code manually might feel too technical for some, and if this is your case, I suggest you opt-in for a ready-made solution. Turn to Flying Scripts for a specialized solution or a complete performance optimization plugin like NitroPack.
5. Optimize Your Images
Uploading high-resolution images and videos directly to WordPress without optimization will result in large file sizes.
And what happens when you load large files on web pages? You guessed it. Increased network payload.
Here are several ways to optimize images:
- Resize images: Using image editing software or online tools to resize your images manually can be very time-consuming. To ensure images are always the right dimensions across devices, explore NitroPack’s Adaptive Image Sizing.
- Compress images: Compressing images at 85% reduces their file size without significantly affecting visual quality. You can use image compression plugins to bulk-optimize existing images in your media library.
- Convert images in WebP: Using next-gen image formats like WebP helps reduce image file size for faster loading and serving of content.
- Lazy load images: Implement lazy loading to defer the loading of images until they are about to come into view. This technique reduces the initial network payload by loading only the images visible on the screen, while the rest are loaded as the user scrolls down.
6. Optimize Your Web Fonts
Web fonts are often overlooked in resource optimization but are among the top assets that cause large network payloads.
Make sure you use fonts designed for the web space. You’ll recognize them by their .woff2 format. Also, hosting them locally will reduce the number of external requests.
Other effective font optimization techniques include:
- Deferring the font loading until it becomes necessary for user interaction
- Subsetting fonts and only using the characters that are actually displayed on a page instead of all available glyphs in the font
Other Techniques to Reduce Network Payloads
Use CDN
A Content Delivery Network (CDN) is a network of servers distributed globally. Using a CDN, you can store copies of your website's static assets, such as images, CSS, JavaScript files, and other media, on servers in different geographical regions.
When visitors access your website, the CDN serves these assets from the server closest to their location, reducing the distance the data travels and minimizing network latency.
This results in faster content delivery and reduced network payloads. Additionally, a CDN can help handle traffic spikes and distribute the load across multiple servers, improving your website's overall performance and reliability.
Compress Assets Using GZIP and Brotli
A logical extension of using a CDN, you should take advantage of compression techniques like GZIP and Brotli. They can significantly reduce the size of your website's assets, including HTML, CSS, JavaScript, and other files.
- GZIP is a widely supported compression method that can be enabled on your web server. It compresses the assets before they are sent over the network, reducing the network payload and improving loading times.
- Brotli is a newer compression algorithm that offers even better compression ratios.
In truth, Brotli is more flexible than GZIP, with a generally higher compression ratio. In fact, Squash Benchmarks tests conclude that Brotli provides a better compression ratio (meaning it produced smaller compressed files) across all compression levels.
Apply Caching
Caching is a technique that stores frequently accessed data or assets in temporary storage to improve subsequent access times.
By implementing caching mechanisms, you can reduce the number of requests made to the server, minimizing network payloads.
There are different types of caching you can utilize:
- Browser caching: Configuring caching headers on your web server instructs visitors' browsers to store static assets locally.
- Server-side caching: Implementing server-side caching techniques, such as object caching, page caching, or database query caching, can significantly improve the performance of dynamic websites.
Fix Avoid Enormous Network Payloads Automatically with NitroPack
The #1 takeaway for reducing large network payloads is to keep your website as lean as possible.
With NitroPack, you get 35+ automated optimizations, including:
- Advanced caching mechanism
- Built-in CDN by Cloudflare
- HTML, CSS, and JavaScript minification
- Complete image optimization stack (lazy load, adaptive image sizing, WebP, etc.)
- Font subsetting
Unlike other performance optimization plugins, NitroPack works on the cloud to eliminate website bloating and reduce the need for separate optimization plugins.
Run a demo test on your website to see NitroPack in action.
Best practices to avoid enormous network payloads in the future
To make sure this warning never grazes your performance reports again, you should:
- Regularly audit and optimize website assets (at least once every 28 days)
- Prioritize performance in web development processes (yes, this means design too)
- Test website performance on different devices and networks (simulate with GTmetrix)
- Stay updated with web performance trends and techniques
