21 Ways To Avoid Enormous Network Payloads In WordPress (Which Means Reducing Size Of CSS, JS, Fonts, Images)

Enormous network payloads is a fancy way of telling you to reduce page size.

Which usually means reducing the 4 largest parts of a page: CSS, JavaScript (including third-party JavaScript), fonts, and images. To pass, your total page size should be under 1,600 KiB.

PSI tells you which files to work on:

Avoid enormous network payloads wordpress 4

Using a lightweight setup is arguably the best way to reduce page size… we’re going back to basics and talking about themes, page builders, and plugins which often add the most CSS/JS. There are several other ways to reduce CSS/JS which I’ll talk about in the article, such as using asset unloading plugins, hosting third-party JavaScript locally, and page builder optimizations.

Whether you need to reduce CSS/JavaScript or fonts/images, this tutorial walks you through everything. Look at which files you should optimize and use the table of contents as a reference.

 

1. Minify Files

Cache plugins minify CSS/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, JS, and HTML.

Minify css

 

2. Unload CSS/JS

The script manager in Perfmatters disables plugins on pages/posts where they’re not being used. You can use Asset CleanUp, but Perfmatters has several other optimizations that can help reduce file sizes while avoiding enormous network payloads (as well as bloat removal settings).

Enable the script manager, then view a few pages (i.e. homepage, inner page, blog post). Click the script manager in your top menu, then you will see all scripts & styles loading on that page.

Perfmatters script manager tab

Maybe your social sharing plugin is loading on pages, but it’s only being used on posts. You can disable it “everywhere but posts.” Or maybe you have page builder plugins that are only used on certain pages. Or try disabling your contact form plugins everywhere but your contact page.

Disable social sharing plugins perfmatters

By unloading script/styles where they’re not used, you can reduce the size of CSS/JS files throughout your site. WooCommerce plugins are infamous for loading across the entire site.

 

3. Avoid Plugins That Add CSS/JS

See any plugins in your avoid enormous network payloads report? Or maybe you used the coverage report in Chrome Dev Tools to find your largest CSS/JS files and noticed a few plugins.

Css javascript chrome dev tools

We can see /plugin/ in the file names and how Elementor (along with other Elementor related plugins) are slowing down the site significantly. We all see Gutenberg’s CSS and other plugins.

That’s why before getting too deep into any plugin, you should check it in WP Hive and monitor your coverage report once you’re done adding content with the plugin. For example, Elementor may not slow down your site once it’s installed, but after you create a page with it and test that page, the extra CSS/JS is now there and can be tested. That’s why WP Hive isn’t always accurate.

You can also use Perfmatters to display dependencies:

Perfmatters display dependencies jquery

Once this setting is activated, view your script manager and scroll down to jQuery, and you’ll see all plugins that depend on jQuery which is commonly known for slowing down websites.

Jquery plugin dependencies 1

 

4. Remove Unused CSS (Not In WP Rocket)

The “remove unused CSS” setting in WP Rocket is the least preferred over Perfmatters, FlyingPress, and LiteSpeed Cache.

While the last 3 plugins load used CSS in a separate file, WP Rocket loads it inline which is better for scores, but slower for users. This is because with inline, the CSS can’t be cached and increases the HTML size. This is explained by Perfmatters, Vikas, and several other experts – yet WP Rocket insists inline is better. WP Rocket seems more interested in scores than actual users.

Wp rocket used css

 

5. Disable Gutenberg’s CSS When Not Using It

If you’re not using Gutenberg, you can disable its CSS by adding the code to your functions.php file. Otherwise, you will see the block-library loaded as an extra CSS file in your coverage report.

