Guides

Performances

Suggest Edits

SDK Performance Documentation

Performance is one of our main focuses at JOIN. As a third-party integrated script, we understand the importance of optimizing our script to minimize its impact on your website while ensuring a smooth experience for your customers.

Table of Contents

  1. Lightweight Script
  2. Resources
  3. Web Core and Implementation

Lightweight Script

Widget-Specific Script

The script you load to display widgets on your website is designed to be as lightweight as possible. Each widget's script is rewritten every time the widget is updated, allowing us to bundle only the data needed for that particular widget.

Examples of script sizes (based on our customers in 2024):

  • Carousel:
    • Bubbles: 22 kB
    • Squares: 26 kB
    • Cards: 32 kB
  • Sticky: 20.5 kB

Note: These values can vary depending on your widget settings and the stories associated with the widget.

Code Splitting

We have implemented code splitting so that only the code required to display the main element (carousel or sticky UI) is loaded initially. The rest of the widget is loaded asynchronously to prevent slowing down your website.

  • The player used to display the story once opened is loaded only after the main script.
  • All interactions with a story are loaded separately from the main script and only if required.

Sizes of additional scripts:

  • Player: 45 kB
  • Interactions: 1 to 2 kB for each interaction type in the stories

Reduced Number of Calls

To avoid delays in rendering stories due to multiple XHR calls—which can lead to deprioritization—we embed all the necessary data directly into the script. This means no additional calls are required to display the stories.

Once the widget is loaded, we use the Beacon API for our analytics system to minimize the impact on your website.

Resources

All resources are served through a CDN to ensure optimal performance with minimal impact on your assets.

On-the-Fly Image Processing

We use on-the-fly image processing powered by Cloudflare to optimize images according to the user's display size and the compression algorithms available in the user's browser. This approach prevents wasting bandwidth on oversized images and uses optimal compression for faster page loads.

Video Cover

For video covers on your widget, we encode videos in multiple dimensions so we can use the best one for your widget format. We have also updated our widget UX to play only one cover video at a time, combining performance and design.

Video Prefetching

Over the past four years, we have been iterating to create cutting-edge prefetching technology to ensure the best user experience with minimal impact on your website's performance. We continue to improve this technology daily.

Web Core and Implementation

Cumulative Layout Shift (CLS)

To ensure a smooth user experience and prevent Cumulative Layout Shift (CLS) on your website, we include the necessary styles directly with the script. This ensures that all visual elements of the widget are properly styled from the moment they are rendered, avoiding unexpected layout changes as the page loads. By embedding styles with the code, we maintain visual stability and enhance overall performance.

🚧

Remember to update your integration when changing the widget's shape or size.

Asynchronous Script Loading

If the widget is located above the fold (visible upon initial page load), we do not recommend loading the script asynchronously, as it could delay the display of the widget and degrade the user experience. However, if the widget is placed below the fold, asynchronous loading can be used without negatively impacting the user experience. This approach allows the script to load later, improving performance for other parts of your website.

To make the script asynchronous, add async to the script tag:

<script src="your-widget-script.js" async></script>

Updated about 2 months ago