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:

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 [e-mail], our team is here to provide guidance!