Modern websites often rely on JavaScript to provide interactive features, analytics, forms, and dynamic content.
However, JavaScript files can affect page loading performance if they prevent the browser from rendering page content while scripts are being downloaded and executed.
The defer attribute helps reduce this problem by allowing browsers to continue processing the page while JavaScript files are loading in the background.
Table of Contents
What Is the defer Attribute?
The defer attribute is used with external JavaScript files.
For example:
<script src="app.js" defer></script>
When a browser encounters a deferred script, it downloads the file while continuing to process the HTML document.
The script is executed only after the HTML document has been fully parsed.
Why Is defer Useful?
Without the defer attribute, browsers may pause HTML processing while JavaScript files are downloaded and executed.
This can delay page rendering and increase loading times.
Using defer helps improve the user experience because page content can appear sooner while scripts continue loading in the background.
How defer Works
When a deferred script is encountered:
- The browser begins downloading the script.
- HTML parsing continues without interruption.
- The browser finishes processing the HTML document.
- Deferred scripts are executed in the order they appear.
- The page finishes loading normally.
This approach allows content to become visible more quickly without breaking script execution order.
defer vs. async
defer ≠ async
Both attributes improve JavaScript loading behavior, but they work differently.
| defer | async |
|---|---|
| Downloads in parallel with HTML parsing | Downloads in parallel with HTML parsing |
| Executes after HTML parsing is complete | Executes immediately after download |
| Preserves script order | Does not guarantee script order |
| Suitable for scripts that depend on page structure | Suitable for independent scripts |
Choosing the correct option depends on how the script interacts with the page.
Common Use Cases
The defer attribute is commonly used for:
- Website functionality scripts
- User interface components
- Form validation
- Analytics tools
- Third-party integrations
- Content management systems such as WordPress
It is particularly useful when scripts need access to page elements that may not yet exist during initial loading.
Practical Implications
Using defer can improve page loading performance by reducing render-blocking behavior.
However, not every script should be deferred. Some scripts may need to execute immediately, while others may depend on different loading strategies.
When optimizing website performance, it is important to test changes and verify that all functionality continues to work as expected.
Summary
The defer attribute allows browsers to download JavaScript files without interrupting HTML processing. By delaying script execution until after the document has been parsed, it can improve page loading performance and help create a smoother user experience.