Understanding Script Types: Asynchronous vs. Synchronous
Because scripts can load in two ways—Asynchronous (our standard, default method) and Synchronous (our new, recommended method).
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:
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
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 support@trybecause.com, our team is here to provide guidance!
Last updated