Defer
What does defer mean and how is it used?
In web development, the term "defer" refers to an attribute in the <script> tag that delays the execution of JavaScript until the entire HTML document is fully loaded. This makes it possible to optimize the loading process of a web page by downloading the script but only executing it after the document has been fully parsed.
Does your website have a GDPR problem? Check now for free!
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 defer used?
The defer attribute is used to improve web page load times and optimize the user experience. Instead of blocking the rendering of the page while a script is running, defer ensures that the content of the web page can be displayed faster. This is particularly useful when the script performs DOM manipulations that are only relevant after the document has fully loaded.
What are the advantages of using Defer?
- Improved loading times:
By delaying script execution, the page can load faster, improving the user experience. - Rendering optimization:
scripts that manipulate the DOM are only executed after the document is fully loaded, which optimizes the rendering of the page. - Maintaining the order:
In contrast to asynchronous scripts(async), where the execution order is unpredictable,defermaintains the order of script execution.
Are there any challenges when using defer?
- Browser compatibility:
While modern browsers fully support thedefer attribute, there are older browsers that may not understand this attribute. Developers must ensure that websites also function correctly in older browsers. - Dependency of scripts:
If a script relies on another script that must be executed first, the use ofdefercan lead to problems if the order of execution is not handled correctly.
How is defer used in practice?
A typical example of using the defer attribute looks like this:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Example page</title><script src="script1.js" defer></script><script src="script2.js" defer></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 only executed after the HTML document has been fully loaded, whereby the order in which they are executed is retained.
Note on the use of CCM19
The CCM19 script should not be provided with the defer attribute, as this can impair the functionality of the Consent Manager. CCM19 must be executed as early as possible to ensure that scripts that require consent can be blocked first. This is crucial for the correct management of user consents and compliance with data protection regulations.
Does your website have a GDPR problem? Check now for free!
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
