category oscprofessionals - Blogs - How to Avoid Enormous Network Payloads in Magento 2
Sept 08, 2021 | 8 min read

How to Avoid Enormous Network Payloads in Magento 2

Overview

Enormous network payload warning occurs when the overall page size exceeds 1,600 KiB. To pass this opportunity you must minimise the page size. Long page load times are directly correlated with huge network payloads (i.e. large file sizes).
Smaller files download faster, so reducing the total amount of your website’s network requests improves your visitors’ page experience.
Unoptimized images, videos, third-party code, or huge CSS and JavaScript files are frequently the reason for a large page size.
Google prefers sites under 1.6MB, but in an ideal world, we’d prefer pages under 1MB. If you want to score 100 on Google’s Mobile Page Speed test, your pages should be under 0.5MB in size. Because this test uses a 1.6 megabit connection, which is extremely slow, your pages must be 1 megabyte or less in order to achieve a score of 50 or 60.

1. How does a high network payload affect page performance?

The browser requests the server for your page’s resources every time it loads.Your network payload is determined by the combined size of all of these resources.
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.

2. What should an optimal Page size be?

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.

3. Causes of large page size?

  • Use of big size images.
  • Videos above the font.
  • Use of sliders
  • Use of too many JavaScripts.

4. How to fix the “Avoid Enormous Network Payloads in Magento 2”

4.1 Use Lazy Loading

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.

4.2 Compress Images

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.

4.3 Use NextGen Image Optimization

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.

4.4 Use a CDN

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.

4.5 Defer non-critical resources

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 >

4.6 Minimize the size of resources

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.

6. Conclusion

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.

Latest Posts

Leave A Comment