Skip to content

Implement conditional asset loading for CSS libraries #771

@jjroelofs

Description

@jjroelofs

Proposal

Several CSS and JS libraries are currently loaded on every page regardless of whether they are needed. This impacts Core Web Vitals (LCP, CLS) for all sites using the theme.

The following assets are loaded unconditionally (acknowledged with @todo Include only if needed comments in dxpr_theme.theme):

  • Bootstrap 5 override CSS (dxpr_theme.theme:254) — loaded even when Bootstrap 5 components aren't on the page
  • Enhanced dropdowns (dxpr_theme.theme:261) — loaded even when no dropdown menus exist on the page
  • Drupal Webform CSS (dxpr_theme.theme:265) — loaded even when the Webform module is not installed
  • DXPR Builder CSS (dxpr_theme.theme:265) — loaded even when the Builder module is not installed

Proposed solution

Implement conditional #attached logic in dxpr_theme_preprocess_page() or hook_page_attachments_alter() to:

  1. Only attach webform CSS when the webform module is installed (\Drupal::moduleHandler()->moduleExists('webform'))
  2. Only attach DXPR Builder CSS when dxpr_builder module is installed
  3. Only attach enhanced-dropdowns library when a menu block with dropdowns is present on the page
  4. Evaluate whether Bootstrap 5 overrides can be scoped more narrowly

Expected impact

  • Reduced CSS payload on pages that don't use these features
  • Improved Lighthouse performance scores
  • Better Core Web Vitals, particularly for content-heavy landing pages

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions