If you are using Google PageSpeed Insights to test your site, you’ll see this “avoid enormous network payloads” warning if the total size of your page is more than 1.6MB.
It sounds technical, but this is actually one of the recommendations that you as the site owner have the most control over. Unlike some PageSpeed recommendations, you can fix this one!
The network refers to the connection between your visitor’s browser and the server where your site is hosted. The payload is all the files that make up your site – fonts, images, CSS files, JavaScript files etc – which have to be downloaded from the server to the browser. Each one has a filesize in KBs (Kilobytes) or even MBs (Megabytes). The total file size of all the resources for the page is the payload for your site.
Generally speaking, the larger the payload, the longer your page will take to load.
I would say that 1.6MB is still too large, especially if you want your page to be fast on mobile, and especially if you’re not on top notch hosting, which many WordPress site owners are not.
A safer target would be 1MB.
How to reduce the network payload of your WordPress site
While optimization and caching plugins have some features to help you with this, those are more or less Band-Aids and should be the finishing touch in tackling this issue, not your primary strategy.
As site owners, we are the ones that created the current payload for our page through the theme we selected, the plugins we’ve installed, and the content we’ve added.
That means we have the ability to reverse the damage and reduce the page size. Usually this is done by removing elements from the page, or finding lightweight replacements.
You may feel that this is a compromise of the design or content of your site, but the chances are that your page contains a lot of unnecessary elements from your visitor’s point of view.
Fancy effects, animations, sliders etc are usually over-valued by site owners whereas most visitors just want the information they came for. They don’t necessarily care about the “frills”, especially if they are creating a slow user experience.
Focusing on a specific purpose for each page, with a page weight “budget” of 1MB, will help you improve not only Pagespeed, but also user experience, and therefore likely conversions and overall effectiveness.
This isn’t something you can fix in one place and be done with it – the network payload for each page will be different depending on the content.
Some general optimizations, like minification, GZIP etc will be applied across your whole site, but some pages will need individual tweaking based on their specific content.
I also recommend you read my post What’s Making Our Sites Slow, We Are for an in-depth look at the most common mistakes site owners make in this area.
Find the low hanging fruit
To get started, make sure you expand the PageSpeed recommendation since it will show you the biggest contributors to the page size:
This essentially gives you a to-do list for the page and shows you where to focus your efforts.
For example, in the screenshot above you can see what a dead weight the JavaScript file for one embedded Tweet is!! Replacing the embed with a simple screenshot of the Tweet instead, will save me more than 2MB! That’s a huge win.
And that will not only impact the page size, but other PageSpeed audits related to main-thread work, JavaScript execution time, total blocking time and more.
I recommend you check your most important pages and see how you can optimize them.
General tips for reducing page size
- Reduce the number of images and videos on your page
On most sites, images are one of the biggest contributors to page size. Review the number of images on your page and see if they are all really necessary. - Make sure your images are sized correctly.
Don’t download huge stock images and upload them as-is to your WordPress site. You don’t need high resolution images and you should select the size that is closest to how it will be displayed on your page. Here’s a more detailed guide about correct image sizing.
- Reduce the number of featured items
Usually featured items, whether posts, products etc, each come with a thumbnail image. So if you have 20 featured items you could be automatically adding 20 images to your page. - Reduce the number of items in any sliders/carousels/galleries
Definitely don’t have more than one of these on a page, and if you “must” have one, limit the number of items in it to 3. - Remove social widgets, like embedded feeds from Twitter, Facebook, Instagram and Pinterest. Or, place them only on certain pages, but not every page.
- Replace embedded content like Tweets with screenshots instead
- Replace social sharing buttons with lightweight ones
Scriptless Social Sharing is a good plugin for this purpose. - Reduce the number of ads on your page
- Reduce the number of fonts that you use
Optimization techniques that reduce page size
Once you’ve done your due diligence to manually trim the fat of your pages, then it’s time to apply broader optimization techniques to fine-tune the page size.
Image optimization
Optimize and compress all your images. There are numerous image optimization plugins and services available, such as Imagify, Smush and others.
Caching and optimization plugins
These kinds of plugins will be able to give you the following features which will help reduce file sizes, or mitigate the impact:
- Minification of CSS and JavaScript files
- GZIP compression
- LazyLoad for images and videos
- Delay JavaScript execution
- Examples: WP Rocket, Flying Scripts, Autoptimize
Note that both LazyLoad and Delaying JavaScript are in some ways “tricks” that help you get a better PageSpeed score. As soon as the visitor starts interacting with the page, those scripts will load and the visitor will still be negatively impacted by their loading and processing time.
LazyLoad will only load images as they are needed, but if you haven’t optimized the images, or there’s a lot of them, it will still negatively impact your visitor. Some users pay for internet bandwidth and your site will still cost them, even if you have a high PageSpeed score.
To drive this point home, I highly recommend reading Caspar Hübinger’s post about the very real world impacts of page size, reaching far beyond your PageSpeed score.
That’s why removing content is always a better all-around strategy.
Clean-up plugins
These kinds of plugins allow you to prevent themes and plugins loading CSS and JS files where they are not needed. A few examples:
Going through these steps to trim down your pages will not only help improve the “avoid enormous network payload” warning, but will inevitably have a positive impact on other PageSpeed recommendations.