Magento 2 Core Web Vitals

Magento 2 Core Web Vitals – Google core web vitals are a set of methods by which any website can increase their user experience and conversion rates as well.

Increase your Magento 2 Core web vitals and UX Using

I hope every webmaster who is managing their eCommerce / Magento 2 stores must have gone through the same in Google search console.

What is the importance of Magento 2 Core web Vitals?

Core web vitals are highly important for eCommerce & marketplaces. WHY?

As per the latest update on “16 June 2021” from Google search central. Page experience is a “Ranking Signal” now. Which depends on core web vitals.

 

Web vitals provides critical information about the pages of your Magento 2 eCommerce store or marketplaces.  Google also defined a couple of terms as well.

  • LCP – Largest Contentful Paint
  • FID – First Input Delay
  • CLS – Cumulative Layout Shift (CLS)

You will get most of such information on the web.dev website.

Ecommerce ( B2b/B2c )Core web vitals reports come in two segments

  1. Desktop
  2. Mobile

 

Let me add the screenshots for you.

As you can see the detailed reports are there. Google suggests as an ERROR that needs to fix.

So now you may understand that this is critical. That’s why Google is displaying the same error.

How to Improve Ecommerce Core web Vitals?

Google web.dev provides complete details and tool as well – https://web.dev/measure/ 

Simple steps are –

  1. Enter your website on the web.dev website
  2. Check the report and improvement
  3. Improve TTFB
  4. Optimize server response time
  5. Use WebP images to reduce the dom size.
  6. Improve rendering especially javascript and CSS files
  7. size calculation for the images and elements.
  8. No changes in the layout.
  9. Always check with lighthouse after any update in the website
  10. performance drive development is very important.

Javascript at Bottom of the Page:

Although this is an old concept but FCP & LCP works really well When you have javascript at the bottom. Magento 2 uses a lot of javascript files.

Putting Javascript files at a bottom will seriously reduce the time blocking and will improve the  FCP ( first contentful paint )

Google Recaptcha and Core web Vitals

Spams are bad and security is very critical for Magento 2 websites or marketplaces. Recaptcha does the work really well. But Drastically increases the Page load time.

The solution is simple – Instead of on page load, render the Recaptcha asynchronously. So that request from Recaptcha Should be avoided during page load time.

YouTube and Core Web Vitals

In Magento 2 website or in any e-commerce store, videos play a very critical role. YouTube is the de facto of video streaming.

Many times store owners put  YouTube HTML code into CMS pages OR in the product pages through WYSIWYG editor.

YouTube’s Javascript libraries also increase the page load time.

This can be observed In any popular tools like Google Page speed, WebPageTest, Pingdom, or GTmetrix.

Again the Simple solution– either load the Youtube player files asynchronously OR use the custom Magento 2 Video Player.

Video Players include their own Javascript files which can be deferred, Means at the bottom of the page.

 

I hope you found this information useful. Will write more about web vitals and performance in the coming series.

Thanks

 

 

. . .

Comment

Add Your Comment

Be the first to comment.

css.php