<?php
// Fully Disable Gutenberg editor.
add_filter('use_block_editor_for_post_type', '__return_false', 10);
// Don't load Gutenberg-related stylesheets.
add_action( 'wp_enqueue_scripts', 'remove_block_css', 100 );
function remove_block_css() {
wp_dequeue_style( 'wp-block-library' ); // Wordpress core
wp_dequeue_style( 'wp-block-library-theme' ); // Wordpress core
wp_dequeue_style( 'wc-block-style' ); // WooCommerce
wp_dequeue_style( 'storefront-gutenberg-blocks' ); // Storefront theme
}

 

6. Avoid Bloated Page Builders, Or Optimize Them

If you must use Elementor, Divi, Avada, or another pages builder, take the time to optimize it:

  • Activate Elementor Experiments or Divi/Avada’s performance settings.
  • Code your header/footer/sidebar in CSS (don’t use your page builder for this).
  • Avoid using too many extra page builder plugins and if you do, test their CSS/JS.
  • Lazy load background images, since page builders handle these differently (see here).
  • Use a lightweight option (I use GeneratePress + GenerateBlocks but Kadence is good too).

Fastest wordpress themes

 

7. Host Fonts, Analytics, Thumbnails Locally

These are all types of third-party code that can be hosted locally instead of creating external requests which will create errors under “reduce impact of third-party code” in your PSI report.

Third party google fonts

  • Google Fonts (fonts.gstatic.com) – several plugins do this such as FlyingPress, Perfmatters, OMGF, and Elementor has an option to host fonts locally and preload them.
  • Google Analytics (google-analytics.com) – both Perfmatters and Flying Analytics can host it locally and optimize for a smaller file size (i.e. analytics-minimal.js, then delay it).
  • YouTube Thumbnails (i.ytimg.com) – FlyingPress is the only plugin I know that does this. Instead of pulling the image thumbnail from YouTube, it will self-host it by downloading it.

 

8. Delay Third-Party JavaScript Below The Viewport

When third-party code can’t be hosted locally, it’s best to move it down the page (below the viewport) and delay it.

Social sharing plugins and advertisements are two common examples of things you ideally should load below the viewport. Once these are pushed down, you can use plugins like FlyingPress, Perfmatters, LiteSpeed Cache, WP Rocket, or Flying Scripts (free) to delay them.

Each plugin works a little differently. WP Rocket delays JavaScript automatically, LiteSpeed Cache has a setting to localize resources, while other plugins require you to manually add JS files you want delayed (in which case, I recommend using my list of common JS files to delay).

Wp rocket delay javascript execution

 

9. Use Local Avatars For Comments

If you have lots of blog comments, try a local avatar plugin or delaying Gravatars and third-party comment plugins. FlyingPress and LiteSpeed Cache also have a setting to lazy render HTML elements which is commonly done with #comments and #footer (but read the documentation).

Lazy render html elements flyingpress

 

10. Avoid Overtracking

My final tip to reducing third-party JavaScript is to avoid overtracking. In other words, do you really need Google Analytics, Tag Manager, Heatmaps, and all those third-party tracking tools?

Call me crazy, but I only use Search Console.

Reduce impact of third party code wordpress 5

 

11. Compress At 85%

Lighthouse tests images at 85%, so that’s the compression level I recommend. Otherwise, you might get an error to efficiently encode images which basically means: reduce your image sizes.

I prefer letting CDNs handle image optimization, specifically Cloudflare Polish or Bunny Optimizer (I use Polish which comes with Cloudflare Enterprise on Rocket.net). Otherwise, you can use a graphic design software or an image optimization plugin like ShortPixel and Optimole.

 

12. Properly Size Images

Large images can cause enormous network payloads if they’re not properly sized.

Properly size images wordpress

I wrote down the dimensions for my logo, sidebar image, and fullwidth blog images. This way, I know the dimensions each image should be resized to before uploading them. Some image optimization plugins have resizing options, but it’s best to upload them with exact dimensions.

If you see the “properly size images” recommendation on mobile, it means you need to resize images for mobile devices. This can be done in Cloudflare or by using an adaptive image plugin.

 

13. Serve Images In WebP

WebP images are usually 25-34% smaller than JPEGs + PNGs and are higher quality.

