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.

Large page size is often caused by unoptimized images, videos, third-party code, or heavy CSS and JavaScript files. It can also be from slow page builders (specifically Elementor and Divi) which add extra CSS, JavaScript, and div wrappers to every single page on your WordPress site.

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

WebP images typically have a 25-34% smaller file size than JPEGs and PNGs (and are also higher quality).

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.

5. Minify CSS + JavaScript

Most cache plugins have settings to minify CSS and JavaScript which removes unnecessary characters from your code (reducing the file size).

If enabling this gives you errors, you’ll need to find the problematic file(s) in your source code and exclude them from minification. Otherwise, make sure you’re minifying CSS and JavaScript.

6. Remove Slow Page Builders

Elementor and Divi add unnecessary CSS and JavaScript.

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.

7. Remove Unused CSS + JavaScript

Asset CleanUp and Perfmatters can trim the size of CSS and JavaScript.

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.

As mentioned previously, Elementor and Divi can add lots of CSS and JavaScript to your site. Some files might be able to be disabled such as elementor-sticky, dialog, share-link, swiper, animations, icons, and wp-block-library if you don’t use these features. Elementor also released Optimized Dom Output and Improved Asset Loading which can help reduce network payloads.

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 AdSense – lazy load and delay JavaScript in WP Rocket or Flying Scripts.
• 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.
• YouTube – lazy load, replace iframes with preview images, and delay JavaScript.
• 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).

10. Delay JavaScript

Delaying JavaScript can be done in WP Rocket (delay JavaScript execution) or Flying Scripts.

Each plugin works a little differently. WP Rocket delays JavaScript until user interaction (e.g. mouse scroll, click). Flying Script sets a timeout period in seconds until the JavaScript is loaded.

This won’t help avoid enormous network payloads since you’re just delaying JavaScript (not optimizing it) but it can improve your site’s initial load time and potentially, your web vital scores. This is especially true if you delay AdSense, comments, and heavy third-party code.

Below is the default list of JavaScript WP Rocket delays. If you have other non-critical JavaScript that can be delayed (check your GTmetrix Waterfall report), try delaying that too.

getbutton.io
/app/js/api.min.js
feedbackcompany.com/includes/widgets/feedback-company-widget.min.js
snap.licdn.com/li.lms-analytics/insight.min.js
static.ads-twitter.com/uwt.js
platform.twitter.com/widgets.js
twq(
/sdk.js
static.leadpages.net/leadbars/current/embed.js
translate.google.com/translate_a/element.js
widget.manychat.com
google.com/recaptcha/api.js
xfbml.customerchat.js
static.hotjar.com/c/hotjar-
smartsuppchat.com/loader.js
grecaptcha.execute
Tawk_API
shareaholic
sharethis
simple-share-buttons-adder
addtoany
font-awesome
wpdiscuz
cookie-law-info
pinit.js
/gtag/js
gtag(
/gtm.js
/gtm-
fbevents.js
fbq(
google-analytics.com/analytics.js
ga( ‘
ga(‘
adsbygoogle
ShopifyBuy
widget.trustpilot.com
ft.sdk.min.js
apps.elfsight.com/p/platform.js
livechatinc.com/tracking.js
LiveChatWidget
/busting/facebook-tracking/
olark

11. Identify Your Slowest Plugins

Query Monitor and WP Hive are great tools for finding slow 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
• Minify JavaScript
• Delay JavaScript Execution
• 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

Cheers,