Site Performance

Intelligems is designed to have as minimal an effect on site performance as possible. We use tools like pagespeed.web.dev (Lighthouse) and webpagetest.org to ensure our script runs efficiently.

Our goal is to create a seamless customer experience, preventing annoyances like flashing or flickering of elements on the page.

Every website is designed differently, has different underlying tools, and different ways of loading. We have a wide range of configurations to help provide the fastest experience. This guide should help maximize them.

Debugging Performance Issues

Javascript Tag

The default javascript tag in your theme looks like this pair of scripts below. This is how it appears in your theme if you have the app embed enabled. You can also paste it manually in your theme, following these instructions:

<script>
    window.Shopify = window.Shopify || {theme: {id: {{ theme.id }}, role: '{{ theme.role }}' } };
    window._template = {
        directory: "{{ template.directory }}",
        name: "{{ template.name }}",
        suffix: "{{ template.suffix }}"
    };
    window.__productIdFromTemplate = {{ product.id | json }};
    window.__plpCollectionIdFromTemplate = {{ collection.id | json }};
    window.igProductData = (function() {
      const data = {};
      {%- if template.name == 'collection' -%}
        {%- for product in collection.products -%}
          data["{{ product.id }}"] = {
            productId: {{ product.id | json }},
            handle: {{ product.handle | json }},
            tags: {{ product.tags | json }},
            collectionIds: [{% for col in product.collections %}{{ col.id }}{% unless forloop.last %},{% endunless %}{% endfor %}],
            inventory: {% assign total = 0 %}{% for v in product.variants %}{% assign total = total | plus: v.inventory_quantity %}{% endfor %}{{ total }},
            lowestVariantPrice: {{ product.price_min }}
          };
        {%- endfor -%}
      {%- elsif template.name == 'product' -%}
        data["{{ product.id }}"] = {
          productId: {{ product.id | json }},
          handle: {{ product.handle | json }},
          tags: {{ product.tags | json }},
          collectionIds: [{% for col in product.collections %}{{ col.id }}{% unless forloop.last %},{% endunless %}{% endfor %}],
          inventory: {% assign total = 0 %}{% for v in product.variants %}{% assign total = total | plus: v.inventory_quantity %}{% endfor %}{{ total }},
          lowestVariantPrice: {{ product.price_min }}
        };
      {%- endif -%}
      return data;
    })();
  </script>
  <script type="module" fetchpriority="high" src="https://cdn.intelligems.io/esm/31337h4x0r5/bundle.js" data-em-disable async></script>

• type="module" – This leverages a newer Javascript paradigm called ESM and natively provides speed benefits. This cannot be changed.

• fetchpriority="high" – This indicates to the browser to load Intelligems quickly so that our experiences are available as soon as the page is rendered.

• src="" – This is a reference to your customer-specific site. Make sure to copy from your settings page; the unique customer ID in the code block above is just an example.

• async – This tells the browser to continue to render the page while Intelligems loads and is a best practice for high-performing sites. If you notice this is missing, please add it!

• blocking="render" – If you are using the Intelligems app embed and experiencing flicker — especially with template tests or split URL tests — you can add blocking="render" to your script tag. The app embed does not include this attribute by default. To add it, disable the Intelligems app embed in your Shopify theme settings, copy the script from your Intelligems settings page, and paste it directly into your theme.liquid file, adding blocking="render" to the <script> tag if it is not already present. This will prevent the browser from painting until the Intelligems script has loaded, reducing flicker at the cost of slightly higher FCP and LCP times. See Anti-Flicker Modes for additional options.

Types of tests

Different tests leverage different browser capabilities to execute and have different impacts on site speed.

• Javascript & CSS Injection: These tests are some of the most efficient. We leverage the browser capabilities and simply add <style> and <script> elements to the <head> of your page and let the browser do the rest.

• Onsite Edits: These tests rely on our javascript to find the appropriate elements on the page and update them. While this can be incredibly fast, for large sections of HTML or elements that require loading additional content, e.g. images and videos, there may be other effects on page speed.

• Price Tests: Price tests are designed to be incredibly efficient, but there are many algorithms under the hood that are running to make this happen. You can read more about optimizing your pricing integration here.

We're here to help!

If you're noticing undesirable impacts on site speed because of Intelligems, there's certainly an opportunity for improvement. Please contact our support team if you need assistance.