Table of contents
- 1. Overview
- 2. How does a high network payload affect page performance?
- 3. What should an optimal Page size be?
- 4. Causes of large page size?
- 5. How to fix the “Avoid Enormous Network Payloads in Magento 2”
- Use Lazy Loading
- Compress Images
- Use NextGen Image Optimization
- Use a CDN
- Defer non-critical resources
- Minimize the size of resources
- 6. Conclusion
3. What should an optimal Page size be?
4. Causes of large page size?
- Use of big size images.
- Videos above the font.
- Use of sliders
5. How to fix the “Avoid Enormous Network Payloads in Magento 2”
5.1 Use Lazy Loading
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.
5.2 Compress Images
5.3 Use NextGen Image Optimization
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.
5.4 Use a CDN
5.5 Defer non-critical resources
< script async src=”script.js” > < /script >
< script defer src=”script.js” > < /script >