Core Web Vitals | Optimizing Shopify Speed Score - useful Apps for 2021 update

[McGreals]

Hi all,

I'm sure most of you have heard the news of Google bringing in "Core Web Vitals" into their SEO equation at the end of May/beginning of June 2021.

With this in mind, it is important to make sure your Shopify store is optimized according to Google's Pagespeed Insights test hosted by Lighthouse.

When I tested my site on this, I was shocked to find my mobile score as low as 19. 

My desktop was sitting at 81 however.

Frantically trying to find ways to improve this - there were very few methods on Google that actually helped us Shopify merchants. And of course, most of us aren't developers who live and breath Javascript and CSS.

After a week of research, I have come across 3 apps which have significantly increased my Speedscore.

The first is Hyperspeed, a paid app (40USD) per month which helped optimize my theme and reduce unused Javascript automatically - worth every penny in my opinion. There's also a 7 day free trial to test out if their app works or not - if not, just uninstall!

https://apps.shopify.com/hyperspeed?surface_detail=hyperspeed&surface_inter_position=1&surface_intra...

Secondly, Page Speed optimizer also helped reduce overall load times of my website - however, this may not affect your Pagespeed score - but it's free!

https://apps.shopify.com/page-speed-optimizer?surface_detail=speed+optimizer&surface_inter_position=...

And lastly, Core Web Vitals Booster is currently free but may be a paid App in future so get in quick! This app reduced my blocking time and improved my score by 20-30 points. 

https://apps.shopify.com/core-web-vitals-booster?surface_detail=core+web+vitals&surface_inter_positi...

And lastly, although I did not notice an immediate affect on my score, it may have contributed toward the improvement - check out this video on how to remove render blocking javascripts.

https://www.youtube.com/watch?v=QTgUkzmxIwY&ab_channel=DealsTunnel

My desktop score is now comfortably sitting at 96 and my mobile is now at an 81. Of course there is still room for improvement but overall I'm super happy with the results so I had to share.

Hope this helps!

P.s if one of our competitors finds this - you owe us!

From your fellow non-developer Shopify merchant,

Dan 

[McGreals]

Update: to Eliminate render-blocking resources find the code  {% include 'google-fonts' %} in your theme.liquid file and move this directly above the </body> as per below

[xdreamineer]

@McGreals 

Did you install all three of them to get the score improved?

Thanks

Rachel

[McGreals]

@xdreamineer Yep, installed all 3 🙂 My Shopify online speed score has also increased from 32 to 68! 

[PuzzlePeak]

Great information. Have been manually optimizing code to increase the speed score, but it is a pain, as I have installed and uninstalled many apps over the past few years.

With the Core Web Vitals Booster app, does it store all of the pages in the cloud on a remote server? And, looking at their developer site, it says as the Go Live step, "Point your domain name to the CDN IP and enjoy improved performance." What does this last step mean?

Thanks for your help and insight.

[PuzzlePeak]

Thank you, McGreals!

So, I went ahead and installed the Core Web Vitals Booster and it raised my Mobile Speed Score from 40 to 59 and then when I turned on Image Lazy Loading it went up to 63 (speed seems to vary each time I run it by 1-2 points. But so far, very happy with the easy install process and the results. With some manual cleanup of old unused code in my apps.js file and Core Web Vitals Booster, I was able to raise my Mobile Speed Score from 23 to 63 today. We'll see what benefits I notice over the next week or so with conversions, reduced bounce rates, etc.

[McGreals]

Awesome news, @samdavidson your app is amazing!