> ## Documentation Index
> Fetch the complete documentation index at: https://docs.glood.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Optimize Page Speed

> Keep Glood.AI recommendation scripts out of the initial page load, so your product images and theme load first.

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.

```mermaid theme={null}
flowchart TD
  A[Page loads] --> B[Theme, product images, Glood skeleton and bundles]
  A --> C{Trigger fires}
  C -->|A section comes within 400px of the screen| D[Recommendation script, styles, worker and Swiper download once]
  C -->|Your theme dispatches the load event| D
  D --> E[Sections render]
  E --> F[A cart drawer that is already open loads its recommendations too]
```

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 |

#### A widget is near the screen

* 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.

> [!NOTE]
>
> 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:

```javascript theme={null}
// 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](https://docs.glood.ai/guides/customization/enable-custom-events.md)) or a different one.

> [!WARNING]
>
> 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

1. Open a product page in Chrome and open **DevTools → Network**. Filter by `glood-ai-recommendations`.
2. 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.
3. 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.