# 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! --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://because.gitbook.io/because/the-because-platform/understanding-script-types-asynchronous-vs.-synchronous.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.