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 recommendsmin-height: 200:px
on desktop and up to800: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]
Updated 21 days ago