Optimizing web performance

alby prioritizes web performance as a critical technical requirement. The architecture is designed with Core Web Vitals optimization in mind, specifically addressing CLS (Cumulative Layout Shift), LCP (Largest Contentful Paint), and INP (Interaction to Next Paint). These metrics are quantifiable performance indicators that have measurable impacts on search engine indexing algorithms, user session duration, and conversion rates.

The alby launcher script is 78 KB and only loads the components you use — the average total footprint stays well under 200 KB.

This article covers:

Technical architecture of the alby widget
Core Web Vitals optimization: CLS, LCP, and INP considerations
Best practices for embedding it on your site

Technical details

Unlike many third-party tools that inject UI into the DOM dynamically, the alby launcher script gives you full control over when and where it appears.

The launcher script

<script async src="https://cdn.alby.com/apps/launcher/embed.js?brandId=[BRAND-ID]"></script>

What it does:

Registers all alby Web Components on the page
Handles lightweight user provisioning
Loads gzipped JS from a global Content Delivery Network (CDN)

This script does no inject any DOM elements. You choose the pages, elements, and positions where components appear.

Using alby Web Components

Once the loader script has run, you can use alby Web Components just like any other HTML element:

<alby-widget
  product-id="456"
  test-mode="true"
/>

Performance optimizations

1. Small-sized Resources

alby is built using Stencil.js, which outputs Web Components without relying on large client-side frameworks. The compiled output is small and fast, making it well-suited for embeddable e-commerce widgets.

alby avoids large JS libraries or UI frameworks in favor of vanilla JavaScript.

2. Caching

The launcher script and widget bundles are delivered through a global CDN for fast access around the world. Files are versioned so browsers can store them indefinitely and only fetch updates when necessary.

3. Approximate asset sizes (compressed)

Launcher script: 78 KB
Component loader: 8 KB
Individual component chunks: 0.5 KB–20 KB

Best Practices for Core Web Vitals

The widget placement directly impacts Core Web Vitals metrics. Implementation details below provide technical guidance for optimizing CLS, LCP, and INP:

Layout stability (CLS)

Place widgets below-the-fold or in predictable layout areas where shifting won’t disrupt the user flow, avoid injecting widgets above-the-fold unless space is pre-reserved.
Reserve space using min-height or fixed dimensions to avoid layout shifts. alby recommends min-height: 200:px on desktop and up to 800:px on smaller devices if the widget expands vertically.

Example

<div style="min-height: 200px;">
  <alby-generative-qa product-id="100000"></alby-generative-qa>
</div>

Lazy loading (LCP + INP)

Use IntersectionObserver to defer widget rendering until it enters the viewport:

const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    const el = document.createElement('alby-generative-qa');
    el.setAttribute('product-id', '123');
    document.getElementById('alby-container').appendChild(el);
    observer.disconnect();
  }
});
observer.observe(document.getElementById('alby-container'));

For simpler cases, delay the launcher script until after DOMContentLoaded:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const script = document.createElement("script");
    script.src = "https://cdn.alby.com/apps/launcher/embed.js?brandId=[BRAND-ID]";
    script.async = true;
    document.head.appendChild(script);
  });
</script>

Have questions or want us to review your implementation? Reach out to [email protected]