How to Check Quiz Loading Speed¶
A quiz on your store has to load quickly. When one is slow, the cause is usually not the quiz but something else on the same page.
This article explains how to find what is holding the quiz up, and what to do about it.
-
Find the direct link to your quiz. It is in the
Share > Externaltab of the quiz.A Shopify link looks like
https://your-store.com/#quiz-rkHm6Y, whererkHm6Yis your quiz ID. In this version the quiz runs natively inside your theme, so the address is your own storefront. -
Open that link in a browser and time it. A quiz on its own should be ready in under a second.
A quiz that loads quickly here, but slowly on your site, is not the thing slowing your site down.
Measure it rather than eyeball it
Run the direct link through Google PageSpeed Insights or the Lighthouse Chrome extension to see its performance in isolation.
-
Right-click your page and select
Inspectto open the developer tools. -
Open the
NetworkorPerformancetab and reload the page. Each row shows a resource and how long it took.Look for whatever delays the page most. Those are the items holding the quiz up.
Let a report rank them for you
Run the whole page through Google PageSpeed Insights or the Lighthouse Chrome extension. The report lists the heaviest items, usually images, fonts and third-party scripts, with the cost of each.
-
Ask your developer to lighten the page. Compress the images, minify the CSS and JavaScript, and remove any plugin or widget you do not need.
- Third-party widgets. Marketing and chat scripts should load asynchronously, or be deferred until after the quiz.
- Shopify's own reports. Improving web performance shows what is blocking your storefront.
The large inline quiz configuration is not the problem
Inspecting your page source, you may find a window.quizzes JSON object of 100 to 200 KB. That is your quiz: its questions, logic, results pages, recommendation rules, design and translations. It is embedded in the page so the quiz opens at once, with no extra request when the customer starts it.
The uncompressed size looks alarming, and it is not the bottleneck.
- It is compressed on the wire. Shopify serves pages gzip or brotli compressed, so a 150 KB configuration usually ships at 10 to 15 KB, less than one product thumbnail.
- It is not rendered DOM. It sits inside a
<script>tag, so it costs no layout or paint. - It loads asynchronously. It never blocks the page from rendering.
Check the real transferred size in the Network tab, in the Size column rather than Content.
-
Find the direct link to your quiz. It is in the
Share > Externaltab of the quiz.The link looks like
https://admin.revenuehunt.com/public/quiz/rkHm6Y, orhttps://your-store.com/#quiz-rkHm6Yif the quiz is embedded in your storefront.rkHm6Yis your quiz ID. -
Open that link in a browser and time it. A quiz on its own should be ready in under a second.
A quiz that loads quickly here, but slowly on your site, is not the thing slowing your site down.
Measure it rather than eyeball it
Run the direct link through Google PageSpeed Insights or the Lighthouse Chrome extension to see its performance in isolation.
-
Right-click your page and select
Inspectto open the developer tools. -
Open the
NetworkorPerformancetab and reload the page. Each row shows a resource and how long it took.Look for whatever delays the page most. Those are the items holding the quiz up.
Let a report rank them for you
Run the whole page through Google PageSpeed Insights or the Lighthouse Chrome extension. The report lists the heaviest items, usually images, fonts and third-party scripts, with the cost of each.
-
Try embedding the quiz in an iframe instead. The standard embed loads the quiz through
embed.js, so it waits its turn behind your other scripts. An iframe starts rendering the quiz beforeembed.jshas loaded.Replace this:
<div class="rh-widget rh-inline" data-url="https://admin.revenuehunt.com/public/quiz/rkHm6Y" style="..."></div>With this:
-
Ask your developer to lighten the page. Compress the images, minify the CSS and JavaScript, and remove any plugin or widget you do not need.
Raw size is not transferred size
The byte sizes in your page source are uncompressed. Shopify serves your pages, and the quiz script, gzip or brotli compressed, so the browser downloads far less than those numbers suggest. A 150 KB payload usually ships at 10 to 15 KB.
Check the real transferred size in the Network tab, in the Size column rather than Content, before deciding something is heavy.
-
Find the direct link to your quiz. It is in the
Share > Externaltab of the quiz.The link looks like
https://admin.revenuehunt.com/public/quiz/rkHm6Y, orhttps://your-site.com/#quiz-rkHm6Yif the quiz is embedded in your site.rkHm6Yis your quiz ID. -
Open that link in a browser and time it. A quiz on its own should be ready in under a second.
A quiz that loads quickly here, but slowly on your site, is not the thing slowing your site down.
Measure it rather than eyeball it
Run the direct link through Google PageSpeed Insights or the Lighthouse Chrome extension to see its performance in isolation.
-
Right-click your page and select
Inspectto open the developer tools. -
Open the
NetworkorPerformancetab and reload the page. Each row shows a resource and how long it took.Look for whatever delays the page most. Those are the items holding the quiz up.
Let a report rank them for you
Run the whole page through Google PageSpeed Insights or the Lighthouse Chrome extension. The report lists the heaviest items, usually images, fonts and third-party scripts, with the cost of each.
-
Try embedding the quiz in an iframe instead. The standard embed loads the quiz through
embed.js, so it waits its turn behind your other scripts. An iframe starts rendering the quiz beforeembed.jshas loaded.Replace this:
<div class="rh-widget rh-inline" data-url="https://admin.revenuehunt.com/public/quiz/rkHm6Y" style="..."></div>With this:
-
Ask your developer to lighten the page. Compress the images, minify the CSS and JavaScript, and remove any plugin or widget you do not need.
-
Find the direct link to your quiz. It is in the
Share > Externaltab of the quiz.The link looks like
https://admin.revenuehunt.com/public/quiz/rkHm6Y, orhttps://your-site.com/#quiz-rkHm6Yif the quiz is embedded in your site.rkHm6Yis your quiz ID. -
Open that link in a browser and time it. A quiz on its own should be ready in under a second.
A quiz that loads quickly here, but slowly on your site, is not the thing slowing your site down.
Measure it rather than eyeball it
Run the direct link through Google PageSpeed Insights or the Lighthouse Chrome extension to see its performance in isolation.
-
Right-click your page and select
Inspectto open the developer tools. -
Open the
NetworkorPerformancetab and reload the page. Each row shows a resource and how long it took.Look for whatever delays the page most. Those are the items holding the quiz up.
Let a report rank them for you
Run the whole page through Google PageSpeed Insights or the Lighthouse Chrome extension. The report lists the heaviest items, usually images, fonts and third-party scripts, with the cost of each.
-
Try embedding the quiz in an iframe instead. The standard embed loads the quiz through
embed.js, so it waits its turn behind your other scripts. An iframe starts rendering the quiz beforeembed.jshas loaded.Replace this:
<div class="rh-widget rh-inline" data-url="https://admin.revenuehunt.com/public/quiz/rkHm6Y" style="..."></div>With this:
-
Ask your developer to lighten the page. Compress the images, minify the CSS and JavaScript, and remove any plugin or widget you do not need.
-
Find the direct link to your quiz. It is in the
Share > Externaltab of the quiz.The link looks like
https://admin.revenuehunt.com/public/quiz/rkHm6Y, orhttps://your-site.com/#quiz-rkHm6Yif the quiz is embedded in your site.rkHm6Yis your quiz ID. -
Open that link in a browser and time it. A quiz on its own should be ready in under a second.
A quiz that loads quickly here, but slowly on your site, is not the thing slowing your site down.
Measure it rather than eyeball it
Run the direct link through Google PageSpeed Insights or the Lighthouse Chrome extension to see its performance in isolation.
-
Right-click your page and select
Inspectto open the developer tools. -
Open the
NetworkorPerformancetab and reload the page. Each row shows a resource and how long it took.Look for whatever delays the page most. Those are the items holding the quiz up.
Let a report rank them for you
Run the whole page through Google PageSpeed Insights or the Lighthouse Chrome extension. The report lists the heaviest items, usually images, fonts and third-party scripts, with the cost of each.
-
Try embedding the quiz in an iframe instead. The standard embed loads the quiz through
embed.js, so it waits its turn behind your other scripts. An iframe starts rendering the quiz beforeembed.jshas loaded.Replace this:
<div class="rh-widget rh-inline" data-url="https://admin.revenuehunt.com/public/quiz/rkHm6Y" style="..."></div>With this:
-
Ask your developer to lighten the page. Compress the images, minify the CSS and JavaScript, and remove any plugin or widget you do not need.
-
Find the direct link to your quiz. It is in the
Share > Externaltab of the quiz.The link looks like
https://admin.revenuehunt.com/public/quiz/rkHm6Y, orhttps://your-site.com/#quiz-rkHm6Yif the quiz is embedded in your site.rkHm6Yis your quiz ID. -
Open that link in a browser and time it. A quiz on its own should be ready in under a second.
A quiz that loads quickly here, but slowly on your site, is not the thing slowing your site down.
Measure it rather than eyeball it
Run the direct link through Google PageSpeed Insights or the Lighthouse Chrome extension to see its performance in isolation.
-
Right-click your page and select
Inspectto open the developer tools. -
Open the
NetworkorPerformancetab and reload the page. Each row shows a resource and how long it took.Look for whatever delays the page most. Those are the items holding the quiz up.
Let a report rank them for you
Run the whole page through Google PageSpeed Insights or the Lighthouse Chrome extension. The report lists the heaviest items, usually images, fonts and third-party scripts, with the cost of each.
-
Try embedding the quiz in an iframe instead. The standard embed loads the quiz through
embed.js, so it waits its turn behind your other scripts. An iframe starts rendering the quiz beforeembed.jshas loaded.Replace this:
<div class="rh-widget rh-inline" data-url="https://admin.revenuehunt.com/public/quiz/rkHm6Y" style="..."></div>With this:
-
Ask your developer to lighten the page. Compress the images, minify the CSS and JavaScript, and remove any plugin or widget you do not need.
This article explains how to check the loading speed of your quiz, and how to find what is slowing it down.