> For the complete documentation index, see [llms.txt](https://because.gitbook.io/because/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://because.gitbook.io/because/the-because-platform/understanding-script-types-asynchronous-vs.-synchronous.md). # Understanding Script Types: Asynchronous vs. Synchronous Each method has unique trade-offs depending on your store’s goals, performance setup, and visual experience requirements. Here’s a clear breakdown of what each script type does and how it works. *** ## **Asynchronous Script (Standard)** #### **What It Is** The asynchronous script loads Because content *after* your Shopify store’s main content finishes loading. It’s designed to minimize performance impact while ensuring campaign content is injected dynamically based on your page structure. #### **How It Works** * Because content loads separately, after your page is fully rendered. * Most campaigns are triggered by page elements (selectors), meaning the content injects either above or below existing sections once the page has loaded. #### **Benefits** * ✅ **Simple Setup** – Requires no theme edits; installed via Shopify App Store * ✅ **No Impact on FCP** – Content loads after the main page, leaving your First Contentful Paint unaffected. * ✅ **Theme-Safe** – Operates independently of your core theme structure. #### **SEO Impact** Because’s asynchronous script is designed with SEO in mind. It loads after the primary content, preserving critical on-page elements such as: * Heading tags (H1, H2, etc.) * Alt text on images * Structured content important for search engine indexing This ensures your store’s organic visibility is not affected. #### **Script Size and Performance** The Because script is lightweight, with a file size of **63KB**. Its asynchronous load strategy: * Avoids blocking the main thread * Helps improve overall page speed * Plays well with other scripts, keeping Lighthouse and PageSpeed scores strong #### **Cumulative Layout Shift (CLS)** Async script minimizes layout shifts by loading content *after* your theme elements have rendered. However, because campaigns often “add” content into the page, small shifts can occur—particularly when: * Content is injected above/below fixed page sections * Campaigns like top bars or badges load in late These shifts are minor and align with Google’s CLS best practices. #### **Accessibility** Because content is styled to match your theme by default. This ensures: * Consistent design with the rest of your store * Accessibility compliance for screen readers, contrast, and semantic structure * Full design customization control so you can enhance or preserve accessibility standards #### **Trade-Offs** * ⚠️ **Delayed Visuals** – Because content appears after the page loads, which can result in a brief flicker. * ⚠️ **Possible Layout Shifts** – Some shifting may occur due to content being added dynamically based on selector positioning after the page is loaded. *** ## **Synchronous Script (Recommended – New)** #### **What It Is** The synchronous script injects Because content *during* the initial page load, resulting in a smoother and more immediate visual experience. #### **How It Works** * Content is rendered alongside your Shopify theme’s main code. * Great for sites with many third-party scripts or heavy content that causes delays. #### **Benefits** * ✅ **Faster Visual Experience** – Content appears immediately with the rest of your page. * ✅ **Reduces Flicker & Shift** – More seamless for high-visibility campaigns. * ✅ **No Impact on FCP** – Testing showed < 0.1s change in First Contentful Paint. #### **Trade-Offs** * ⚠️ **Requires Manual Theme Edit** * ⚠️ **Layout Shift Varies** – Some shift may occur if stacking multiple top bars; average CLS change observed was **\~0.065**. #### **What We’ve Learned from Sync Script Testing** Tested over 3 months with 10+ merchants: | Metric | Results | | --------------------------------- | ------------------------------------------- | | **FCP (First Contentful Paint)** | < **0.1s** change across all stores | | **CLS (Cumulative Layout Shift)** | Average **\~0.065**, mostly due to top bars | | **Overall Performance** | Minimal-to-no impact observed | Sync Script is especially beneficial for stores with complex layouts or third-party scripts. *** ### **🔍 Key Differences at a Glance** | Feature | | | | -------------------- | -------------------- | ------------------------------------------ | | **Load Timing** | After page load | During page load | | **Visual Stability** | May flicker or shift | Minimal flicker/shift | | **Setup Complexity** | No theme edits | Manual theme edit required | | **Impact on FCP** | None | < 0.1s change | | **CLS Impact** | Minimal | Avg \~0.065 | | **Script Size** | 63KB | 63KB | | **Best For** | Simpler setups | Sites with 3rd-party scripts or dynamic UX | *** ### **🧭 Which Script Is Right for You?** | Fast store with few third-party scripts | **Asynchronous** | | --------------------------------------------------- | ---------------- | | Store with multiple third-party scripts | **Synchronous** | | Site struggling with visual flicker or layout jumps | **Synchronous** | | Sites with limited developer access | **Asynchronous** | *** ### Need Assistance? If you have further questions or are curious about the synchronous beta script, please feel free to contact us at , our team is here to provide guidance!