Understanding Script Types: Asynchronous vs. Synchronous
When using the Because platform on Shopify, our scripts can load content in two distinct ways: asynchronous (our standard approach) and synchronous (currently in beta).
Each method has unique characteristics that impact how content appears on your site. Here’s a clear breakdown of what each script type does and how it works.
Asynchronous Script (Standard Implementation)
What is it?
An asynchronous script waits for the page to fully load before injecting Because content. This ensures that it doesn’t impact site speed metrics but can occasionally result in a delayed visual experience.
How It Works for Your Site:
Because content loads after everything else on the page, making it independent of your theme.
It’s a low-risk solution with minimal chances of interfering with your site’s functionality.
Benefits:
✅ Simple Setup: Uses standard Shopify permissions, requiring no theme changes.
✅ No Impact on Site Speed: Loads content post-page load, ensuring minimal effect on performance.
✅ Low Risk: Operates independently from other elements on your site.
Trade-Offs:
⚠️ Perceived Delays: Because content waits for the page to load, it can appear slower if other scripts delay the site.
⚠️ Visual Disruptions: Loading content post-page can cause:
Flicker: Content loads in after the rest of the page has loaded and after your campaign rules have successfully been met. This can look like a “flicker.”
Content Shift: Since content injects above or below your selectors on your page (like buttons or other widgets), it can create what feels like a content shift - to make room for the new content.
Synchronous Script (Beta Implementation)
What is it?
The synchronous script loads Because content immediately as the page begins to load, reducing delays and visual disruptions like flicker.
How It Works for Your Site:
Content is injected right away, bypassing delays caused by other scripts.
It can minimize visual issues, particularly for high-visibility elements like top bars or badges.
Benefits:
✅ Faster Content Delivery: Content appears seamlessly as the page loads.
✅ Reduced Visual Disruptions: Flicker and content shifting are less noticeable due to faster injection.
✅ Supports Future Features: Paves the way for unified functionality, like image replacement testing (currently in beta).
Trade-Offs:
⚠️ Requires Initial Setup: The synchronous script involves a one-time edit to your theme.liquid file and elevated permissions (themes_read and themes_write). This process is being streamlined for future ease.
⚠️ Integration with Other Scripts: On the first page load, the synchronous script may load earlier than other scripts, like Klaviyo. This can cause the initial load to behave as though the user isn’t yet identified.
Sync Script Integration and Klaviyo
When the Sync Script is used in combination with Klaviyo, here’s how it works:
Initial Load Behavior:
The Sync Script often loads earlier than Klaviyo because it’s placed in the <head> tag for faster content delivery.
On the first page load, if Klaviyo hasn’t finished identifying the user, the Sync Script will temporarily act as if the person isn’t identified, meaning Klaviyo-specific rules won’t yet apply.
Continuous Updates:
The Sync Script checks for updates to the Klaviyo cookie for a few seconds.
Once the user is identified by Klaviyo, the Sync Script captures the person ID and stores it in its own cookie for future use.
Subsequent Loads:
On future page loads, the Sync Script uses either the Because cookie or the updated Klaviyo cookie to access Klaviyo data.
This ensures Klaviyo-specific rules work as expected after the first load.
This integration allows the Sync Script to work seamlessly with Klaviyo while reducing delays and improving overall user experience.
Key Differences at a Glance
Feature
How Content Loads
Site Speed Impact
Visual Disruptions
Setup Requirements
Asynchronous Script
After the page has fully loaded.
None; loads post-page load.
Possible flicker or content shift.
Simple; no theme file changes needed.
Synchronous Script (Beta)
Immediately as the page loads.
Minimal; loads alongside the page.
Reduced flicker and shifting.
Requires a one-time theme edit.
Why Does This Matter?
Understanding the difference between asynchronous and synchronous scripts helps you recognize how Because content behaves on your site. While the asynchronous approach prioritizes simplicity and performance neutrality, the synchronous script reduces visual disruptions by injecting content faster.
SEO, Performance, and Accessibility Considerations
SEO Impact
Because’s asynchronous script is designed to have minimal impact on SEO. It loads after the main content, preserving critical elements like H tags, image names, and alt text, which are essential for search engine optimization.
Script Size and Performance
The Because script is lightweight, with a size of 63KB. Its asynchronous nature ensures it doesn’t block the main thread, contributing to faster page load times and improved performance metrics.
Cumulative Layout Shift (CLS)
Because’s asynchronous script loads content after the initial page load, minimizing unexpected layout shifts. This approach helps maintain a stable visual experience, aligning with best practices for reducing CLS.
Accessibility
By default, Because inherits your site’s theme styling, ensuring consistency and compliance with accessibility standards. You have full control over design settings, allowing you to maintain or enhance accessibility features as needed.
Here’s your updated GitBook-friendly summary based on the transcript, including the revised “Bottom Line” section in a clear, customer-friendly table format:
🧪 Sync Script: What We’ve Learned So Far
We recently tested a new way of loading Because content—called the Sync Script—on several customer stores. Here’s a simple breakdown of what we learned.
✅ What’s Good
Content appears immediately: Campaigns load with the page, improving the overall visual experience.
Reduces flicker and layout shifts: Because content feels more “native” to the page.
No impact to First Contentful Paint (FCP): Our tests showed that the initial visible content loads just as fast with Sync Script.
⚠️ What to Watch
CLS (layout shift) varies based on setup: If your store uses many dynamic elements like top bars, layout shifts can increase slightly. Otherwise, Sync Script typically holds steady.
Theme-level implementation required: Sync Script requires editing your theme.liquid file.
💡 Bottom Line: Should You Use Sync Script?
Store Characteristics
Recommended Script Type
Why
Fast site with minimal third-party scripts
Async Script
Keeps performance light and clean; Because content loads slightly later but without disrupting performance.
Fast site with lots of third-party scripts
Sync Script
Sync Script jumps the queue and loads early, avoiding being deprioritized by other heavy scripts.
Slower site with minimal external dependencies
Sync Script
Sync Script can help reduce visible flicker even if the base site is slower, provided few third-party conflicts exist.
Slower site with many third-party scripts
⚠️ Use With Caution
Because may appear to load slowly due to general site performance; Async might be safer unless optimization is prioritized.
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