6. How to improve Magento Core Web Vitals?
Now its time to take action to improve web vitals, follow below given steps to improve web vitals.
1. Defer Offscreen Images
Generally images takes more loading time due to that your site can be slow down. We recommend to apply Lazy Loading for images. Lazy loading slows down offscreen images loading. Users can’t see offscreen images when they enter the store, they just see a few banners at the top and probably some content on the visible screen.
When a user opens a webpage, all the contents of the page are downloaded, including all images in it. Obviously, if the web page contains more images, then it will take more time to load. Lazy loading is a handy skill to help you prevent downloading of unnecessary images.
Instead of loading all images at one time, the images are loaded only when the user accesses the part of the page that relates to these images. With lazy loading, on-screen images are loaded first, and the remaining images are gradually loaded as and when the user scrolls through the page. For Example, if your web page contains 100 or more images then instead of loading all the images at one time we can add images in lazy loading and load only required images on page scrolling.
2. Eliminate Render Blocking Resources
You can eliminate render blocking by moving critical code out of head.
In most of the cases it has been found that js and css are included in Head code. If there is no defer associated with these includes then that code will block rendering. This should be avoided if “defer” was not needed or reduced to the highest possible extent. Also on times there are Java script lines embedded in head this again will do the render blocking if these are getting executed. All CSS and JS needs to be deferred where possible, if possible create a critical CSS file, for all content above the fold.
3. Reduce Initial Server Response Time
Once a user requests the browser, the browser requests a server to fetch the requested content by the user. If your site contains more http requests then it will take a long time to respond to users request and user dislike when pages take a long time to load.
There might be a number of reasons to slow down server initial response. Use Varnish cache to speedup to improve in the load time as Varnish delivered from the cache server instead of origin server. There are lots of benefits using Varnish cache, it reduces the load of the backend, as it delivers the content from the cache server.
Another reason to slowdown your website is the server. If your server is slow then it will impact the initial response time. So optimize the server application logic to faster the website. optimize server queries database, upgrade your server hardware.
4. Avoid large layout shifts
Large layout shifts can be avoided as it’s effect when visitors interact with the page. Once a visitor visits the page Large layout shifts can create a frustrating experience for them. A page element appears suddenly or moves around, and affects how the visitors interact with the page. Avoiding large layout shifts is essential for a smooth user experience.
How do Layout Shifts affect page performance?
When a visitor visits your webpage, they want to quickly interact with the page by clicking buttons, contact forms, images, videos, etc. Sometimes, they are just about to click on a button or something the screen has shifted down and they’ve ended up clicking on something else entirely.
6. Optimize images and video
Use of higher resolution images may affect the site speed. Recommended to use optimized images video on your page to reduce the load time for images and video.If you use larger file size then it will generate more http requests and reduce the load time. You can use properly sizing images, efficiently encoding images. Use sprites for the images to combine the small images. Also recommended to serve images in next-gen format. You can use Webp, JPEG 2000, JPEG XR these will help to reduce the http requests and increase in site speed.
7. Remove unused CSS
Although CSS is useful for improving user experience, we would recommend removing unused css. Most of the time a developer leaves the unused css that is no longer delivering benefits, can slow down your website.
8. Avoid an excessive DOM size
If your webpage contains an excessive number of DOM nodes or HTML tags, or if these nodes or tags are nested too deeply, it has a high DOM size. This might cause difficulties with site performance, such as jerky scrolling and sluggish page loading times. An optimized DOM size, on the other hand, provides a better user experience, which leads to greater conversions.
10. Reduce the impact of third-party code