How to Avoid Enormous Network Payloads in WordPress?

“Avoid Enormous Network Payload”

Getting a warning like that in the Google PageSpeed Insights report can make any amateur developer sweat and think that there is something critically wrong with their website.

In reality, “enormous” may be a slight exaggeration as this warning basically means that the size of the webpage is too big.

Typically, this warning shows up in the PSI report when the total size of a webpage exceeds 1,600 KiB or 1.6 MB.

Large web pages take longer to load. That means they cost users real-world money as they have to spend more on cellular data. That is why fixing this issue is absolutely crucial if you want to improve your website’s user experience.

When you hire WordPress developer, make sure to ask them if they know how to solve this error. If they recommend any of the following steps, they know what they are talking about!

Table of Contents

Fixing “Avoid Enormous Network Payload” in WordPress

Elements such as poorly optimized images and videos, heavy JavaScript or CSS files, and third-party code can lead to large page sizes.

Slow page builders such as Divi and Elementor are also known to bulk up your website by adding extra JavaScript, CSS, and div wrappers to every page on the site.

The PageSpeed Insights report will show you the largest files that are causing this error to pop up. Once you identify the culprit, you can try the solutions mentioned below.

Step 1: Figure Out What is Causing the “Avoid Enormous Network Payload” Error

To identify the cause of the “avoid enormous network payloads” error, you need to rely on the PageSpeed Insights report.

Take a look at the file type (CSS, JS, image) and where the particular files are being served from (CDN, domain, third-party service).

The PSI report will tell you which files are the largest and need to be optimized.

Step 2: Compress Images and Avoid “Enormous” Images

Compressing images can also mean efficiently encoding images. There are primarily two kinds of image compressions – lossless compression and lossy compression.

As you can make out from the names, lossless compression is one where the quality of the image stays intact, but the file size becomes smaller. Lossy compression, on the other hand, reduces the file size more but also damages the quality of the image. So, the latter is not recommended.

The Lighthouse tool compresses images by 85% and flags images that have a savings of 4 KiB or more. TinyPNG and ShortPixel are excellent image compression tools that you can use. You can also use GIMP or Photoshop for this. Remember to set the compression level to 85%.

It goes without saying that you should avoid large images to begin with to prevent the “avoid enormous network payload” warning.

Step 3: Remove Slow Page Builders

Page builders are sometimes essential as they help you modify and customize page layouts in pre-built WordPress themes. But your choice of page builder can have a significant impact on the total size of a page.

Some page builders such as Elementor and Divi make your website slow by adding unnecessary JavaScript and CSS files. If you are already using these page builders, removing them and hard coding the menu, header, footer, and sidebar alone can improve your web vitals score.

Here’s a comparison of some of the popular WordPress page builders based on the size and load times of the basic generated pages:

Source

A large number of WordPress developers have started replacing Elementor and Divi with alternatives such as Oxygen Builder, Gutenberg, GeneratePress, and Kadence Theme.

Step 4: Remove Unused JS and Delay JS Execution

Another way to avoid enormous network payloads in WordPress is to remove unused JavaScript files and prioritize the JavaScript files that need to be loaded first.

Doing this would ensure the JavaScript files load only when the first user interaction happens. Such user interaction can include scrolling, clicking buttons, or performing any other action on the page.

You can further reduce network payloads and page size by reducing the number of elements on the page.

To do this manually, you need to insert the “setTimeout()” command:

But if you don’t know your way around JavaScript, you can use a WordPress plugin to do the same job. Free plugins such as WP Meteor and Flying Script help you delay JavaScript files.

Step 5: Try Browser Caching and GZIP Compression

Implementing an effective browser caching tactic can help you avoid enormous network payloads in WordPress. You can find two headers associated with caching – Cache-Control and Expires.

These two elements determine how browsers such as Google Chrome decide how long to keep resources before refreshing them.

To add Cache-Controls headers manually in Nginx, you need to use the following code:

You can also do this with online tools. For instance, WP Engine has a built-in caching solution.

Step 6: Get Rid of Unused CSS

Unused CSS can slow down your page and cause the “avoid enormous network payloads” warning to appear.

You can prevent such unused CSS from loading on the website by using online tools such as PurifyCSS online.

PurifyCSS online determines which CSS files can be safely removed. It also generates clean CSS files that you can add to your WordPress site.

Source

You can also use WordPress plugins such as WP Rocket, Perfmatters, and Asset CleanUp Pro for this.

Step 7: Use Fewer Fonts and Optimize Fonts

One of the most effective ways to avoid enormous network payload, as suggested by PageSpeed Insights, is to use the fewest fonts possible.

You should also optimize the fonts to make sure they load fast. Try these steps to optimize fonts:

Host fonts locally using Transfonter or OMGF.
Be minimal with font weights, icons, and families.
Use browser resource hints (prefetch, preconnect, preload).
Avoid serving fonts from plugins.
Add the “font-display: swap” command to the request to make sure that the text remains visible when Webfont loads.

To check how long your fonts are taking to load, you can use the GTmetrix Waterfall chart.

Source

You can use the FlyingPress WordPress plugin to optimize fonts and apply the font-display:swap command to your website.

Step 8: Use Lazy Loading

Lazy Loading refers to the practice of loading images, site resources, and other content only when the users interact with these elements.

Lazy loading is a simple optimization technique that can greatly reduce the initial load time. You can achieve this in WordPress by using any of these two plugins – Autoptimize and WP Rocket.

Experts recommend WP Rocket as it is the caching and optimization plugin that 99% of WordPress users rely on. Autoptimize is a close second that is great for image optimization.

With Autoptimize, you can exclude the first few images on a webpage from Lazy loading, which is an important step that helps you to boost LCP timing.

The rule of thumb is to exclude the first 4 images on a page from lazy loading. You also need to add the logo filename to the exclusion list manually.