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.
- Identify The Cause Of Enormous Network Payloads
- Avoid Enormous Images
- Compress Images
- Consider WebP
- Remove Slow Page Builders
- Optimize Google Fonts
- Optimize Third-Party Code
- Identify Your Slowest Plugins
- Use An Efficient Caching Plugin
- Avoid Enormous Payloads With WP Rocket
- Take Advantage Of Server-Side Caching
- Reduce Number Of Elements On The Page
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.
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 Builder, Kadence Theme, 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. I wrote a comparison about 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 reduce 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).
addtoany cookie-law-info apps.elfsight.com/p/platform.js xfbml.customerchat.js fbevents.js fbq( /busting/facebook-tracking/ /sdk.js#xfbml feedbackcompany.com/includes/widgets/feedback-company-widget.min.js ft.sdk.min.js getbutton.io adsbygoogle.js google-analytics.com/analytics.js ga( ' ga(' /gtag/js gtag( /gtm.js /gtm- translate.google.com/translate_a/element.js static.hotjar.com/c/hotjar- static.leadpages.net/leadbars/current/embed.js snap.licdn.com/li.lms-analytics/insight.min.js livechatinc.com/tracking.js LiveChatWidget widget.manychat.com olark //a.omappapi.com/app/js/api.min.js pinit.js pixel-caffeine/build/frontend.js shareaholic ShopifyBuy sharethis simple-share-buttons-adder smartsuppchat.com/loader.js Tawk_API widget.trustpilot.com/bootstrap static.ads-twitter.com/uwt.js twq( platform.twitter.com/widgets.js 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 add 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
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). Here’s my WP Rocket configuration guide.
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 dashboard.
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 their own caching as well.
Server-side caching is faster than file-based caching done by 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
Frequently Asked Questions
How do I avoid enormous network payloads in WordPress?
Reducing page size is the best way to avoid enormous network payloads. This can be done by reducing the size of images, videos, scripts, styles, and fonts.
How do I avoid enormous network payloads using WP Rocket?
See Also: My Ultimate WordPress Speed Guide
Drop a comment if you need help :)