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 pops in after the rest of the page has loaded, creating a glitchy appearance.
Content Shift: Injected content moves other elements, such as buttons, impacting user experience.
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.
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.
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