How can Magento stores score well on Core Web Vitals?

Core Web Vitals

Mobile-Responsive

Safe Browsing

HTTPS

Non-Intrusive Interstitials

How To Make Your Magento Store Core Vitals Ready?

Good LCP (Largest Contentful Paint) Helps You To Rank Better

  1. A better hosting plan is preferable as Time Taken to First Byte or TTFB. It is essential, and it does the perfect representation of a fast server response time. A shared or slow hosting server will require substantial updating.So, your primary focus should be on better server response time. Also, you should adopt the best approaches to solve client-side rendering issues.
  2. You must focus on optimizing images and compress, convert and resize those to the proper format to aid faster loading time. Therefore, you need to optimize video and images so that it renders faster.
  3. You can merge JS files to reduce the number of server requests effectively. Another important thing is to deter the noncritical JS specifically for the above-the-fold content.
  4. One of the most important things to keep in mind is that preloading hero images with JS or CSS can reduce the LCP. Talking about the hero images, these are regarded as the most critical content elements above the fold.

Optimize Magento Store For CLS (Cumulative Layout Shift)

  1. You should avoid inserting ads and popups above other content. So, all that you need is to remove or reduce interstitials, popups, and ads to improve the Cumulative Layout Shift effectively. It also includes any cookie banners or notices.
  2. Specifying each content element’s height and width attributes is vital, including the eCommerce store images. By doing so, you would be able to prevent the layout shifts effectively.
  3. Magento stores allow you to make use of placeholders for layout stability. All you need is to consider using the placeholders for occupying the exact dimensions of the videos and pictures.In this regard, you should make sure that the iframes, embeds, and images possess dimensions.
  4. Another thing that you can do is to make use of optimized fonts. By using these, you would be able to prevent flashes of invisible layout shifts and text effectively.Again, by using system fonts, you can throw out the requirement for the browser to download the font file while it fetches the page. It would be best if you considered avoiding web fonts that cause FOUT or FOIT.
  5. Another important thing is to manage or reduce any dynamically injected content.

Importance Of Scoring Well At FID Or First Input Delay

  1. To reduce the main thread overloading, you should focus on breaking up longer tasks into smaller fragments. It would effectively prevent the delay in the user’s input implementationAt the time you are executing a coding block, the UI is unresponsive. In this case, the solution lies in code splitting.
  2. Magento stores particularly have 3rd party analytics and tags, which keeps the thread busy. Also, it is responsible for making the store unresponsive.In this case, the solution is to use on-demand Loading of these codes. Again, you need to prioritize the elements with the greeted value, particularly to the users.
  3. Web workers do a lot of work to optimize FID that runs in the JS, particularly on background threads.It does not have a considerable impact on the main thread. So, you would be able to minimize main-thread work by streamlining the long tasks.
  4. Another essential term which you will come across is the polyfills which are the JS-based browser fallbacks. It is something that allows modern functionalities, particularly on the old browsers.Also, it will enable you to download a lot of unnecessary code. So, it becomes essential for you to effectively reduce the number of polyfills and use that only when required.
  5. It would be best if you focused on removing the render-blocking JavaScript.
  6. It would help if you shortened the JavaScript execution time.

Final Verdict

--

--

--

We Fuel Notions that grow! We know Web, We know your industry and we’re here to help you.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
ZealousWeb

ZealousWeb

We Fuel Notions that grow! We know Web, We know your industry and we’re here to help you.

More from Medium

Is it a bug? Change via defects

Intigriti’s January XSS challenge: Hacking Obfuscation with a hint of React.

Collect the list of node dependencies from a node project

How To Add A Font To Silhouette Studio