Async
What does async mean and how is it used?
The term "async" (short for "asynchronous") is used in web development to describe an attribute in the <script> tag that enables JavaScript scripts to be executed asynchronously.
This means that the script is downloaded and executed independently of the HTML document being loaded. In contrast to conventional scripts, which block the loading and rendering of the page, an asynchronous script is executed in parallel with the loading of the page.
Free cookie, GDPR and TDDDG risk scanner
How high is the risk of fines for your website? Enter your website address now and find out which cookies and third-party services pose a risk.
Why is async used?
The async attribute is used to improve the performance of websites. Since asynchronous scripts do not block the page from loading, the content is displayed faster, which significantly improves the user experience.
This is particularly important for websites that use a lot of external scripts, such as tracking codes or advertisements.
What are the benefits of using Async?
- Accelerated page load times:
Asynchronous scripts load and execute in parallel with the rest of the page, resulting in faster loading times. - Independent execution:
As the scripts are executed independently of each other, loading one resource cannot block the others, resulting in a smoother and more efficient loading experience. - Optimization for content sites:
Websites that rely heavily on external resources can use async to improve their load times and user experience.
Are there any challenges when using async?
- Unpredictable execution order:
Since asynchronous scripts are executed in the order in which they are loaded, this can lead to problems if the order of the scripts is important. This can lead to errors, especially if one script is dependent on another. - Compatibility with older browsers:
Although async is supported by most modern browsers, it can cause problems in older browsers.
How is async used in practice?
A typical example of using the async attribute looks like this:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Example page</title>
- <script src="script1.js" async></script>
- <script src="script2.js" async></script>
- </head>
- <body>
- <h1>Welcome to my website</h1>
- <p>This is a sample page.
- </p></body></html>
In this example, the scripts script1.js and script2.js are loaded and executed asynchronously, regardless of the order in which they appear in the document or when they are fully loaded.
Note on the use of CCM19
The CCM19 script should not be provided with the async attribute, as this may impair the functionality of the Consent Manager. CCM19 must ensure that all necessary consents are obtained before loading other scripts. It should therefore be executed early and in the correct order in order to implement the data protection regulations correctly.
