How to Avoid Enormous Network Payloads in WordPress (8 Expert Tips)

When we first started creating WordPress websites, we already knew a few tips for making them fast and reliable. But once we started to experiment more with optimizing WordPress performance, we realized we could make our sites almost twice as fast!

One of the most important things we learned is that website speed drops when a lot of data needs to be downloaded to view that page.

In technical terms, this is called the ‘network payload’. It’s simply the total amount of data required to load a page. The total download size includes text, images, videos, CSS, JavaScript, fonts, and other code.

Basically, the less data that needs to be downloaded, the faster the page loads.

So, if you’re looking to improve your website’s speed, you’ve come to the right place!

In this guide, we will show you exactly how to reduce the size of those files and avoid enormous network payloads in WordPress.

Why Are Enormous Network Payloads in WordPress a Problem?

Have you ever used a tool like Google Lighthouse or PageSpeed Insights to check how fast your website is?

Sometimes, you might see a message that says, ‘Avoid enormous network payloads.’

Essentially, this means that your web page is too big, like a suitcase that’s too heavy to carry. A big web page takes longer to load, which can be frustrating for people visiting your site.

The network payload of a web page is the total size of all the pieces that make up that page. This includes:

Text: The words you read on the page

Images & Media: Pictures and videos you see

Code: The CSS and JavaScript files that make the page look good and work correctly

Fonts: The special styles for your text

Plus, any other custom elements

So, the bigger all these elements are combined, the longer it takes for your web page to appear on the screen.

How big is too big? Here’s a simple guide:

Good: If all the parts of your web page add up to less than 2 MB, it’s like carrying a light bag. It’s well-optimized and loads quickly. You don’t need to worry too much here.

Needs improvement: If your web page is between 2 MB and 4 MB, it’s like carrying a backpack that’s getting a little heavy. There might be some things you can make lighter. Google will give you some tips on how to make it faster.

Enormous: If your web page is more than 4 or 5 MB, it’s like trying to carry a huge, overflowing suitcase. This will make your website slow for your visitors, so you need to make optimization a priority.

If you see the ‘Avoid enormous network payloads’ message, then you can click the little arrow to see a list of all the resources that make up your web page.

See how the biggest files are at the top of the list? If you focus on making those files smaller or removing unnecessary files, then you’ll see the biggest improvement in WordPress performance.

By making these files smaller, you’ll use less data to view the web page, and it will load faster.

Now that you know why big web pages are a problem, let’s explore how you can avoid them in WordPress. Here are the 8 tips we’ll cover in this article:

Are you ready? Let’s dive right in!

1. Make Your Images Smaller

One of the biggest causes of large network payloads is big images.

Today’s smartphones and cameras take high-quality images with very large file sizes. But you don’t need to keep them that big when you’re showing them on a website.

Luckily, you can optimize images to make them up to 80% smaller without losing image quality. This has a bigger impact on your website’s network payload than just about anything else.

At WPBeginner, we optimize all of our images before we upload them. We resize our images to the correct dimensions and then reduce their file size using various tools.

We’ve put together a helpful guide based on exactly how we do this on our own website. You can follow this guide to easily reduce your network payload:

2. Embed Videos the Right Way

If you have videos on your website, then you need to be careful about how you display them.

Uploading videos directly to your website can cause large network payloads and significantly slow your website down, especially if they start playing automatically.

The best way to include videos is to embed them from video platforms like YouTube or Vimeo.

This approach still allows you to play the videos on your website, but because they are actually stored on someone else’s server, they are not part of your network payload.

This really helps because your server doesn’t have to deal with the heavy data transfer. Plus, these platforms are designed to deliver videos efficiently, with optimized streaming that adapts to your visitor’s internet connection.

Plus, many video players from these platforms will only start to load the video when the user clicks play, which means less data is transferred initially.

You can easily add the videos to your website using embed code.

For more on this topic, see our guide on why you should never upload a video to WordPress.

3. Use Lazy Loading on Images and Videos

Lazy loading is another great way to avoid large network payloads, especially if your website is full of images or videos.

Normally, when a web page loads, WordPress wants to immediately download all the images and videos, even if they aren’t going to be seen right away.

Imagine if a restaurant brought out all your courses at once instead of one at a time. It would be overwhelming!

This is what happens on a webpage if lazy loading isn’t implemented. Everything needs to be downloaded up front, even if the user can’t see it yet.

This is obviously not ideal, as it means that your website has a large payload, and you download lots of data even if the user doesn’t view the content at the bottom of the page.

The fix for this is called lazy loading.

Lazy loading is like that restaurant bringing out each course of your meal as you are ready for it.

With lazy loading, images and videos are not loaded until they are about to scroll into the user’s view on the screen. This way, the browser only needs to load what is needed when it is needed.

This reduces the initial network payload and the amount of data that has to be downloaded.

Here are some helpful tutorials that show you how to set up lazy loading in WordPress:

4. Reduce the Size and Number of Javascript and CSS Files

One of the best ways to avoid big network payloads on your website is to reduce the size of your CSS and JavaScript files.

Your website uses CSS files for styling and JavaScript files for interactive features.

