Deferring non-critical CSS/JS with async or deferfor Drupal 8 , 9 , 10 , and 11

Home » Performance Optimization » Deferring non-critical CSS/JS with async or defer
Last updated :  
8.x , 9.x , 10.x , 11.x

Introduction

Building on our previous discussions about enhancing Drupal's performance with methods like preloading and preconnecting assets, this lesson will explore deferring non-critical CSS and JavaScript. Leveraging the async and defer attributes allows you to optimize the loading sequence of scripts and CSS, improving page load times and overall user experience.

Understanding Async and Defer Attributes

The async and defer attributes are used in HTML <script> tags to manage when JavaScript files load and execute relative to the rest of the HTML document.

Async

  • Purpose: Loads the script asynchronously, meaning it will load simultaneously with other resources.
  • Execution: Once fetched, the script executes immediately, which may cause render-blocking if it alters the DOM significantly.

Defer

  • Purpose: Loads the script asynchronously like async.
  • Execution: Unlike async, the script executes after the HTML document is fully parsed. This prevents the script from blocking rendering.

Implementing Async and Defer in Drupal

Here's how you can implement these attributes to optimize your site's performance:

  1. Assess Your Scripts

    Identify scripts loaded on your Drupal site. Categorize them based on their need to be loaded immediately (e.g., analytics scripts) or those that can load later (e.g., non-critical enhancements).

  2. Modify Script Tags

    Adjust the relevant <script> tags in your theme or module files to include async or defer. For example:

    
<script src="path/to/non-critical-script.js" async></script>
<script src="path/to/deferred-script.js" defer></script>

    Use async for scripts where independence from the DOM is guaranteed, and defer for scripts dependent on the page’s full structure.

  3. Automate using Drupal's Asset Libraries

    In your module’s .libraries.yml, define the scripts with their loading strategy:

    
my_script:
  js:
    js/script.js: { attributes: { defer: true }, weight: 10 }

Testing and Validation

  • Performance Analysis: Use tools like Google PageSpeed Insights or GTmetrix to validate improvements in load times and detect any render-blocking scripts.
  • Functional Testing: Ensure that all site functionality remains intact, especially those relying on deferred scripts.
  • Consistency Check: Verify cross-browser functionality to ensure that async and defer attributes work as expected across all user environments.

Considerations and Best Practices

  • Cautious Application: Async and defer should be applied carefully—test after implementation to ensure page functionality is unaffected.
  • Script Dependencies: Be aware of scripts that are dependent on each other; misapplication might result in errors if dependent scripts execute prematurely.
  • Regular Monitoring: As your site evolves, periodically reassess and adjust the deferred and asynchronous scripts accordingly.

Conclusion

By harnessing the async and defer attributes, you can significantly reduce the perceived and actual loading times of your Drupal site. This approach maintains user engagement by ensuring essential content loads promptly while still taking advantage of script-based interactions.

Next in the Series

Our upcoming lesson will delve into Advanced Caching Techniques with Drupal, where we will explore leveraging Drupal’s built-in caching mechanisms for peak performance. Stay tuned for more optimization insights!