Skip to content

Header vs Footer Loading

When to Use

When JavaScript affects critical rendering or initial page display.

Decision

Default: Load in footer (after HTML parsing). Only load in header for JS that must execute before page render. Since Drupal 8, footer is the performance-optimized default.

Pattern

Footer loading (default, no configuration needed): 

feature:
  js:
    js/feature.js: {}  # Loads in footer by default

Header loading (rare, only for critical UI): 

critical:
  header: true          # library-level key, a sibling of js: and version:
  version: VERSION
  js:
    js/critical.js: {}

Defer attribute (best practice for most JavaScript): 

enhanced:
  js:
    js/enhanced.js:
      attributes:
        defer: true  # Loads async, executes after DOM ready

Reference discussion: https://www.drupal.org/project/drupal/issues/784626

Common Mistakes

  • Loading non-critical JS in header - WHY: Blocks HTML parsing, delays page render, poor Core Web Vitals
  • Using header: true by default - WHY: Footer is faster for user experience
  • Not using defer attribute - WHY: Misses performance optimization opportunity
  • Mixing defer with header placement - WHY: Defeats purpose of defer, creates confusion

See Also