{"id":4407106,"date":"2022-05-25T18:01:19","date_gmt":"2022-05-25T16:01:19","guid":{"rendered":"https:\/\/wp-rocket.me\/?post_type=core_web_vitals_hub&#038;p=4407106"},"modified":"2022-09-20T12:21:23","modified_gmt":"2022-09-20T10:21:23","slug":"avoid-enormous-network-payloads","status":"publish","type":"core_web_vitals_hub","link":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/","title":{"rendered":"How to Avoid Enormous Network Payloads"},"content":{"rendered":"<p>Are you getting the \u201cavoid enormous network payload\u201d warning on your Google Page Speed Insights (PSI) report? Then you need to fix the size of the pages on your WordPress site! Large network payloads are highly correlated with long load times, so anything toward improving the speed of your website will contribute to fixing this issue.&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"207\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI.png\" alt=\"PageSpeed Insights warning - Source: PSI\n\" class=\"wp-image-4407292\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI-310x80.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI-768x199.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>PageSpeed Insights warning &#8211; Source: <a href=\"https:\/\/pagespeed.web.dev\/\">PSI<\/a><br><\/figcaption><\/figure><p>In this article, we explain what an enormous network payload is and what triggers the issue on PSI. We also go over 8 techniques to implement to fix the \u201cavoid enormous network payload\u201d warning easily.&nbsp;<\/p><p>Watch our video first, and then keep reading the article!<\/p><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Avoid Enormous Network Payloads in WordPress\" width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/x7c-M48MphQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure><h2 class=\"wp-block-heading\">What Avoid Enormous Network Payloads Means<\/h2><p>The \u201cavoid enormous network payloads\u201d warning means that your page size is too large than the size recommended by Google. Heavy pages are much slower to render the content because there&#8217;s much more data to download.<\/p><h3 class=\"wp-block-heading\">What Triggers The Warning&nbsp;<\/h3><p>The \u201cavoid enormous network payloads\u201d is triggered when the total page size is above <a href=\"https:\/\/web.dev\/total-byte-weight\/#how-to-reduce-payload-size\">1,600 KiB<\/a>. To pass this PSI audit, you will need to reduce the page size and aim to keep your total byte size below 1.6 MB.&nbsp;<\/p><p>The median network payload around the world is between 1,700 and 1,900 KiB. To help surface the highest payloads, Lighthouse flags any network&#8217;s total network requests that exceed 5,000 KiB.<\/p><h3 class=\"wp-block-heading\">How To Identify The Issue<\/h3><p>Use Lighthouse (PageSpeed Insights or GTMetrix) to identify files causing enormous network payloads. PSI flags which file type (image, CSS, JS) needs your attention and where the file is being served from.&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"518\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Heavy-files-and-total-size-of-the-network-exceeding-5000-KiB-Source-Web.dev_.png\" alt=\"Heavy files and total size of the network exceeding 5000 KiB- Source: Web.dev\n\" class=\"wp-image-4407300\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Heavy-files-and-total-size-of-the-network-exceeding-5000-KiB-Source-Web.dev_.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Heavy-files-and-total-size-of-the-network-exceeding-5000-KiB-Source-Web.dev_-301x195.png 301w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Heavy-files-and-total-size-of-the-network-exceeding-5000-KiB-Source-Web.dev_-768x497.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Heavy files and total size of the network exceeding 5000 KiB- Source: <a href=\"https:\/\/web.dev\/total-byte-weight\/\">Web.dev<\/a><br><\/figcaption><\/figure><h2 class=\"wp-block-heading\">What\u2019s The Impact On Performance?<\/h2><p>An enormous network payload impacts the performance of your WordPress site on four levels:&nbsp;<\/p><ul class=\"wp-block-list\"><li><strong>The loading time<\/strong> &#8211; the higher the network payload, the larger the page is, and the longer it takes to download the resources and render the page.<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"297\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Fully-Load-Time-Browser-Timing-Source-GTMetrix.png\" alt=\"Fully Load Time - Browser Timing - Source: GTMetrix\n\" class=\"wp-image-4407307\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Fully-Load-Time-Browser-Timing-Source-GTMetrix.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Fully-Load-Time-Browser-Timing-Source-GTMetrix-310x115.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Fully-Load-Time-Browser-Timing-Source-GTMetrix-768x285.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Fully Load Time &#8211; Browser Timing &#8211; Source: <a href=\"https:\/\/gtmetrix.com\/reports\/wp-rocket.me\/FUgKjY7W\/\">GTMetrix<\/a><br><\/figcaption><\/figure><ul class=\"wp-block-list\"><li><strong>The <\/strong><a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-largest-contentful-paint\/\"><strong>Largest Contentful Paint<\/strong><\/a><strong> grade<\/strong> &#8211; The Largest Contentful Paint is a Core Web Vitals triggered when the biggest element within the viewport is displayed. An enormous network payload will increase the time it takes to display the largest content to the user, resulting in a poor user experience.<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"781\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Correlation-between-LCP-and-avoid-enormous-network-payloads-warning-Source-PSI.png\" alt=\"Correlation between LCP and \u201cavoid enormous network payloads\u201d warning  - Source: PSI\n\" class=\"wp-image-4407318\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Correlation-between-LCP-and-avoid-enormous-network-payloads-warning-Source-PSI.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Correlation-between-LCP-and-avoid-enormous-network-payloads-warning-Source-PSI-200x195.png 200w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Correlation-between-LCP-and-avoid-enormous-network-payloads-warning-Source-PSI-768x750.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Correlation between LCP and \u201cavoid enormous network payloads\u201d warning&nbsp; &#8211; Source: <a href=\"https:\/\/pagespeed.web.dev\/\">PSI<\/a><br><\/figcaption><\/figure><ul class=\"wp-block-list\"><li><strong>The global <\/strong><a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/\"><strong>Lighthouse performance on PageSpeed Insights<\/strong><\/a><strong> (PSI) score<\/strong> &#8211; Lighthouse flags any types of content that could be optimized. You need to reduce your page size to get a high-performance score and be in the green scoring area of PSI. Any efforts toward this KPI will reduce the network payload and ensure that your PSI grade stays in the green zone ( &gt;90\/100).<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"765\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Correlation-between-the-performance-grade-and-the-avoid-enormous-network-payloads-warning-Source-PSI.png\" alt=\"Correlation between the performance grade and the \u201cavoid enormous network payloads\u201d warning  - Source: PSI\n\" class=\"wp-image-4407328\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Correlation-between-the-performance-grade-and-the-avoid-enormous-network-payloads-warning-Source-PSI.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Correlation-between-the-performance-grade-and-the-avoid-enormous-network-payloads-warning-Source-PSI-204x195.png 204w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Correlation-between-the-performance-grade-and-the-avoid-enormous-network-payloads-warning-Source-PSI-768x734.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Correlation between the performance grade and the \u201cavoid enormous network payloads\u201d warning&nbsp; &#8211; Source: <a href=\"https:\/\/pagespeed.web.dev\/\">PSI<\/a><br><\/figcaption><\/figure><ul class=\"wp-block-list\"><li><strong>The conversions and the user experience on mobile<\/strong>. Heavy network payloads can impact conversions and make visitors consume more mobile data. Large page size is due to heavy page resources (such as unoptimized images), which results in a frustrated user waiting for the page to be rendered. Conversions occur the most on pages with load times between 0 and 2 seconds.&nbsp;<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"533\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Conversion-and-speed-Mobile-Web-UX-Source-Hubspot.png\" alt=\"Conversion and speed - Mobile Web UX - Source: Hubspot\n\" class=\"wp-image-4407339\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Conversion-and-speed-Mobile-Web-UX-Source-Hubspot.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Conversion-and-speed-Mobile-Web-UX-Source-Hubspot-293x195.png 293w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Conversion-and-speed-Mobile-Web-UX-Source-Hubspot-768x512.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Conversion-and-speed-Mobile-Web-UX-Source-Hubspot-90x60.png 90w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Conversion-and-speed-Mobile-Web-UX-Source-Hubspot-135x90.png 135w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Conversion and speed &#8211; Mobile Web UX &#8211; Source: <a href=\"https:\/\/blog.hubspot.com\/marketing\/page-load-time-conversion-rates\">Hubspot<\/a><br><\/figcaption><\/figure><h2 class=\"wp-block-heading\">How to Avoid Enormous Network Payloads on WordPress<\/h2><p>You need to reduce your webpage size to avoid enormous network payloads on WordPress. Enormous network payloads and heavy pages are often caused by unoptimized videos, images, third-party code, or cluttered CSS and JS files.&nbsp;<\/p><p>Here are 8 easy ways to keep payload size down and fix the PSI warning:<\/p><ol class=\"wp-block-list\"><li><a href=\"#browser-caching-gzip\">Implement Browser Caching and GZIP Compression<\/a><\/li><li><a href=\"#remove-unused-js-css\">Remove Unused CSS<\/a><\/li><li><a href=\"#delay-js\">Delay JS Execution and Remove Unused JS<\/a><\/li><li><a href=\"#minify-css-js\">Minify JS and CSS<\/a><\/li><li><a href=\"#lazy-loading\">Lazy Loading<\/a>&nbsp;<\/li><li><a href=\"#optimize-images-webp\">Optimize Images and Convert Them to WebP&nbsp;<\/a><\/li><li><a href=\"#use-fewer-fonts\">Use Fewer fonts and Optimize Fonts<\/a><\/li><li><a href=\"#remove-unecessary-content\">Remove Unnecessary Content, Widgets, and Plugins<\/a><\/li><\/ol><p>For each technique, we are going to mention the best online tools or plugins to use. Let\u2019s go over each fix.<\/p><h3 class=\"wp-block-heading\" id=\"browser-caching-gzip\">1. Implement Browser Caching and GZIP Compression<\/h3><p>Using an efficient browser caching policy will help to reduce the enormous network payloads. There are two headers related to caching: <em>Expires<\/em> and <em>Cache-Control<\/em>. This is how browsers like Chrome decide how long they should keep the resources before refreshing them again.&nbsp;<\/p><p><strong>Manually:&nbsp;<\/strong><\/p><ul class=\"wp-block-list\"><li>You can add the following piece of code if you want to add Cache-Controls headers in Nginx:&nbsp;<\/li><\/ul><pre class=\"wp-block-code\"><code class=\"\">location ~* \\.(js|css|png|jpg|jpeg|gif|svg|ico)$ {\n expires 20d;\n add_header Cache-Control \"public, no-transform\"; }\n\nIf you are using an Apache Server, put this code in the .htaccess file directly:\n&lt;filesMatch \".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$\"&gt;\n        Header set Cache-Control \"max-age=84600, public\"\n&lt;\/filesMatch&gt;\n<\/code><\/pre><p><strong>With online tools:&nbsp;<\/strong><\/p><ul class=\"wp-block-list\"><li>Check with your hosting provider &#8211; as an example WP Engine has their own built-in caching solution.&nbsp;<\/li><\/ul><p><strong>With WordPress plugins:&nbsp;<\/strong><\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a> &#8211; is one of the most powerful caching plugins for WordPress that gives your website a little speed boost. WP Rocket automatically implements browser caching using the popular method \u201cExpires headers\u201d. It also applies GZIP compression.&nbsp;<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"520\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Cache-option-also-for-mobiles-Source-WP-Rocket.png\" alt=\"Cache option also for mobiles - Source: WP Rocket\n\" class=\"wp-image-4407352\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Cache-option-also-for-mobiles-Source-WP-Rocket.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Cache-option-also-for-mobiles-Source-WP-Rocket-300x195.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Cache-option-also-for-mobiles-Source-WP-Rocket-768x499.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Cache option also for mobiles &#8211; Source: <a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a><br><\/figcaption><\/figure><ul class=\"wp-block-list\"><li>Other plugins &#8211; we put together <a href=\"https:\/\/wp-rocket.me\/best-wordpress-caching-plugin\/\">a list of the best cache plugins<\/a> so you can compare them easily.<\/li><\/ul><p><em>Important: no matter which plugin you choose, set up all the dashboard settings to see how each feature impacts PSI scores and load times.<\/em><\/p><h3 class=\"wp-block-heading\" id=\"remove-unused-js-css\">2. Remove Unused CSS<\/h3><p>You should prevent unused CSS from loading on your website.&nbsp;Using a page builder like Elementor or Divi tends to add a lot of \u201cuseless\u201d code, resulting in a heavier page and a higher network payload.&nbsp;<\/p><p><strong>With online tools:<\/strong><\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/purifycss.online\/\">PurifyCSS online<\/a> &#8211; a tool that determines the CSS that can be safely removed. It generates a clean CSS file that you can add to WordPress.<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"362\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Identifying-the-unused-CSS-Source-PurifyCSS.png\" alt=\"Identifying the unused CSS - Source: PurifyCSS\n\" class=\"wp-image-4407360\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Identifying-the-unused-CSS-Source-PurifyCSS.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Identifying-the-unused-CSS-Source-PurifyCSS-310x140.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Identifying-the-unused-CSS-Source-PurifyCSS-768x348.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Identifying the unused CSS &#8211; Source: <a href=\"https:\/\/purifycss.online\/\">PurifyCSS<\/a><br><\/figcaption><\/figure><ul class=\"wp-block-list\"><li><a href=\"https:\/\/unused-css.com\/\">Unused CSS.com <\/a>&#8211; it generates a clean CSS file that you can re-upload to WordPress.<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"414\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Identifying-the-unused-CSS-Source-UnusedCSS.com_.png\" alt=\"Identifying the unused CSS - Source: UnusedCSS.com\" class=\"wp-image-4407366\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Identifying-the-unused-CSS-Source-UnusedCSS.com_.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Identifying-the-unused-CSS-Source-UnusedCSS.com_-310x160.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Identifying-the-unused-CSS-Source-UnusedCSS.com_-768x397.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Identifying the unused CSS &#8211; Source: <a href=\"https:\/\/unused-css.com\/\">UnusedCSS.com<\/a><\/figcaption><\/figure><figure class=\"wp-block-table\"><table><tbody><tr><td>Note: the rest of the process has to be manual. Finding unused code is easy but uploading a new file that only displays the critical CSS can be difficult.&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure><p><strong>With WordPress plugins:<\/strong><\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/remove-unused-css\/#:~:text=Removing%20unused%20CSS%20with%20a,the%20HTML%20of%20the%20page.\">WP Rocket<\/a> &#8211; helps you remove Unused CSS in just one click.&nbsp;<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"353\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Optimizing-CSS-delivery-and-removing-unused-CSS-with-WP-Rocket-Source-WP-Rocket.png\" alt=\"Optimizing CSS delivery and removing unused CSS with WP Rocket - Source: WP Rocket\n\" class=\"wp-image-4407382\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Optimizing-CSS-delivery-and-removing-unused-CSS-with-WP-Rocket-Source-WP-Rocket.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Optimizing-CSS-delivery-and-removing-unused-CSS-with-WP-Rocket-Source-WP-Rocket-310x137.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Optimizing-CSS-delivery-and-removing-unused-CSS-with-WP-Rocket-Source-WP-Rocket-768x339.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Optimizing-CSS-delivery-and-removing-unused-CSS-with-WP-Rocket-Source-WP-Rocket-136x60.png 136w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Optimizing-CSS-delivery-and-removing-unused-CSS-with-WP-Rocket-Source-WP-Rocket-204x90.png 204w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Optimizing CSS delivery and removing unused CSS with WP Rocket &#8211; Source: <a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a><br><\/figcaption><\/figure><ul class=\"wp-block-list\"><li>Both <a href=\"https:\/\/www.gabelivan.com\/items\/wp-asset-cleanup-pro\/?utm_source=assetcleanup-com\">Asset CleanUp Pro <\/a>and <a href=\"https:\/\/perfmatters.io\/\">Perfmatters<\/a> can also trim the unused CSS.<\/li><\/ul><h3 class=\"wp-block-heading\" id=\"delay-js\">3. Delay JS Execution and Remove Unused JS<\/h3><p>You can avoid enormous network payloads by prioritizing the JavaScript that needs to be loaded first. In other words, you&#8217;ll remove unused JS. The JS&nbsp; files should not be loaded until the first user interaction (e.g., scrolling, clicking a button).&nbsp;<\/p><p>Reducing the number of elements on your pages will reduce page size and network payloads.&nbsp;<\/p><p><strong>Manually:<\/strong><\/p><p>To delay a JS function call you can use the setTimeout() function:&nbsp;<\/p><pre class=\"wp-block-code\"><code class=\"\">setTimeout(functionname, milliseconds, arg1, arg2, arg3...)\n<\/code><\/pre><p>If you are not too familiar with JavaScript, then a WordPress plugin may be the easiest path.&nbsp;<\/p><p><strong>With WordPress plugins:&nbsp;<\/strong><\/p><ul class=\"wp-block-list\"><li>If you\u2019re looking for a free plugin to delay JavaScript files, you can use <a href=\"https:\/\/wordpress.org\/plugins\/flying-scripts\/\">Flying Script<\/a> or <a href=\"https:\/\/wordpress.org\/plugins\/wp-meteor\/\">WP Meteor<\/a>.&nbsp;<\/li><li>Another way is to use <a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a>. The plugin allows you to <a href=\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-7\/#section-2\">delay the JavaScript execution in a few clicks<\/a> from the File optimization tab.&nbsp;<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"911\" height=\"272\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/delay-js-execution.png\" alt=\"Delaying JS with WP Rocket - Source: WP Rocket\" class=\"wp-image-4340561\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/delay-js-execution.png 911w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/delay-js-execution-310x93.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/delay-js-execution-768x229.png 768w\" sizes=\"(max-width: 911px) 100vw, 911px\" \/><\/figure><ul class=\"wp-block-list\"><li> <a href=\"https:\/\/www.gabelivan.com\/items\/wp-asset-cleanup-pro\/?utm_source=assetcleanup-com\">Asset CleanUp Pro <\/a>and <a href=\"https:\/\/perfmatters.io\/\">Perfmatters<\/a> can load the JavaScript files only when needed.<\/li><\/ul><h3 class=\"wp-block-heading\" id=\"minify-css-js\">4. Minify JS and CSS<\/h3><p>Minification is the process of removing all unnecessary characters from the CSS or JS source without changing its functionality. It is a well-known code optimization technique that contributes to keeping the network payload size down.&nbsp;<\/p><p><strong>Manually, using development and servers tools:<\/strong><\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/visualstudio.microsoft.com\/\">Visual Studio<\/a>, <a href=\"https:\/\/apps.apple.com\/fr\/app\/xcode\/id497799835?mt=12\">XCode<\/a>, and <a href=\"https:\/\/netbeans.apache.org\/\">Netbeans<\/a> are all integrated development environments) that help minify JS and CSS manually. Most IDEs and code editors have extensions to allow minification, such as the one below for Visual Studio Code:&nbsp;<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"518\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/JS-CSS-Minifier-extension-for-Visual-Studio-\u2013-Source-Visual-Studios-marketplace.png\" alt=\"JS &amp; CSS Minifier extension for Visual Studio \u2013 Source: Visual Studio\u2019s marketplace\" class=\"wp-image-4407409\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/JS-CSS-Minifier-extension-for-Visual-Studio-\u2013-Source-Visual-Studios-marketplace.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/JS-CSS-Minifier-extension-for-Visual-Studio-\u2013-Source-Visual-Studios-marketplace-301x195.png 301w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/JS-CSS-Minifier-extension-for-Visual-Studio-\u2013-Source-Visual-Studios-marketplace-768x497.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/JS-CSS-Minifier-extension-for-Visual-Studio-\u2013-Source-Visual-Studios-marketplace-93x60.png 93w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/JS-CSS-Minifier-extension-for-Visual-Studio-\u2013-Source-Visual-Studios-marketplace-139x90.png 139w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>JS &amp; CSS Minifier extension for Visual Studio \u2013 Source: <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=olback.es6-css-minify#:~:text=A%20Minify%20button%20should%20appear,or%20CTRL%2BSHIFT%2BP%20.\">Visual Studio\u2019s marketplace<\/a><\/figcaption><\/figure><ul class=\"wp-block-list\"><li><a href=\"https:\/\/github.com\/mishoo\/UglifyJS\">UglifyJS<\/a> \u2013 NodeJS has plenty of CLI libraries to minify the code, and UglifyJS is part of them.<\/li><\/ul><p><strong>With online tools: <\/strong><br><strong><br><\/strong><em>Note that most of the online tools have the same process:<br>Step 1.<\/em> Paste in your CSS\/JS source code or upload the source code file<br><em>Step 2.<\/em> Click a button to minify or compress the CSS\/JS code<br><em>Step 3.<\/em> Copy the minified code output or download the minified code file<br><em>Step 4.<\/em> Reupload everything into WordPress.<\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.toptal.com\/developers\/javascript-minifier\/\">Toptal<\/a> (previously known as JS\/CSS Minifier) \u2013 a user-friendly tool with an API that allows you to minify your CSS and JS code:<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"402\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Minifying-JS-\u2013-Source-Toptal-.png\" alt=\"Minifying JS \u2013 Source: Toptal \n\" class=\"wp-image-4407424\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Minifying-JS-\u2013-Source-Toptal-.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Minifying-JS-\u2013-Source-Toptal--310x156.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Minifying-JS-\u2013-Source-Toptal--768x386.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Minifying-JS-\u2013-Source-Toptal--119x60.png 119w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Minifying-JS-\u2013-Source-Toptal--179x90.png 179w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Minifying JS \u2013 Source: <a href=\"https:\/\/www.toptal.com\/developers\/cssminifier\/\">Toptal&nbsp;<\/a><br><\/figcaption><\/figure><ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.cleancss.com\/\">CleanCSS.com<\/a> \u2013 an intuitive online resource to compress and minify both CSS and JS.<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"592\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Minifying-JS-in-one-click\u2013-Source-CleanCSS.com_.png\" alt=\"Minifying JS in one click\u2013 Source: CleanCSS.com\n\" class=\"wp-image-4407433\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Minifying-JS-in-one-click\u2013-Source-CleanCSS.com_.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Minifying-JS-in-one-click\u2013-Source-CleanCSS.com_-264x195.png 264w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Minifying-JS-in-one-click\u2013-Source-CleanCSS.com_-768x568.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Minifying JS in one click\u2013 Source: <a href=\"https:\/\/www.cleancss.com\/javascript-minify\/\">CleanCSS.com<\/a><br><\/figcaption><\/figure><p><strong>With WordPress plugins:&nbsp;<\/strong><\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a> &#8211; one of the best WordPress plugins that minify multiple files of CSS and JS.<\/li><\/ul><figure class=\"wp-block-table\"><table><tbody><tr><td>Minifying CSS with WP Rocket<\/td><td>Minifying JS with WP Rocket<\/td><\/tr><tr><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/RSkduhRl5OXgvZ81z90jEa7W5Hx-OgXO7kPpO5gwsVr_x4TF6vBfsncgYRs3jqGDKiF_nCKDok8ZIVcxJV5LyWsFvsQPkteVH00SxCcfSyVzHgmkIBRtzJTAPLs8Lak5mmUUYg_u5iruhwEIEw\" width=\"286\" height=\"131\"><\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/ZdKJX1MuwQDe3H4HkD91SlccNX1EcpGFGKMvWFjiHquo90yIq8EUrrbQR_U1AY0-TtyCwWiFjdafmNnPnkYRF-5wM4HWdVQhuoSL6egDQuJNlyQ_bXbefaNcDKxFW846rdyZF4ZnZhav1cyL3A\" width=\"286\" height=\"205\"><\/td><\/tr><\/tbody><\/table><\/figure><ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.gabelivan.com\/items\/wp-asset-cleanup-pro\/?utm_source=assetcleanup-com\">Asset Clean-up<\/a> \u2013 minifies CSS and JS files.&nbsp;<\/li><li><a href=\"https:\/\/wordpress.org\/plugins\/autoptimize\/\">Autoptimize<\/a> \u2013 a free plugin that can minify and compress scripts and styles.<\/li><\/ul><h3 class=\"wp-block-heading\" id=\"lazy-loading\">5. Lazy Loading&nbsp;<\/h3><p><strong>With WordPress plugins:<\/strong><\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a> comes with its feature to lazy load images: LazyLoad.&nbsp;<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"435\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Implementing-Lazy-Loading-Source-WP-Rocket.png\" alt=\"Implementing Lazy Loading - Source: WP Rocket\n\" class=\"wp-image-4407443\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Implementing-Lazy-Loading-Source-WP-Rocket.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Implementing-Lazy-Loading-Source-WP-Rocket-310x169.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Implementing-Lazy-Loading-Source-WP-Rocket-768x418.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Implementing-Lazy-Loading-Source-WP-Rocket-110x60.png 110w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Implementing-Lazy-Loading-Source-WP-Rocket-166x90.png 166w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Implementing Lazy Loading &#8211; Source: <a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a><br><\/figcaption><\/figure><ul class=\"wp-block-list\"><li><a href=\"https:\/\/fr.wordpress.org\/plugins\/rocket-lazy-load\/\">LazyLoad by WP Rocket<\/a> &#8211; a free plugin dedicated to lazy loading your images.<\/li><li>Other plugins &#8211;&nbsp; we wrote a dedicated article with all <a href=\"https:\/\/wp-rocket.me\/blog\/best-lazy-load-plugins-wordpress\/\">the best Lazy loading plugins<\/a> for WordPress.<\/li><\/ul><h3 class=\"wp-block-heading\" id=\"optimize-images-webp\">6. Optimize Images and Convert Them to WebP<\/h3><p>Heavy images are often the main culprit to an enormous network payload. By optimizing and serving them in WebP will make the web page much lighter. Image optimization includes resizing according to the screen (responsive images fitting their container), compressing, and converting all the images on the page to the most efficient format.&nbsp;<\/p><p><strong>Online image compression services:&nbsp;<\/strong><\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.photopea.com\/\">Photopea<\/a> &#8211; a free online tool that can open and edit a Photoshop file<\/li><\/ul><p>Regarding the following three online tools, the process is pretty much the same. You\u2019ll upload a heavy file and press a button to compress it. Then you can re-upload it to the WordPress library.<\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/tinypng.com\/\">TinyPNG<\/a> and <a href=\"https:\/\/compressor.io\/\">Compressor.io<\/a> &#8211; WebP, PNG, and JPEG compression in a few clicks<\/li><\/ul><p><strong>WordPress plugins for image optimization and WebP conversion:<\/strong><\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/imagify.io\/\">Imagify<\/a> &#8211; a freemium advanced image optimization plugin that also includes WebP conversion.&nbsp;<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"233\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Compression-and-WebP-conversion-Source-Imagify.png\" alt=\"Compression and WebP conversion - Source: Imagify\n\" class=\"wp-image-4407454\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Compression-and-WebP-conversion-Source-Imagify.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Compression-and-WebP-conversion-Source-Imagify-310x90.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Compression-and-WebP-conversion-Source-Imagify-768x224.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Compression and WebP conversion &#8211; Source: <a href=\"https:\/\/imagify.io\/\">Imagify<\/a><br><\/figcaption><\/figure><ul class=\"wp-block-list\"><li>Other plugins: you can find a useful list of the <a href=\"https:\/\/imagify.io\/blog\/best-webp-plugins\/\">four best WebP plugins for WordPress<\/a> and <a href=\"https:\/\/imagify.io\/blog\/best-image-compression-plugins\/\">the best image compression plugins<\/a> on Imagify\u2019s blog.<\/li><\/ul><h3 class=\"wp-block-heading\" id=\"use-fewer-fonts\">7. Use Fewer Fonts and Optimize Them<\/h3><p>PageSpeed Insights recommends using fewer fonts if you want to avoid an enormous network payload. To optimize your fonts and make them load faster, make sure that you follow the best practices below:<\/p><p><strong>Manually:<\/strong><\/p><ul class=\"wp-block-list\"><li>Don\u2019t use a large panel of font families, weights, icons, and emojis.&nbsp;<\/li><li>Host fonts locally<\/li><li>Use browser resource and other &lt;link&gt; tags (preload, preconnect, prefetch)<\/li><li>Add the <a href=\"https:\/\/docs.wp-rocket.me\/article\/1312-optimize-google-fonts\">font-display: swap<\/a> to the request to <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/ensure-text-remains-visible-webfont-load\/#:~:text=1.-,WP%20Rocket,display%3A%20swap%20attribute%20to%20them.\">ensure text remains visible during Webfont load.<\/a><\/li><\/ul><p><strong>With WordPress plugins:<br><br><\/strong>If you prefer, you can use a WordPress plugin like <a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a> to optimize your fonts and apply all the best practices mentioned above. <em>WP Rocket automatically applied the font-display: swap attribute.&nbsp;<\/em><\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"369\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Preloading-fonts-Source-WP-Rocket.png\" alt=\"Preloading fonts - Source: WP Rocket\n\" class=\"wp-image-4407466\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Preloading-fonts-Source-WP-Rocket.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Preloading-fonts-Source-WP-Rocket-310x143.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Preloading-fonts-Source-WP-Rocket-768x354.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Preloading-fonts-Source-WP-Rocket-130x60.png 130w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Preloading-fonts-Source-WP-Rocket-195x90.png 195w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Preloading fonts &#8211; Source: <a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a><br><\/figcaption><\/figure><p><a href=\"https:\/\/flying-press.com\/\">FlyingPress<\/a> is another plugin to optimize fonts and apply the <em>font-display:swap <\/em>attribute to your site.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"425\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Font-optimization-section-\u2013-Source-FlyingPress.png\" alt=\"Font optimization section \u2013 Source: FlyingPress\n\" class=\"wp-image-4407473\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Font-optimization-section-\u2013-Source-FlyingPress.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Font-optimization-section-\u2013-Source-FlyingPress-310x165.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Font-optimization-section-\u2013-Source-FlyingPress-768x408.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Font optimization section \u2013 Source: <a href=\"https:\/\/flying-press.com\/\">FlyingPress<\/a><br><\/figcaption><\/figure><h3 class=\"wp-block-heading\" id=\"remove-unecessary-content\">8. Remove Unnecessary Content, Widgets, and Plugins<\/h3><p>Removing unnecessary widgets and plugins will help reduce the page&#8217;s size and, therefore, the network payloads. You can reduce the number of sliders, galleries, and social widgets. For example, you can replace embedded content like Tweets or Facebook comments with screenshots.&nbsp;<\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/wordpress.org\/plugins\/query-monitor\/\">Query Monitor<\/a> and <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/wp-hive\/hbbcblcogociooaeodndcimehhchadka\">WP Hive<\/a> are useful plugins for identifying the heavy resources causing a slow WordPress site.&nbsp;<\/li><\/ul><p><\/p><div id=\"om-nyrydv5iync8zrrulm5i-holder\"><\/div>\n\t<script>(function (d, u, ac) {\n\t\t\tvar s = d.createElement('script')\n\t\t\ts.type = 'text\/javascript'\n\t\t\ts.src = 'https:\/\/a.omappapi.com\/app\/js\/api.min.js'\n\t\t\ts.async = true\n\t\t\ts.dataset.user = u\n\t\t\ts.dataset.campaign = ac\n\t\t\td.getElementsByTagName('head')[0].appendChild(s)\n\t\t})(document, 20440, 'nyrydv5iync8zrrulm5i')<\/script><h2 class=\"wp-block-heading\">Avoid Enormous Network Payloads with WP Rocket<\/h2><p>WP Rocket is one of the best performance plugins in the WordPress ecosystem that will fix the \u201cAvoid enormous network payloads\u201d warning. Amongst other speed optimizations, you\u2019ll significantly reduce the web page size and clean up your code \u2014 and without installing multiple tools.<\/p><p>Let\u2019s go over the impact of WP Rocket on a WordPress site. We will look into the performance score and the audits of <a href=\"https:\/\/pagespeed.web.dev\/\">PageSpeed Insights<\/a>, with a focus on the \u201cAvoid enormous network payloads\u201d warning.&nbsp;<\/p><h3 class=\"wp-block-heading\">Scenario #1: my web page performance without WP Rocket&nbsp;<\/h3><p>Without WP Rocket, my performance grade on mobile is 68\/100, and my LCP (Core Web Vital) metric is in the red with a score of 6.2 s.&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"508\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/My-performance-grade-global-and-LCP-without-WP-Rocket-Source-PSI.png\" alt=\"My performance grade (global and LCP) without WP Rocket - Source: PSI\n\" class=\"wp-image-4407485\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/My-performance-grade-global-and-LCP-without-WP-Rocket-Source-PSI.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/My-performance-grade-global-and-LCP-without-WP-Rocket-Source-PSI-307x195.png 307w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/My-performance-grade-global-and-LCP-without-WP-Rocket-Source-PSI-768x488.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>My performance grade (global and LCP) without WP Rocket &#8211; Source: <a href=\"https:\/\/pagespeed.web.dev\/report?url=https%3A%2F%2Flepointgourmand.com%2F&amp;hl=en\">PSI<\/a><br><\/figcaption><\/figure><p>On top of that, I can see that the \u201cAvoid enormous network payloads\u201d warning is triggered with a total size of 14,210K:<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"207\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI-1.png\" alt=\"Heavy files causing a high network payload - Source: PSI\n\" class=\"wp-image-4407499\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI-1.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI-1-310x80.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI-1-768x199.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Heavy files causing a high network payload &#8211; Source: <a href=\"https:\/\/pagespeed.web.dev\/report?url=https%3A%2F%2Flepointgourmand.com%2F&amp;hl=en\">PSI<\/a><br><\/figcaption><\/figure><p>Finally, PSI also flags other performance issues related to CSS, JS, caching, fonts optimization and lazy loading. Those are the metrics we presented in the previous section to fix the warning of the enormous network payloads.&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"451\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Flagged-performance-issues-without-WP-Rocket-Source-PSI.png\" alt=\"Flagged performance issues without WP Rocket - Source: PSI\n\" class=\"wp-image-4407507\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Flagged-performance-issues-without-WP-Rocket-Source-PSI.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Flagged-performance-issues-without-WP-Rocket-Source-PSI-310x175.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Flagged-performance-issues-without-WP-Rocket-Source-PSI-768x433.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Flagged performance issues without WP Rocket &#8211; Source: <a href=\"https:\/\/pagespeed.web.dev\/report?url=https%3A%2F%2Flepointgourmand.com%2F&amp;hl=en\">PSI<\/a><br><\/figcaption><\/figure><h3 class=\"wp-block-heading\">Scenario #2: my web page performance optimized with WP Rocket \ud83d\ude80&nbsp;&nbsp;<\/h3><p>Once we activated WP Rocket and enabled a few performance options, we got a 96\/100 score. Plus, the Largest Contentful Paint is 1.9 s \u2013 it\u2019s now green.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"490\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Previous-issues-moved-to-the-passed-audits-section-with-WP-Rocket-Source-PSI.png\" alt=\"\" class=\"wp-image-4407516\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Previous-issues-moved-to-the-passed-audits-section-with-WP-Rocket-Source-PSI.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Previous-issues-moved-to-the-passed-audits-section-with-WP-Rocket-Source-PSI-310x190.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Previous-issues-moved-to-the-passed-audits-section-with-WP-Rocket-Source-PSI-768x470.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Performance and Core Web Vitals in the green with WP Rocket &#8211; Source: <a href=\"https:\/\/pagespeed.web.dev\/report?url=https%3A%2F%2Flepointgourmand.com%2F&amp;hl=en\">PSI<\/a><br><\/figcaption><\/figure><p>Most of my previous performance issues moved to the passed audit section, including the \u201cavoid enormous network payloads\u201d warning:<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"499\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Previous-issues-moved-to-the-passed-audits-section-with-WP-Rocket.png\" alt=\"Previous issues moved to the passed audits section with WP Rocket - Source: PSI\n\" class=\"wp-image-4407524\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Previous-issues-moved-to-the-passed-audits-section-with-WP-Rocket.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Previous-issues-moved-to-the-passed-audits-section-with-WP-Rocket-310x193.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/Previous-issues-moved-to-the-passed-audits-section-with-WP-Rocket-768x479.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Previous issues moved to the passed audits section with WP Rocket &#8211; Source: <a href=\"https:\/\/pagespeed.web.dev\/report?url=https%3A%2F%2Flepointgourmand.com%2F&amp;hl=en\">PSI<\/a><\/figcaption><\/figure><p><strong>Want to follow my performance optimization path and avoid the enormous network payloads?&nbsp;<\/strong><\/p><p>Here are the WP Rocket features I used to get a 96\/100 score on mobile:<br><\/p><ul class=\"wp-block-list\"><li>Upon activation, WP Rocket cached my content and applied GZIP automatically.<\/li><li>I activated the cache option for mobile devices.<\/li><li>I deferred the JS code and delayed its execution.<\/li><li>I optimized our CSS delivery by minifying\/combining our CSS files and removing unused CSS.<\/li><li>I applied the lazy load scripts on my images, passing PSI&#8217;s audit.&nbsp;<\/li><li>I preloaded my fonts, and WP Rocket applied automatically <em>font-display: swap <\/em>attribute, so my font could remain visible during the loading time of my page (and avoid FOIT).&nbsp;<\/li><\/ul><h2 class=\"wp-block-heading\">Wrapping Up<\/h2><p>\ud83d\ude80&nbsp;Thanks to WP Rocket, we improved our <a href=\"https:\/\/wp-rocket.me\/blog\/improve-lighthouse-performance-score-wordpress\/\">Lighthouse performance score<\/a> and got a 96\/100 score on mobile. Our Core Web Vitals (including LCP) are in the green zone. It goes without saying that we also we fixed the \u201cAvoid Enormous Network Payloads\u201d warning.&nbsp;<\/p><figure class=\"wp-block-table\"><table><tbody><tr><td>Without WP Rocket (performance)<\/td><td>\ud83d\ude80&nbsp; With WP Rocket (performance)<\/td><\/tr><tr><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/YTc2_4LDLNIqvJN7zl_h4s-vtBROsWNcx0cHpz_a66AxKIkeI8r7ETFPPRJEgO5--ih26i84nrQIrpzG3k7V9JlkQkQvfS-eYlbuodxfDFaT8YvWIbThpwlwnstDl3HE0C8f6b_2VKy4kuhKaA\" width=\"286\" height=\"181\"><\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/btvWZB6JZXdRt4INweAayIEwAdScq1xDeBcDf5qyQnirhczrRo-tJapB3xZwru_hJ648eCJ29ILszgmrzkf1zS5M7IuR8riUinkRhmh-Ae0muq7OyhHqA5wta8fIE9hZw-yuK9Vyu-KHdr1n2A\" width=\"286\" height=\"175\"><\/td><\/tr><tr><td>Without WP Rocket (warnings section)<\/td><td>\ud83d\ude80&nbsp; With WP Rocket (passed audit section)<\/td><\/tr><tr><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/8GSHLSwYVEnY-IjWhRnMilrf-DNETxAVK4d7_GIH4v_3xJ66yJ3wakB4fM_h6G-8xiA2ldy2HI2VTXsWNLj0d2-FYKlPktcbrxMArnQUuy1reO2Ub-XHh6Jol8tj60Vbnb6qDMWCD3W6YS7O0Q\" width=\"286\" height=\"56\"><\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/jJEBqODCUttNfhhTJzQe5RJjSmSV6ddiJeH4XjIe6zqFAsmpQBQMv7pjbXWYjV-Q5KvIoqy1Ard4GBAYxEul45Vfk1A5JSKKZQ_vO1BRXbqa0RAE5mnM2ZJpvLkKyacQoYYqKJPZIucXEE5s-w\" width=\"286\" height=\"53\"><\/td><\/tr><\/tbody><\/table><\/figure><p>Give <a href=\"https:\/\/wp-rocket.me\/features\/\">WP Rocket<\/a> a try if you are looking to improve your site performance with one single tool. You have nothing to worry about: we\u2019ve got you covered with our 14-day money-back guarantee if you are not satisfied.&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>Are you getting the \u201cavoid enormous network payload\u201d warning on Google Page Speed Insights? Read our article and learn how to fix the issue manually, with online tools, or a plugin.<\/p>\n","protected":false},"template":"","core_web_vitals":[132],"class_list":["post-4407106","core_web_vitals_hub","type-core_web_vitals_hub","status-publish","hentry","core_web_vitals-improve-largest-contentful-paint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Avoid Enormous Network Payloads<\/title>\n<meta name=\"description\" content=\"Are you getting the \u201cavoid enormous network payload\u201d warning on your Google Page Speed Insights report? Read our article and learn how to fix the issue.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Avoid Enormous Network Payloads\" \/>\n<meta property=\"og:description\" content=\"Are you getting the \u201cavoid enormous network payload\u201d warning on your Google Page Speed Insights report? Read our article and learn how to fix the issue.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Rocket\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-20T10:21:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wp_rocket\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/\",\"url\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/\",\"name\":\"How to Avoid Enormous Network Payloads\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI.png\",\"datePublished\":\"2022-05-25T16:01:19+00:00\",\"dateModified\":\"2022-09-20T10:21:23+00:00\",\"description\":\"Are you getting the \u201cavoid enormous network payload\u201d warning on your Google Page Speed Insights report? Read our article and learn how to fix the issue.\",\"breadcrumb\":{\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/#primaryimage\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI.png\",\"width\":800,\"height\":207},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wp-rocket.me\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Core Web Vitals\",\"item\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Largest Contentful Paint\",\"item\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-largest-contentful-paint\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to Avoid Enormous Network Payloads\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wp-rocket.me\/#website\",\"url\":\"https:\/\/wp-rocket.me\/\",\"name\":\"WP Rocket\",\"description\":\"Plugin d&#039;optimisation de sites WordPress\",\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wp-rocket.me\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wp-rocket.me\/#organization\",\"name\":\"WP Rocket\",\"url\":\"https:\/\/wp-rocket.me\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"width\":150,\"height\":41,\"caption\":\"WP Rocket\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\",\"https:\/\/x.com\/wp_rocket\",\"https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Avoid Enormous Network Payloads","description":"Are you getting the \u201cavoid enormous network payload\u201d warning on your Google Page Speed Insights report? Read our article and learn how to fix the issue.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/","og_locale":"en_US","og_type":"article","og_title":"How to Avoid Enormous Network Payloads","og_description":"Are you getting the \u201cavoid enormous network payload\u201d warning on your Google Page Speed Insights report? Read our article and learn how to fix the issue.","og_url":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/","og_site_name":"WP Rocket","article_publisher":"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","article_modified_time":"2022-09-20T10:21:23+00:00","og_image":[{"url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI.png"}],"twitter_card":"summary_large_image","twitter_site":"@wp_rocket","twitter_misc":{"Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/","url":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/","name":"How to Avoid Enormous Network Payloads","isPartOf":{"@id":"https:\/\/wp-rocket.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/#primaryimage"},"image":{"@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI.png","datePublished":"2022-05-25T16:01:19+00:00","dateModified":"2022-09-20T10:21:23+00:00","description":"Are you getting the \u201cavoid enormous network payload\u201d warning on your Google Page Speed Insights report? Read our article and learn how to fix the issue.","breadcrumb":{"@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/#primaryimage","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2022\/05\/PageSpeed-Insights-warning-Source-PSI.png","width":800,"height":207},{"@type":"BreadcrumbList","@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wp-rocket.me"},{"@type":"ListItem","position":2,"name":"Core Web Vitals","item":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/"},{"@type":"ListItem","position":3,"name":"Largest Contentful Paint","item":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-largest-contentful-paint\/"},{"@type":"ListItem","position":4,"name":"How to Avoid Enormous Network Payloads"}]},{"@type":"WebSite","@id":"https:\/\/wp-rocket.me\/#website","url":"https:\/\/wp-rocket.me\/","name":"WP Rocket","description":"Plugin d&#039;optimisation de sites WordPress","publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wp-rocket.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wp-rocket.me\/#organization","name":"WP Rocket","url":"https:\/\/wp-rocket.me\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","width":150,"height":41,"caption":"WP Rocket"},"image":{"@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","https:\/\/x.com\/wp_rocket","https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q"]}]}},"_links":{"self":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/core_web_vitals_hub\/4407106"}],"collection":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/core_web_vitals_hub"}],"about":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/types\/core_web_vitals_hub"}],"wp:attachment":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/media?parent=4407106"}],"wp:term":[{"taxonomy":"core_web_vitals","embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/core_web_vitals?post=4407106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}