Performance

Performance optimization is a key consideration when integrating BehaviourCode into your website. This section provides detailed guidance on how to minimize any potential performance impacts on your site’s page load, main thread usage, and bandwidth consumption while using BehaviourCode through CloudFront's CDN.

Page Load Optimization

To ensure BehaviourCode integrates smoothly without affecting page load times, it is crucial to load the CDN script early in the page's lifecycle. The BehaviourCode CDN is distributed globally via CloudFront to provide the fastest delivery times. By loading it before other resources, you can ensure the best performance while capturing user interactions in real time.

Best Practices for Page Load

  • Load the BehaviourCode CDN early: Place the script tag within the <head> section of your HTML, ideally before other JavaScript files to reduce delays.
  • Asynchronous loading: Use the async attribute to ensure BehaviourCode loads in parallel without blocking other resources.
  • Optimize rendering: Ensure your other critical CSS and JavaScript files are optimized so BehaviourCode can load and initialize quickly without interfering with the page rendering process.

Example: Add the following snippet in the <head> section of your HTML:

<script async src="https://cdn.behaviourcode.com/behaviourcode.js"></script>

This ensures that BehaviourCode's session recording functionality is initialized early and works without interrupting the page load.

Main Thread Usage

BehaviourCode interacts with browser APIs to monitor user activity and record sessions. While most of this work occurs asynchronously to minimize impact on your site's performance, some tasks still run on the main thread. The main thread is responsible for executing JavaScript, rendering the page, and handling user input, so it’s essential to minimize its workload to avoid sluggishness or poor user experience.

Optimizing Main Thread Usage

  • Early initialization: By initializing the BehaviourCode script early, you can ensure that event handlers and other tracking mechanisms are set up before other JavaScript tasks take up main thread resources.
  • Non-blocking operations: BehaviourCode performs most of its tracking asynchronously to avoid blocking the rendering of other page elements. However, when using custom configurations or additional features, ensure they don’t block critical rendering paths.
  • Performance monitoring: Continuously monitor the performance of the main thread using tools like Google Lighthouse or the browser's Developer Tools to ensure BehaviourCode doesn’t interfere with the page’s responsiveness.

Recommendation: Minimize heavy computations or DOM manipulations in custom scripts to ensure BehaviourCode runs smoothly in the background. This can help reduce the time it takes for your website to become interactive.

Bandwidth Usage

BehaviourCode is optimized to minimize bandwidth usage by reducing the size and frequency of data sent to the server. Using CloudFront's global edge network ensures that content is cached closer to your users, reducing latency and making session recordings faster and more efficient.

Best Practices for Bandwidth Usage

  • Data compression: Use data compression techniques to reduce the size of the recorded data that gets transmitted. BehaviourCode can be configured to only send data that is essential, ensuring minimal bandwidth consumption.
  • Data throttling: Adjust the frequency of session recordings and data uploads to prevent excessive bandwidth consumption during periods of high traffic or low importance.
  • Use of CloudFront: BehaviourCode uses CloudFront for caching, reducing the load on your server and minimizing bandwidth usage. Make sure your CDN settings are optimized for fast delivery and reduced latency.

Recommendation: Limit the volume of data being sent by excluding unnecessary DOM elements and inputs. This helps to keep session recordings efficient and ensures you’re only recording what’s necessary for your analysis.

Why Early Script Loading Matters

BehaviourCode relies on wrapping browser APIs and registering event handlers to function correctly. Loading the script early ensures that these APIs are correctly wrapped before the page fully loads, enabling BehaviourCode to start capturing user sessions from the moment the page begins rendering. This is particularly important to avoid any gaps in session recording or missed interactions.

Advantages of Early Loading

  • Complete tracking: Ensures all user interactions, including the first interaction with the page, are captured in the session recording.
  • Improved performance: Loading early allows BehaviourCode to run without interference from other scripts, reducing the chance of blocking other resources.
  • Quick initialization: BehaviourCode will initialize faster, allowing you to start gathering data for analytics or debugging sooner.

Example: Ensure the BehaviourCode CDN script is added to the <head> of your HTML with the async attribute to load it quickly and efficiently:

<script async src="https://cdn.behaviourcode.com/behaviourcode.js"></script>

Additional Performance Tips

Here are some extra tips for maintaining the best possible performance when using BehaviourCode on your site:

  • Lazy load non-critical resources: Consider lazy loading non-essential JavaScript files or images to prioritize critical resources.
  • Monitor user interaction: Track how user interaction impacts performance and ensure session recordings don't degrade the user experience.
  • Test regularly: Use tools like Google PageSpeed Insights or Lighthouse to regularly monitor the performance impact of BehaviourCode and other third-party services.

Still Have Questions?

If you need further assistance optimizing your site's performance with BehaviourCode, don't hesitate to contact our support team. We're here to help ensure seamless integration while maintaining high performance!