Issue While Lighthouse testing of an Embedded App

Technical Q&A
1

Requirement: To have performance Test of embedded App using Lighthouse

Issue: For both Mobile and Desktop options in Lighthouse, I get different errors related to Chrome version although I am on latest version.

Steps to Reproduce :

  • Go to store admin url [https://cb-ashutosh-test.myshopify.com/admin](https://cb-ashutosh-test.myshopify.com/admin)
  • open app(optional),
  • open developer console and go to lighthouse tab
  • Click on generate report or analyze page load option (mobile/desktop)
  • Analysis will start and you can see error pages.
  • Although scores are generated but they doesnt seem to be right due to error in attached images.

Error in Desktop Mode
Error in Desktop Mode2880×1491 215 KB

Error in Mobile Mode
Error in Mobile Mode1874×524 84.4 KB

2

@ashutoshsingh ,

I think you are testing the dev site right ?

3

@oscprofessional
Yes, its still in development

4

@ashutoshsingh ,

It is saying that update your internet browser.

You have to live the store then check…

5

@ashutoshsingh ,

Give me the store access.

6

@oscprofessional ,
So basically, this test runs for app only on live stores ?

7

Hello @ashutoshsingh ,

We have checked your Issue, and it seems that you are not using the latest version of Chrome, your current chrome version is 98.0 and the latest version is 103.0 hence, please update the chrome to avoid this issue.

Refer to the image below.

Cedcommerce_0-1657191171059.png
Cedcommerce_0-1657191171059.png300×125 20.2 KB

image.png

Let us know if you need any further help.

Regards,

Team CedCommerce

8

Hi,

Thanks for responding. I already checked that as the first thing. I am
using latest version of chrome.

ashutoshsingh_0-1657196780426.png
ashutoshsingh_0-1657196780426.png1578×502 30.4 KB

And it’s very strange that while testing the app, it is showing some older
version.

Thanks

9

I have the same issue as well. What is the deal here? We want to publish the app for review and this is basically the last thing on our todo list. Have been looking at this confused and totally “wrong” error message for two days now with no resolution. How do we fix this?

10

Hi @mapp123 ,

Although I didn’t get a proper solution, I got a sort of workaround, try to run Analyse by giving a max window to page. When the test starts, you can see an option to Continue with unsupported Browser then click it whenever it comes. Testing will resume after you click that option.

Mobile testing
Mobile testing2208×1102 165 KB

Thanks
Ashutosh

11

Thank you for the suggestion. Already tried it, but it corrupts the test and reduces the score of the app. We are in the 80% mark, except seo is around 75%.

12

Hello,

I am sorry you are experience this problem. Was this a requeriment from Shopify to approve your app?

According to the official documentation, performance testing is only required for the storefront, not the Shopify Admin, see https://shopify.dev/apps/best-practices/performance#testing-for-performance

13

My chrome is up to date. Facing the same issue, where you able to find a solution for this other than clicking on continue with unsupported version?

14

Same here… i am using 111 chrome version

15

Is a common error running lighthouse inside a chrome dev tools, the good news is that there are more options to run it :sun_with_face:

npm install -g lighthouse

Run chrome from lighouse, and login into Shopify app.

npx chrome-debug

After that in console you get a port number, something like this

:sparkles: Chrome debugging port: 65405 # This port will be used in the last step

Go to your shop and login in the lighthouse recently opened browser

Next run lighthouse to see results

npx lighthouse https://admin.shopify.com/store/

It will take some time, after that will open in your browser all lighthose **report**