Lighthouse Performance and Accessibility Testing for "Built for Shopify"

Lighthouse Performance and Accessibility Testing for "Built for Shopify"

Kris_Doyle
Shopify Partner
140 1 44

I'm currently working on meeting the criteria for the "Built for Shopify" designation but I'm running into some issues in the testing of performance and accessibility.

 

I'm trying to use Lighthouse and Wave for the testing, but my app is embedded, and the tools are reporting the performance and accessibility of the parent Shopify window, not my embedded app in the iframe. From what I've read, these tools can't really test properly when iframes are used. The tools are reporting issues with the page, but they're in the parent window. I used to be able to just turn off the "forceRedirect" and test, but since the change to session tokens, I can't do that anymore because the app can't load unless the parent window loads it with the session token.

 

Is there a way to test an embedded app while it's in the iframe using Lighthouse and Wave without getting results from the parent frame?

 

Also, I'm wondering how the Shopify tool works for testing performance. Is it possible I'm getting wrongly flagged for admin performance because the tools aren't seeing the iframe properly? As an example, when I run Lighthouse, the LCP is flagged as high, but it's because of Javascript in the Shopify parent window, not the iframe. Because of this, I'm unable to meet the automated requirements and I'm concerned that it's not only my embedded app that's the issue.

 

Thanks for any insights anyone can provide 🙂

Replies 4 (4)

Jamflynt
Shopify Partner
41 0 22

Going to reply to this to hope it gets more attention. I am currently working on something similar and  need to be able to test my App's accessibility as some of our client base might be using screen readers and the like. 

Did you find anything? 

Kris_Doyle
Shopify Partner
140 1 44

Hey @Jamflynt ,

 

Unfortunately nothing for accessibility yet, but I did come across some newish Google performance tools if you want to take a look (I haven't been able to dedicate the time yet).

 

https://web.dev/vitals/

Jamflynt
Shopify Partner
41 0 22

Oh nice, thank you I will check them out for sure. These seem to be a bit more helpful. 

khyathi
Shopify Partner
2 0 1

Hey @Jamflynt  and @Kris_Doyle  please let me know if anything works for you we are also trying to get the badge but in the app admin performance it is showing higher lcp values let me know if you know any info that i can use and also any tools for testing the web vitals and improving them