When testing your site page’s performance with Google Pagespeed Insights, you might encounter this “Avoid Enormous Network Payload” warning.
Enormous might be a bit of an exaggeration but broadly this means is that the size of your page might be too big and larger than 1.6 MB.
In this post we’ll talk through how to resolve this problem. We’ve included an audio version of this article as it can be somewhat technical in places, click play below to listen to that.
Table of Contents
What Is the “Avoid Enormous Network Payload” Warning?
As we mentioned before, seeing the “Avoid Enormous Network Payload” warning in Google Pagespeed Insights implies that your page size is too big. Bigger pages are always slower to load because there’s more to download so we want our pages as small as possible.
What Should an Optimal Page Size Be?
Google wants to see pages under 1.6mb but in an ideal world we want pages under 1mb and if scoring 100 on Google’s Mobile Pagespeed test is your goal, your pages will need to be around 0.5mb in size.
This test actually uses a 1.6 megabit connection, which is really slow, so in order to score above 50 or 60, your pages will have to be 1 megabyte or less.
Realistically speaking, most people today use a connection that’s faster than that so less than a 100 score doesn’t necessarily translate to your site being slow in the real world. A 1.6 megabit per second connection is super-slow given that the majority of users have their connection speeds of 10 megabits per second or above. While a want our pages as small as possible, we typically target 1.5 megabytes when working for our clients, since this page size is quite reasonable and allows for third party tools like Google Analytics, Facebook Pixel and a reasonable volume of images.
Pages over 1.5mb are likely going to struggle to score in the “good” range for Google’s Core Web Vitals test as there’s simply too much data to download to sit under the threshold.
Remember The Size Of All Pages Matter
From a site speed perspective, it’s important to know that you should optimize all site pages, not just the homepage. Naturally, your homepage will probably have the most visits, but all web pages matter when it comes to Google core web vitals metrics. It might happen that your homepage passes the test, while some other pages turn out to be problematic, so make sure to test all your pages.
Find the Root Cause Of Large Page Sizes
First, being troubleshooting the issue you should diagnose what is actually causing the enormous network payloads. We recommend using our speed test tool SiteSpeedBot.com for this purpose.
You’ll get a detailed breakdown of the page weight by the type of files. It’s very user-friendly so you’ll find it easy to use, even if you’re inexperienced and this is your first time doing this.
SiteSpeedBot.com will give you a speed test result and if you scroll to the bottom, an overview of the page size by type of files such as CSS; JavaScript, HTML, images, videos, and others.
It will also break down sizes by domain name which will help highlight if it’s third party scripts causing the problem, like livechat. Once we’ve identified the source of our larger page size we can then take steps to fix the problem.
Images and Lazy Loading
Images are one of the biggest contributors to page size. There can be two image-related issues that increase the size of your pages:
- The page has too many images, most of which are too big.
- Lazy loading isn’t implemented on the page.
The solution to the first issue is usually to get image compression in place using a tool like Shortpixel, EWWW Optimizer or Imagify. Making sure images are sized appropriately is also important, e.g. making sure the image for a 500×500 pixel placement on the page isn’t 5000×5000 pixels.
The solution to the second issue is also straightforward – get image lazy loading in place. After you do this, the images below the fold (the area on the page first visible to the visitor) will not load until the visitor scrolls down, so even if you have a long page with many elements like images, videos, text, etc., your page will load faster.
Either of the two image-related issues might be causing the enormous network payload of your page, but there are also some other things that might be responsible for this.
Videos Above the Fold
Next, we have video backgrounds. Video backgrounds are usually either above the fold, in the initial viewable area, or in some sort of auto-playing video or media in that section. So, as soon as the page loads, the browser is forced to download that video or media and start playing it. Naturally, this will increase the page load significantly, video backgrounds and autoplaying videos are both bad for site speed and should be avoided.
Video backgrounds aren’t necessarily for your marketing as can often be grainy and buffer. Generally we suggest you use a high quality high resolution image rather than a video background. If the background video is that important it’d probably perform better in the foreground with the visitor being able to control the player and hear the audio as videos playing the background have no audio.
If your page has videos (such as YouTube videos) above the fold or product pages with many product images, that can also harm your site performance in some cases. In these cases, getting video lazy loading in place with help reduce the impact of video on page weight – many theme builders and templates can load videos in a speed optimized way if you set a preview image or thumbnail so it’s worth investigating that.
In this scenario the page will just show the thumbnail and start loading the video only after the user clicks on the thumbnail. Each Youtube player is approximately 0.7mb in size so using this method reduces the player “weight” or size down to just the size of the preview image.
Use Images Instead of Sliders
Sliders are generally bad for conversion and they’re certainly bad for speed but people still insist on using them – when was the last time you spend time looking through a slider? Some slider plugins like Slider Revolution have some lazy load features built in (that need to be turned on) but broadly, a single image will be better for both speed and your overall marketing than a complicated slider.
Too Much JavaScript & Heavy Third-Party Tools
Too much JavaScript is another problem we come across on a daily basis. Most commonly we see livechat and marketing automation tools cause problems here.
A simple starting point here is to run a basic audit on the plugins and marketing code you have embedded on the site and remove anything thats no longer being used. Often marketing tools are no longer being used but the code is left on the site.
How to Fix the “Avoid Enormous Network Payload” Warning
Here’s some simple ways to solve this problem and reduce page sizes.
Use Lazy Loading
This is a simple optimization technique supported by a number of plugins, the two we use are WP Rocket and Autoptimize.
We generally recommend WP Rocket as the caching and optimization plugin 99% of sites should use. Autoptimize is another great plugin and typically what we use for image optimization as it allows you to exclude the first X number of images pages from Lazy Loading which is important to help boost LCP timing – we usually exclude the first 4 images on the page from lazy loading and also manually add the logo filename to the lazy load exclusions list.
Compress Images
Moving on to the next solution, there are a few basics we should note. There are two kinds of compression when optimizing your images. One is lossless compression, which we highly recommend since it will compress your image to a smaller size, but keep its quality. On the other hand, lossy compression will reduce your file size even further, but also mess up its quality, which is something you don’t really want.
Needless to say, we think that it would be silly to sacrifice image quality for a slight gain in speed, so lossless compression is the one to go for. The plugin we typically use when it comes to image compression is ShortPixel. It’s reliable, fast, and very easy to use. ShortPixel also supports WebP image format, which is one of the NextGen image formats, which we will discuss in the next paragraph.
Use NextGen Image Optimization
Most of us have heard of JPGs, PNGs or Gif image formats. There’s a newer image format, .WebP, that keeps the original image quality while reducing the file size even more significantly (up to 50% of the original JPEG or PNG). The only downside to this format is that it’s still not supported by all browsers so we need to implement this image file format either via a plugin or CDN.
Depending on the site, we’ll use either Shortpixel, EWWW or Imagify or image optimization and for injecting webp images.
Use a CDN
In cases where your site has lots of pages or images, it might not be practical to compress all the images in one go. In such situations, we typically recommend Cloudflare’s CDN service. Their $20 a month plan comes with image compression and optimization features, while also implementing the next-gen image optimization or conversion to WebP files.
Use the Right Image Format – JPG over PNG most of the time.
Another important thing to remember is to use the right image format. We often see content writers use PNG files in places where a JPEG would fit better and be much smaller.
A typical featured image in a blog post saved as a PNG file will be approximately 0.5mb whereas the JPG version of that image will be 0.1-0.15mb which is a significant difference especially compounded over multiple images throughout the page.
Remove JavaScript
This article on javascript optimization digs much deeper on steps you can take to improve JS performance but one simple technique is to remove plugins or code that is no longer in use.
Delay JavaScript Until User Interaction
A newer JS optimization technique is to JavaScript until the visitor interacts with the site. Live chat is a great candidate for this optimization technique as these tools are heavy and slow and don’t need to load immediately with the website.
WP Rocket comes with a built-in feature called delay JavaScript. There are other great tools that can help you pause JavaScript, too, like Perfmatters which we also recommend.
Some marketing code such as FacebookPixel, Google Adwords, Bing search marketing, LinkedIn, Pinterest can be good candidates for this JS optimization method too.
Avoid reCAPTCHA if possible
One common issue we see is recaptcha and often multiple recaptchas loading on a page. These are approximately 0.3mb each and slow to execute and really shouldn’t be running sitewide.
Other Fixes
Here’s a few other minor fixes you’ll probably read about elsewhere if you’re googling this problem but most of the time do very little to reduce page sizes unless in an unusual scenario.
Minify CSS, JavaScript, and HTML
Minifying CSS, JavaScript, and HTML can help a little but will most likely not do anything to solve the “avoid enormous payload” warning as these techniques are often saving you 5-10kb at most, so 0.01mb
We usually use the built in minification in Cloudflare for this.
Disable Plugins and Features
Turning off theme features, plugin features and getting rid of plugins entirely may help reduce pay sizes somewhat.
Use CloudFlare
As stated before, we suggest CloudFlare to all our clients. This won’t help reduce page sizes but it will help speed up the delivery of larger pages and content to users. It won’t necessarily move the needle much in a speed test tool but it can make quite a difference in the real world.
Want It Fixed For You?
We’ve optimized over 4000 WordPress sites and can help make yours load lightning fast too! If you’re looking for someone to do this for you, complete the form on our homepage and one of the team will review your site and tell you what’s doable in terms of site speed.