Improving the Performance of Your Reviews Widget (Legacy)
- DarkLight
Improving the Performance of Your Reviews Widget (Legacy)
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
The Reviews Widget showcases customer reviews on your store. It is made up of 2 code snippets - a script to load the widget application code, and widget HTML to display the widget itself. Learn more about the Reviews Widget
This article explains how you can test and improve the performance of your Reviews Widget.
About performance
To ensure your Reviews Widget has the best possible performance, we removed all unused JavaScript and CSS, implemented an efficient caching policy, enabled text compression, and more.
What you can do
Make sure you’re getting the benefit of these measures by verifying you’re using the latest version of the Reviews Widget.
Testing performance
If you suspect the Reviews Widget is affecting the speed of your site, we recommend you start with a performance test.
Tip:
You might be familiar with web page auditing tools such as Google Lighthouse. While these are great for testing the performance of your web pages, we recommend you test the widget in isolation using a JavaScript playground tool such as JS Bin.
To test the performance of your widget:
Step 1: Paste your code into JS Bin
- Open JS Bin.
- On the top bar, select JavaScript.
- Copy and paste your widget code into the panel.JavaScript
<!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <meta name=“viewport” content=“width=device-width”> <title>JS Bin</title> <script async src=“//staticw2.yotpo.com//widget.js/" /> </head> <body> <div class=“yotpo bottomLine” data-product-id=“<product_id>6701601685658>"> </div> <div class=“yotpo yotpo-main-widget” data-product-id=“<product_id>6701601685658"> </div> </body> </html> - Replace <app_key> with your personal Yotpo app key. How to find your app key
- Replace <product_id> with any product ID.
Step 2: Run a Lighthouse Performance report on the widget
- Right-click on the page and select Inspect (last option).
- Click the Lighthouse tab.
- Click Run a report.
- Wait a few seconds as the report is generated.
If you have the CSS editor enabled, and are therefore using a previous widget version, the widget version that is tested will be the version you are showcasing on-site, based on your app key.
Step 3: Check the new widget version performance
- From your Yotpo Reviews main menu, go to On-Site Widgets.
- Click the Widget CSS Editor.
- From the Preview the widgets dropdown, select Reviews Widget.
- Run a Lighthouse Performance report on the widget.
FAQ
Where can I find a product ID to insert in the code snippet?
- Navigate to a product page that is loading our main Reviews Widget.
- Right-click on the page and select Inspect (last option)
- Navigate to the network tab. This will show all the resources that you’re loading on a given page.
- Type Yotpo in the search bar and refresh the page.
- Click the main widget file and navigate to the payload tab.
- In the method section, you’ll see “pid”, short for product ID, and a valid product ID you can use for this test.
Was this article helpful?
