FROM CACHE - en_header

Shopify Product Review app is loading slow

dennisve
Tourist
12 0 2

Hi all,

 

I'm currently working on a new store and I've implemented the Product Reviews app from Shopify. I only added the snippet for the reviews themself so far, at the bottom of the product page.

 

When I'm refreshing the page, the reviews take noticeably longer to load than the rest of the page. The whole page is loaded and when that's done, the reviews app appears. I've read other posts on this forum mentioning the same problem, but no solutions as far as I could see.

Anyone who had the same experience and was able to solve this?

 

Thanks in advance.

Replies 12 (12)
Anonymous
Not applicable

asdasdasdsadsadasa

eStoreSpeed
Explorer
43 6 12

Hi @dennisve,

The product reviews widget is generated via a script. Scripts load after the text and the html of the page so they will always load "after" the main components of the page have loaded. You can optimize scripts to load faster, but it would be best to contact Shopify product reviews app about this.

There are also other review apps out there the might load faster, I would personally recommend https://apps.shopify.com/judgeme. Their product review widget loads pretty fast.

Feel free to reach out!

Best,

eStoreSpeedOptimization 

Subscribe to Shopify speed improvement newsletter (we never spam)
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
dennisve
Tourist
12 0 2

Thanks for the reply.

 

Does this have impact on SEO performance? Or shouldn't it matter too much? I'll try to get in touch with Shopify about this. Thanks.

JohnCodes
Shopify Partner
134 10 74

Hi @dennisve 

This is pretty common among all review apps we come across since they're loaded from 3rd party scripts. These scripts usually take a "back seat" while more critical portions of the page are loaded first.

Some apps may load faster than others, but you'll almost always notice a slight loading delay between the page contents and your reviews. While you may not be able to reduce the delay, you can optimize how the script loads to potentially improve your overall page performance.

You can either load it asynchronously or defer it completely so that other parts of your page can potentially load faster.

To load a script asynchronously, you'll want to add the "async" attribute to your script tag. You can use the same method for deferring a script, but instead of using the "async" attribute, you'll use "defer". Here are a few code snippets to demonstrate what I'm talking about:

Async loading
<script src="reviews-script.js" async></script>

Defer loading
<script src="reviews-script.js" defer></script>

 

This can also help with scripts that are considered "blocking". If a script is considered as such, that means it's blocking other portions of the page from loading because it needs to finish loading first. 

So deferring or asynchronously loading your scripts can help improve overall website performance. Performance is also a factor taken into account for your SEO ranking, so it may help improve that as well.

Sorry for kind of going off on a tangent there haha, but you likely can't do much about the delay you're seeing so I'd focus on other optimizations instead.

I hope this helps!

Developer at SpeedBoostr (Shopify optimization and dev agency).
Try out our Shopify Analyzer (free performance analysis tool).
Check out Order Automator (app that auto tags + fulfills orders, and more automation)
More Apps: Theme Scientist (A/B testing tool), Tip Jar (add a tip button to your store), File Optimizer (optimize CSS, JS, Liquid)
dennisve
Tourist
12 0 2

Thanks for the detailed response! I'm checking right now, and the review app is loaded via a div that I placed;

 

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

 

Any idea how I can test your suggestion in this case?

eStoreSpeed
Explorer
43 6 12

Hi @dennisve ,

Site speed does affect SEO performance. But there isn't so much that can be done to optimize third party scripts although you could implement @JohnCodes defer solution  ( with the reviews it would be better to use defer than async) or load the third party scripts only on the page they are used on for example if you only use the app on the product page you shouldn't load the app scripts on every page (adding something like below within your <head> tag should work).

 

{% if request.page_type == "product" %} 
<script src="reviews-script.js" defer></script>
{% endif %}

 

 

However, there are likely other things on your site that can be improved to optimize your sites performance. If you can provide your website url we can have a look?

eStoreSpeedOptimization

 

Subscribe to Shopify speed improvement newsletter (we never spam)
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
dennisve
Tourist
12 0 2

Thanks for the reply.

 

I''m not sure though where I can change the javascript from the app? I only implemented a div element. I do see the script on the live page, but I'm not sure where I can edit the script?

JohnCodes
Shopify Partner
134 10 74

Hi @dennisve 

The script for your reviews app is likely in your theme.liquid file.

I'd go into this file and do a keyword search (Command + F on Mac or CTRL + F on Windows) for reviews to see which script gets highlighted. I believe the script from Shopify's reviews app is called something like productreviews.shopifycdn.com.

This is where you'll be able to add your async or defer attribute (Shopify may already be loading this script asynchronously).

Developer at SpeedBoostr (Shopify optimization and dev agency).
Try out our Shopify Analyzer (free performance analysis tool).
Check out Order Automator (app that auto tags + fulfills orders, and more automation)
More Apps: Theme Scientist (A/B testing tool), Tip Jar (add a tip button to your store), File Optimizer (optimize CSS, JS, Liquid)
dennisve
Tourist
12 0 2

Yes I've looked in there already but unfortunately it's not in there. It doest get loaded on my page though in the source code, in the header section. So I have no clue how it won't appear in the theme.liquid file

JohnCodes
Shopify Partner
134 10 74

Do you mind sending over your store URL so I can check it out?
Feel free to reply here or send me a private message.

Developer at SpeedBoostr (Shopify optimization and dev agency).
Try out our Shopify Analyzer (free performance analysis tool).
Check out Order Automator (app that auto tags + fulfills orders, and more automation)
More Apps: Theme Scientist (A/B testing tool), Tip Jar (add a tip button to your store), File Optimizer (optimize CSS, JS, Liquid)
dennisve
Tourist
12 0 2

Sure, I've sent a pm

eStoreSpeed
Explorer
43 6 12

Hi @dennisve ,

I realized the Shopify product reviews is added via the Script tag resource. You can read more about it here https://shopify.dev/docs/admin-api/rest/reference/online-store/scripttag#index-2021-04.

You can see the apps adding scripts via your stores script tag by going to your admin and adding '/script_tags.json' to the end of the url e.g. https://mystore.myshopify.com/admin/script_tags.json. You will see Shopify product reviews there.

I did some tests on my own store and it appears Shopify product reviews already loads their widgets async (see screenshot below). So there is no need to do anything on your end. Regarding making the widgets load faster,  I would suggest reaching out to the apps support team.

async tag addedasync tag added

I do have a suggestion to optimize your site performance by only loading the reviews widget on the pages you use them on. We actually have a video tutorial on loading Shopify product reviews only on product pages https://www.youtube.com/watch?v=BADxzcJ5XRU (go to 13:56)

Hope this helps!

eStoreSpeedOptimization

 

 

Subscribe to Shopify speed improvement newsletter (we never spam)
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution