Skip to content
Ayra Customer Retention Platform
Ayra Docs

Storefront bundle & performance

Ayra loads one deferred core script of at most 15 KB gzipped through the app embed, and each theme app block loads its own code of at most 25 KB gzipped only when that block is on the page and visible. Blocks render their first paint from Liquid, so nothing waits on JavaScript; the scripts fetch customer state after load and hydrate in place. There are no third-party scripts, no fonts, no inline styles beyond a block’s own stylesheet, and no ScriptTags. The budgets are checked in Ayra’s build; a block that exceeds its budget does not ship.

Budgets

Section titled “Budgets”
AssetBudget (gzipped)Loaded byWhen
Core (ayra-core.js)≤ 15 KBApp embed, deferEvery page the embed is on; cached across pages
Core styles≤ 3 KBApp embed, non-blockingWith the core
Each block’s script≤ 25 KBThe block, on first visibilityOnly if the block is on the page
Each block’s styles≤ 4 KBThe block’s Liquid, inline <style> with a nonceWith the block’s first paint
Web pixel≤ 2 KBShopify’s pixel sandboxIndependent of the theme

The budgets apply per asset, not in total, because a page rarely has more than two blocks.

How it loads

Section titled “How it loads”
  1. The app embed emits one <script defer> for the core and one <link rel="preload" as="fetch"> for the shop’s public settings (ayra.settings_public), which is tiny and cached.
  2. Blocks render from Liquid immediately: labels, earn ratio and tier list come from shop metafields, so the markup is complete before any script runs. Customer-specific numbers show a neutral state for guests and are filled in after identification.
  3. After DOMContentLoaded, the core identifies the customer (signed-in customers through Shopify’s customer object, guests by a first-party cookie only after an identifying action), fetches wallet state once, and dispatches ay:ready, ay:customer and ay:wallet.updated (see Events).
  4. Each block registers an IntersectionObserver; its script is fetched when the block comes within one viewport of view, then it hydrates in place with no layout shift.
  5. The floating wallet launcher, if enabled, is part of the core and renders after ay:ready.

What it never does

Section titled “What it never does”
  • Block rendering or inject anything before first paint.
  • Load fonts, analytics, or any script from a domain other than Ayra’s CDN and Shopify.
  • Read or write other apps’ cookies or storage, or the theme’s DOM outside its own blocks.
  • Run on checkout; checkout uses Shopify’s extensions sandbox (Checkout extensions).
  • Change behaviour when the customer has reduced motion on; block animations are off under prefers-reduced-motion.

Checking it yourself

Section titled “Checking it yourself”
  • Network panel: filter by ayra. You should see the core, the settings fetch, and one script per visible block. Sizes are shown gzipped by the browser.
  • Lighthouse: run it on a product page with and without the app embed. The difference should be inside the run-to-run noise; if it is not, tell us with the report.
  • Shopify’s theme app extension inspector (theme editor → App embeds → Ayra) lists the assets the embed registers.
Section titled “Related”

Something missing or wrong on this page? Ask us and we will fix the docs.