Again, I use Cloudflare. Most CDNs and image optimization plugins also do this, like WebP Converter For Media. When selecting the WebP conversion method, <picture> tag is preferred.

You can also use SVGs for high quality images (logo, background images, etc). SVGs don’t get flagged in Lighthouse and are higher quality images, but you may need an SVG support plugin.

 

14. Preload Viewport Images

Preloading critical images in FlyingPress/Perfmatters can set the number of images usually shown in the viewport (generally 2-3), then those images will be automatically excluded from lazy load and preloaded. WP Rocket requires you to follow an 8-step process just to exclude a set number of images from lazy load, and they also have no option to preload images for LCP.

Preload critical images perfmatters

 

15. Lazy Load Background Images

If you’re using a page builder, background images are loaded from CSS which means they won’t be lazy loaded by default (background images located in the viewport also won’t be preloaded).

You have a few options: CSS background images in Perfmatters, or some cache/image optimization plugins have helper classes to include/exclude them from lazy load (usually lazy-bg or skip-lazy). If neither applies to you, there are other ways to lazy load background images.

Perfmatters lazy load css background images

 

16. Use WOFF2

.woff2 is faster than .tff and other font formats.

You can use tools like Transfonter and CloudConvert to convert fonts to .woff2.

Woff2 size

 

17. Preload Viewport Fonts

Fonts loading in the viewport or those located in CSS should be preloaded, but test the impact of each preload hint (in a Waterfall chart) because preloading too many resources can have a negative impact on load time. Elementor can also preload fonts in their performance settings.

Preload fonts 2

 

18. Disable Unused Font Icons

Elementor eicons and other themes/page builders add font icons which add requests. These can be disabled if you’re not using them. For example, Elementor has instructions to disable Google Fonts, Font Awesome, and Eicons. Check documentation for your theme/page builder.

Elementor eicons

 

19. Use Brotli

Brotli compresses pages to smaller file sizes than GZIP.

Check your hosting/CDN on whether they support the faster Brotli compression and if there’s anything you need to do to enable it. For example, it can often be found in the PHP Extensions menu of cPanel. Rocket.net supports Brotli as well while many mainstream hosts only do GZIP.

Brotli cpanel

 

20. Reduce Elements Shown On The Page

Reducing elements shown on your pages will reduce their size.

Believe it or not, I didn’t pass core web vitals because I was letting all comments load on my posts (where some of my posts have 500+ comments). By breaking up comments and adding a button for “older comments” and “newer comments,” I was finally able to pass core web vitals. Another example is showing smaller excerpts if you have things like a blogroll on the homepage.

Older newer comments break

 

21. Use Multiple Caching Layers

Caching leads to fewer bytes since the browser doesn’t have to repeatedly download resources from the server.

Browser cache is usually done by cache plugins, but many people still aren’t using a CDN with full page caching. Look into Cloudflare’s APO, QUIC.cloud’s CDN for LiteSpeed (which includes HTML caching), or Super Page Cache for Cloudflare. Rocket.net is also the only host I know that offers Cloudflare Enterprise + full page caching – although I know Cloudways plans on adding it.

Keycdn global ttfb
Full page caching also improves global TTFB which you can measure in KeyCDN

 

Frequently Asked Questions

How do I avoid enormous network payloads in WordPress?

Since enormous network payloads are caused by large page sizes, focus on reducing the size of CSS, JS, fonts, and images. Using a lightweight setup with a good cache plugin and image optimization solution can help WordPress websites pass this PSI recommendation.

How do I avoid enormous network payloads using WP Rocket?

WP Rocket can help avoid enormous network payloads by minifying files, delaying JavaScript, and removing unused CSS. However, WP Rocket and RocketCDN lack optimizations for images and hosting fonts locally, leading to worse scores for this item.

Drop a comment if you need help :)

Cheers,
Tom

You Might Also Like:

Leave a Comment