Optimize Page Speed

The Glood app embed loads the recommendation scripts on every page where Glood is enabled. On mobile they download at the same time as the page’s own images and files, and can delay the main product image (Largest Contentful Paint, LCP). This guide covers the settings that move that work out of the way. They range from switching off what your store does not use, to downloading recommendations only when a section is about to be seen. All settings are in the theme editor: Online Store → Themes → Customize → App embeds → Glood.AI Recommendations.

What Glood loads on a page

Asset	What it does	When it loads by default
Recommendation script and styles	Renders the recommendation sections	With the page
Liquid worker	Renders section templates off the main thread	Preloaded with the page
Swiper	Carousel library used by carousel layouts	With the page, when Load Swiper (carousel library) is on
Glood AI bundles script and styles	Powers the Glood AI bundle blocks	With the page, when Load Glood AI Bundles is on
Skeleton styles	The placeholder that holds a section’s space while it loads	With the page (small, and it keeps the layout from shifting)

Quick wins

These switches are under Glood AI Features. Turn off only what your store does not use:

Load Swiper (carousel library): needed only by sections with a carousel layout. With it off, carousel sections are hidden.
Load Glood AI Bundles: needed only if your templates use the Glood AI bundle blocks.
Enable Upsell Offers and Enable customizable bundles: leave off unless you use them.

Load recommendation scripts at low priority

Advanced Options → Load recommendation scripts at low priority Browsers fetch the recommendation script and the worker preload at high priority, the same as your product image. With this setting on, they are fetched at low priority, so the browser fetches the page’s own images and files first. Sections still load and render as before. Bundles are not affected. This is safe to turn on for any store, on its own or together with on-demand loading.

Load recommendations on demand

Advanced Options → Load recommendations on demand With this setting on, the recommendation script, styles, worker and Swiper are not part of the page at all. They download once, when the trigger you choose fires. Pages where no section is ever needed do not download them. If Wait for Privacy Consent is also on, recommendations wait for both the shopper’s consent and the trigger. Bundles keep loading on consent, as before.

Choose a trigger

Pick one under Start loading when:

Option	Loading starts when	Best for
A widget is near the screen (default)	An element matching Widget selector comes within 400px above or below the screen	Sections on the page, and sections in a slide-out cart drawer
An event fires	Your theme dispatches the Load event name on `window`	Full control, for example loading only when the cart drawer opens

The default Widget selector, [id^="rk-widget-"], matches the Glood app block and the section HTML you paste into a theme. You can list several selectors, separated by commas.
Loading starts shortly before a section scrolls into view, so it is usually ready by the time the shopper reaches it.
Cart drawer recommendations load when the drawer opens, because that is when their section comes onto the screen. A drawer parked just off the edge of the screen does not count as near.
Sections the theme adds later, such as a cart drawer rebuilt after add to cart, are picked up automatically.

If a section is placed with a location selector in the Glood dashboard instead of an app block or section HTML, the page has no rk-widget- element for it. Set Widget selector to that location instead, for example .cart-drawer__recommendations.

An event fires

Set Load event name, for example glood:load, and dispatch it from your theme when recommendations are needed:

// Load Glood recommendations the first time the cart drawer opens.
// 'cart:open' is an example: use the event or callback your theme provides.
document.addEventListener('cart:open', () => {
  window.dispatchEvent(new Event('glood:load'))
})

The event only needs to fire once per page. It can be the same event as Init Event Name (see Enable Custom Events) or a different one.

If the event never fires on a page, recommendations never load on that page.

What shoppers notice

A section further down the page downloads as the shopper scrolls toward it. The skeleton holds its space meanwhile, so nothing jumps.
In a cart drawer, the first open shows recommendations after a short download. Later opens are instant.

Check that it works

Open a product page in Chrome and open DevTools → Network. Filter by glood-ai-recommendations.
Reload the page.
- With on-demand loading on, there are no requests until you scroll toward a section or open the cart drawer, and then they appear once.
- With low priority on, the Priority column shows Low for the recommendation script and the worker. Right-click the column headers to show Priority if it is hidden.
For a before and after comparison, run Lighthouse in mobile mode with each setting off and on.

Troubleshooting

What you see	What to check
Sections never appear	With An event fires: is the event dispatched on `window`, with exactly the name in Load event name? With A widget is near the screen: does Widget selector match an element on the page?
Console: `GLOOD.AI: on-demand loading has an invalid selector, loading now.`	Fix Widget selector. Until then, recommendations load with the page.
Console: `GLOOD.AI: on-demand loading has no event name, loading now.`	Set Load event name. Until then, recommendations load with the page.
Everything loads straight away in the theme editor	Expected: the theme editor and Glood preview links always load immediately.
Theme code that calls `glood.loadPage` or `glood.loadSection` errors	These exist only after recommendations have loaded. Check first: `typeof window.glood?.loadPage === 'function'`.

Good to know

These settings only affect recommendations. Bundles keep their own Load Glood AI Bundles switch.
Pages with no Glood section make no recommendation requests at all when on-demand loading is on.
Both settings are off by default. Turning them off again restores the original loading behaviour.

Home

Get Started

Features

Upsell Offers

Guides

How It Works

Legal

What Glood loads on a page

Quick wins

Load recommendation scripts at low priority

Load recommendations on demand

Choose a trigger

A widget is near the screen

An event fires

What shoppers notice

Check that it works

Troubleshooting

Good to know

​What Glood loads on a page

​Quick wins

​Load recommendation scripts at low priority

​Load recommendations on demand

​Choose a trigger

​A widget is near the screen

​An event fires

​What shoppers notice

​Check that it works

​Troubleshooting

​Good to know

What Glood loads on a page

Quick wins

Load recommendation scripts at low priority

Load recommendations on demand

Choose a trigger

A widget is near the screen

An event fires

What shoppers notice

Check that it works

Troubleshooting

Good to know