How to Avoid Enormous Network Payloads in Magento 2

Google wants to see pages under 1.6mb but in an ideal world we want pages under 1mb and if scoring 100 on Google’s Mobile Page Speed test is your goal, your pages will need to be around 0.5mb in size.

When a user opens the webpage, the entire page’s content is downloaded, if the site web page contains more images or content then it will take time to load.
Use lazy loading for images, videos. Instead of loading all images at one time, images can be loaded on page scrolling by the users. It can be applied to all types of pages such as home page, category pages, product listing pages, product pages, etc.

You can use two types of compression. One is lossless compression, which we highly recommend because it reduces the size of your image while maintaining its quality. Lossy compression, on the other hand, will lower your file size even more while also compromising its quality, which is something you don’t want.

Most of us are familiar with JPG, PNG, and GIF image formats.
There’s a brand-new image format called. WebP, which maintains the original image quality while lowering the file size even further (up to 50 percent of the original JPEG or PNG). The major disadvantage of this format is that it is still not supported by all browsers, therefore we’ll have to use a plugin or a CDN to implement it.

CDN (Content Delivery Network) is helpful for the fast delivery of content across the globe. It delivered static content like js, CSS, HTML, images from a geographically distributed group of servers working together to provide fast delivery of internet content.

A CDN consists of several edge servers that cache assets from your origin server. Whenever a user requests your site, the server closest to the user’s physical location will deliver the static content, ensuring the shortest distance for the data to travel. This ensures reduced latency and the fastest site experience.
When a user visits your website and requests static assets like images or JavaScripts files, their requests are routed by the CDN to the nearest edge server, from which the content is served. If the edge server does not have the assets cached or the cached assets have expired, the CDN will fetch and cache the latest version from either another nearby CDN edge server or your origin servers.

Non-critical resources are ones that aren’t required to display content above the fold. Defer these resources to avoid passing more bytes over the network unnecessarily.

Async – allows the HTML parser (e.g., a visitor’s browser) to download the JavaScript while the remainder of the HTML is being parsed. That is, it does not cease parsing altogether while the file downloads. However, once the script has been downloaded, it will pause the HTML parser and execute the script.
< script async src=”script.js” > < /script >

Defer – lets the HTML parser download the JavaScript while parsing the rest of the HTML and waits to execute the script until the HTML parsing is finished.
< script defer src=”script.js” > < /script >

Serve resources at the smallest size possible to reduce bandwidth consumption and overall page load times. Compress your HTML, CSS, and JavaScript files and minify your CSS and JavaScript to ensure your text-based resources are as small as they can be.Optimize your image delivery by sizing them properly and compressing them for smaller sizes.

Use above given steps to avoid network payloads in Magento 2. High network payload will The larger the page, the higher the network payload; hence, the longer it takes to download and load the data. By optimizing your page request you can reduce the network payloads, reduce page load times, and improve visitors page experience. If any query related to this blog then Contact Us.