Let’s talk about enormous network payloads in PageSpeed Insights.
This is triggered when the total page size is above 1,600 KiB. To pass this test, you need to reduce page size.
PageSpeed Insights shows your largest files which is where you should be focusing your attention. Once you know these, reference the solutions in this guide (which are specific to WordPress sites) and you should be able to pass the avoid enormous network payloads test.
1. Identify The Cause Of Enormous Network Payloads
Use PageSpeed Insights to identify files causing enormous network payloads.
Pay attention to the file type (image, CSS, JS) and where the file is being served from (your domain, CDN, a third-party service).
Just by glimpsing at your report, you will know which files need to be optimized so you can narrow down the solution.
2. Avoid Enormous Images
Huge images can cause enormous network payloads.
These appear in the properly size images recommendation.
This simply means you need to resize images to smaller dimensions. I created a “cheat sheet” with image dimensions for my logo, blog, sidebar, and inner pages. That way, I know the exact dimensions images should be resized to before uploading them. Some image optimization plugins have resizing options, but it’s best to upload them with correct dimensions beforehand.
Adaptive image plugins can serve smaller images to mobile devices and improve mobile speed.
3. Compress Images
This is also known as efficiently encoding images.
Lighthouse sets the compression level to 85% and flags images that would have a savings of 4KiB or higher.
ShortPixel and TinyPNG are popular options, or you can do this in Photoshop or GIMP. Try setting the compression level to 85% and you shouldn’t have errors for this item anymore.
4. Consider WebP
You can convert images to WebP using ShortPixel, Imagify, and many other image optimization plugins for WordPress. If your plugin doesn’t support it, you can also use WebP Converter For Media. When selecting the conversion method, <picture> tag is usually the preferred method.
However, many speed-related sites like Kinsta and WP Rocket use SVGs for their high quality images (logo, background image, etc). SVGs don’t get flagged in Lighthouse and still produce high quality images similar to WebP. You may need to use an SVG support plugin to avoid errors.
6. Remove Slow Page Builders
I was previously using Elementor and hired WP Johnny for his page builder removal services and it made a huge difference. Just by hard coding my header, footer, menu, and sidebar, my entire web vitals score shot up. Then he migrated my Elementor pages to Gutenberg which made an even bigger difference. I was averaging C scores and after doing this, I’m averaging A’s.
In Facebook Groups, there is a large trend of people migrating away from Elementor/Divi. Popular alternatives are Gutenberg, Oxygen, and GeneratePress.
They essentially provide you with a script manager to disable CSS/JS on pages where they don’t need to load. So if your contact form loads across your entire site, only load it on the contact page. Plugins for social sharing, sliders, rich snippets, live chat, and others can often be disabled on certain content. Perfmatters vs. Asset CleanUp, but I use Perfmatters since the UI/UX is better. However, Asset CleanUp Pro can disable custom CSS.
8. Optimize Google Fonts
Use the GTmetrix Waterfall chart to see how long your fonts take to load. They can slow especially if you’re loading multiple font families, weights, and they’re not hosted locally.
Make your fonts load faster:
- Host fonts locally using OMGF or Transfonter.
- Be very minimal with font families, weights, icons.
- Use browser resource hints (preload, preconnect, prefetch).
- Avoid font plugins and serving fonts from any type of plugin.
- Add font-display: swap to ensure text remains visible during webfont load.
9. Optimize Third-Party Code
When trying to avoid enormous network payloads, you may notice files are being loaded from a third-party site.
These can flag additional PageSpeed Insights items such as reducing third-party code. Below are common examples of third-party code and common solutions to optimize them. Some items are easy to optimize (hosting fonts and analytics locally) while others (AdSense and GTM) are not.
- Google Fonts – host locally instead of serving them from //fonts.gstatic.com. Also take advantage of browser resource hints (preload, preconnect, prefetch).
- Google Maps – take a screenshot of the map and link it to driving directions.
- Google Analytics – host locally using WP Rocket or Flying Analytics. If using Perfmatters, use a smaller tracking code (minimal, minimal inline, or analytics.js) and disable display features to prevent a second HTTP request to Doubleclick.
- Google Tag Manager – delay in WP Rocket or Flying Scripts and clean up tags.
- Facebook Pixel – hosting it locally using WP Rocket is the only way I know of.
- Social Media – use Grow by Mediavine which was the fastest social sharing plugin in WP Rocket’s test, avoid social media widgets (e.g. Facebook Like boxes).
- Gravatars – delay Gravatars and use a local Gravatar image with WP User Avatar (my blog comments show an example of a custom Gravatar image I use).
- WPdiscuz – tweak the settings to initiate AJAX loading after page, disable WordPress native AJAX functions, and disable load font awesome CSS lib. After delaying comments and using WP User Avatar, your comments should load very quickly. Native WordPress comments fast too (I just like the look of WPdiscuz).
11. Identify Your Slowest Plugins
Query Monitor has a “queries by components” tab which shows your slowest loading plugins.
WP Hive is a Chrome Extension that adds a little section when searching the WordPress repository that shows whether a plugin has an impact on memory usage or PageSpeed Insights.
Otherwise, eliminating unnecessary plugins and replacing high CPU plugins with lightweight plugins is an ongoing process that can take time, but can prevent enormous network payloads.
12. Use An Efficient Caching Plugin
WP Rocket and LiteSpeed Cache are the gold standards for cache plugins.
If you’re using a LiteSpeed Server, use LiteSpeed Cache. Otherwise, I would personally use WP Rocket for nearly all other cases (with the exception of SG Optimizer on SiteGround, but I don’t recommend their hosting as they have a slow TTFB).
Which cache plugin you’re using and how you configure the settings has a large impact on your web vital scores. Make sure you test each setting (specifically the file optimization tab in WP Rocket) to see how each setting impacts scores and load times.
13. Avoid Enormous Payloads With WP Rocket
WP Rocket says they can help avoid enormous payloads with:
- Browser caching
- Minify CSS
- Lazy Load for images and iframes
You’ll want to enable these in your WP Rocket settings.
14. Take Advantage Of Server-Side Caching
Most cloud hosts have server-side caching built-in to their dashboards.
Redis, Memcached, and Varnish are all types of caching that can reduce network payloads. I use Cloudways and have Redis enabled which is a popular, efficient caching option. SiteGround has NGINX-based delivery which is available in Site Tools, and Kinsta has its own caching as well.
Server-side caching is faster than file-based caching done by the cache plugin. Take advantage of it.
15. Reduce Number Of Elements On The Page
Reducing the number of elements on your pages will reduce page size and network payloads.
- Reduce images
- Reduce videos
- Reduce sliders
- Reduce featured posts
- Reduce social media feeds
- Break blog comments
- Show smaller excerpts