However, these files often have extra spacing and comments inside them that are not needed for the functionality of the code. You can safely remove these elements to shrink the size of the files.

This means that these files will still work the same way, but there will be less data for your users to download, making your page load faster.

This process is known as minification, and the good news is that you can use a WordPress plugin like WP Rocket to automatically minify your files.

See our guide on how to minify CSS and JavaScript files in WordPress for more information.

Now, different parts of your website will usually have different CSS or JavaScript files. For example, one file for the header, another for the body, and maybe even more for plugins.

But many smaller files can be less efficient than one larger file. When there are many files to load, the browser has to fetch each of them separately, which adds to the total download size. Instead, you can combine many of these smaller files into one single file.

Popular plugins such as WP Rocket (premium) and Autoptimize (free) can automatically combine and minify CSS and JavaScript files.

You can learn how to use these plugins in our guide on how to fix render-blocking JavaScript and CSS in WordPress.

5. Shrink Files With Gzip

Another way to make your website files smaller is to compress them. Text-based files like HTML, CSS, and JavaScript can be significantly reduced using Gzip compression.

In fact, Gzip compression can often reduce the size of these files by up to 70% before they are sent to the user’s browser! This is a huge saving on the amount of data that needs to be transferred.

It reduces file download time and makes your WordPress website load much faster. Once the compressed data arrives on your visitor’s computer, the browser automatically unpacks (decompresses) the files and shows them on the user’s screen.

You don’t have to worry about whether your users’ browsers support Gzip compression because it works in all the popular web browsers today.

Many excellent caching plugins also support Gzip compression. Popular options include WP Rocket, WP Super Cache, and W3 Total Cache.

We previously used WP Rocket on the WPBeginner website, and we had a great experience. For more information, see our full WP Rocket review.

With WP Rocket, Gzip compression will automatically be turned on if your web host uses the Apache server. For other caching plugins, you might need to enable it in the plugin’s settings.

For detailed instructions, see our guide on how to enable Gzip compression in WordPress.

6. Use Browser Caching to Prevent Repeated Downloads

Another way to avoid an enormous network payload in WordPress, especially if your site has a lot of repeat visitors, is to try browser caching.

Imagine if your visitors had to download everything on your website every time they visited! That would be incredibly slow, and that’s exactly what happens if you don’t use proper caching.

When someone visits your website for the first time, their browser downloads everything it needs: the images, the CSS, the JavaScript, and all the other resources. With browser caching, their browser saves a copy of these files on their computer.

Then, the next time someone visits your website, their browser is smart! It checks its locally saved files before asking your server for everything again.

If the browser has a copy of a file in its cache, then it just uses that instead of downloading it again. This makes a big difference in reducing the overall network payload and gives regular visitors a faster, smoother experience.

Of course, if your website content changes frequently, like a news website or a blog that’s updated regularly, then you’ll need to tell browsers when to re-download the latest versions of your files. This will make sure everyone gets the most up-to-date content.

You can control this by adding Expires headers in WordPress. These headers tell the browser when a saved file should be considered old and needs to be updated.

7. Use Fewer Fonts or System Fonts

Fonts can make your website look great and improve how easy it is to read. Using custom fonts can make your website unique and encourage your visitors to spend more time browsing.

But imagine if you had to download lots of different fonts each time you visited a website. It would take a while to show everything on the page.

The key is to use a small number of fonts on your website. We recommend sticking to just two main fonts and using them across your entire site. This reduces the total number of files your visitors need to download.

Even better, you can use system fonts instead of custom fonts.

System fonts are fonts that are already installed on people’s computers. Think of it like using the standard fonts on your computer, such as Arial or Times New Roman.

If you choose system fonts for your website, then your users don’t need to download any extra files at all! This significantly reduces the size of your network payload and makes your website faster for visitors.

When we redesigned the WPBeginner site back in 2021, we started using system fonts. This might seem like a small thing, but it made a real difference! Our website loaded faster for all users, but especially for those with slower internet connections.

For more information, see our guide on how to disable Google fonts on your WordPress website.

8. Avoid Slow Plugins

Finally, let’s talk about plugins. Sometimes, plugins can make your website slower and increase the size of your network payload by loading lots of extra JavaScript and CSS files.

You should think of plugins as extra tools you add to your website. Some are great and lightweight, while others can be quite heavy. Using too many heavy plugins can increase your website’s download size.

It’s hard to know which plugins are slow at a glance, so you’ll have to do some research. Here’s a helpful guide to identify slow plugins:

Once you’ve found the plugins that increase your page’s download size, you have some options.

First, you can contact the plugin developer and see if there’s anything you can do to make the plugin more efficient. Or you might also look for a faster plugin that does the same thing.

For recommendations, see our guide on how to choose the best WordPress plugins.

Sometimes, you’ll find that some of the heavy plugins are essential for your website. In that case, you can still make your website faster by only loading that plugin on the pages that need it instead of loading it everywhere.

You can use a free plugin called Plugin Organizer to disable plugins on pages where they’re not needed. This will decrease the network payload on those pages.

Bonus: Expert Guides Related to WordPress Performance

We hope this tutorial helped you learn how to avoid enormous network payloads in WordPress. You may also want to see some guides on other ways to improve WordPress performance:

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.