Skip to main content

Async Loading

DataGrail Consent loads asynchronously by default. The loader script uses the async attribute, which means your page continues rendering and parsing HTML while the consent script is fetched and initialized in the background.

Performance Comparison​

The following diagrams illustrate how async loading differs from a traditional synchronous approach.

Synchronous (Blocking) Load​

In a synchronous model, a <script> tag without async or defer halts the HTML parser until the script is fetched and executed. Nothing below the tag renders until the script finishes.

Asynchronous (DataGrail) Load​

With async loading, the browser never pauses HTML parsing. The consent script is fetched and executed off the critical rendering path.

Side-by-Side​

Impact Summary​

The table below compares key performance metrics between synchronous and async loading approaches.

MetricSynchronousAsync (DataGrail)
Parser blockedYes (fetch + execute duration)Never
DOMContentLoadedDelayed until after scriptFires on schedule
Time to InteractiveDelayedUnaffected
Largest Contentful PaintDelayed by scriptUnaffected
Third-party script releaseInline, blockingCallback, non-blocking

Controlled Script Behavior​

Third-party scripts that require consent are held until DataGrail determines the user's consent state. Once resolved:

  • Consent granted: scripts execute via callback — no page reload required.
  • Consent denied: scripts remain blocked and never execute.
  • Returning visitor with stored preferences: consent state is read from the stored cookie, and scripts are released immediately after consent.js initializes (still non-blocking).

This callback-based approach keeps controlled scripts off the critical path regardless of consent outcome.

Best Practices​

Follow these guidelines to ensure optimal async loading behavior:

  • Place the loader script in the <head> to start the fetch early.
  • Do not add defer to the loader — async is the correct attribute for this use case.
  • Avoid wrapping the loader in conditional logic (e.g., document.write) that would force synchronous behavior.
  • If using a tag manager alongside DataGrail, ensure the tag manager does not load consent-loader.js synchronously.

 

Need help?
If you have any questions, please reach out to your dedicated Account Manager or contact us at support@datagrail.io.

Disclaimer: The information contained in this message does not constitute as legal advice. We would advise seeking professional counsel before acting on or interpreting any material.