Fix INP in Drupal

# themes/custom/mytheme/mytheme.libraries.yml

article-interactions:
  version: 1.x
  js:
    js/article-interactions.js: { minified: false, attributes: { defer: true } }
  dependencies:
    - core/drupal
    - core/once

listing-filters:
  version: 1.x
  js:
    js/listing-filters.js: { minified: false, attributes: { defer: true } }
  dependencies:
    - core/drupal
    - core/drupalSettings

# Attach ONLY on the article template.
# themes/custom/mytheme/templates/page--article.html.twig
#
# {{ attach_library('mytheme/article-interactions') }}
#
# On page--taxonomy-term--tag.html.twig attach 'mytheme/listing-filters' instead.
# Neither library ships on unrelated routes -- Drupal's aggregator produces a
# per-template bundle keyed by the attached libraries set.

# Compare aggregated JS payload across templates
$ curl -s https://example.com/article/hello | grep -oE 'js_[a-f0-9]+\.js' | sort -u
$ curl -s https://example.com/tags/drupal   | grep -oE 'js_[a-f0-9]+\.js' | sort -u

# The article and taxonomy pages should reference DIFFERENT aggregated files.
# If both reference the same file, the library is still attached globally --
# grep the .theme and .module files for 'library_info_alter' overrides.

# Measure the delta in total parsed JS bytes
$ curl -s https://example.com/tags/drupal | \
    grep -oE 'src="[^"]*\.js"' | \
    awk -F'"' '{print $2}' | \
    xargs -I{} curl -sI "https://example.com{}" | grep -i content-length

<?php
// modules/custom/mymodule/mymodule.module

/**
 * Implements hook_page_attachments_alter().
 *
 * Adds defer=true to analytics and third-party libraries so they do not
 * block the interaction path, and swaps GTM to an idle-callback loader.
 */
function mymodule_page_attachments_alter(array &$attachments) {
  $defer_libraries = [
    'google_analytics/google_analytics',
    'google_tag/gtag',
    'hotjar/hotjar',
    'contextual/drupal.contextual-links',
    'toolbar/toolbar',
  ];

  foreach ($attachments['#attached']['library'] ?? [] as $lib) {
    // Nothing to do here -- library attributes come from the .libraries.yml
    // declaration. Instead, override via hook_library_info_alter below.
  }

  // Idle-schedule GTM: replace the direct script tag with a loader stub.
  if (!empty($attachments['#attached']['html_head'])) {
    foreach ($attachments['#attached']['html_head'] as $key => &$item) {
      if (isset($item[0]['#tag']) && $item[0]['#tag'] === 'script'
          && strpos($item[0]['#value'] ?? '', 'googletagmanager.com/gtm.js') !== FALSE) {
        $item[0]['#value'] = <<<'JS'
(function(){
  var load = function(){
    var s = document.createElement('script');
    s.async = true;
    s.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXX';
    document.head.appendChild(s);
  };
  if ('requestIdleCallback' in window) {
    requestIdleCallback(load, { timeout: 4000 });
  } else {
    setTimeout(load, 3000);
  }
})();
JS;
      }
    }
  }
}

/**
 * Implements hook_library_info_alter().
 *
 * Adds defer=true to the JS files of non-critical libraries.
 */
function mymodule_library_info_alter(array &$libraries, $extension) {
  $targets = [
    'google_analytics' => ['google_analytics'],
    'google_tag'       => ['gtag'],
    'hotjar'           => ['hotjar'],
    'contextual'       => ['drupal.contextual-links'],
  ];
  if (!isset($targets[$extension])) {
    return;
  }
  foreach ($targets[$extension] as $lib_name) {
    if (!isset($libraries[$lib_name]['js'])) {
      continue;
    }
    foreach ($libraries[$lib_name]['js'] as &$def) {
      $def['attributes']['defer'] = TRUE;
    }
  }
}

// themes/custom/mytheme/js/article-interactions.js
(function (Drupal, once) {
  'use strict';

  // Prefer scheduler.yield when available; fall back to setTimeout(0).
  const yieldToMain = () => {
    if (typeof scheduler !== 'undefined' && scheduler.yield) {
      return scheduler.yield();
    }
    return new Promise((resolve) => setTimeout(resolve, 0));
  };

  Drupal.behaviors.articleInteractions = {
    attach: async function (context) {
      const nodes = once('article-interactions', '.js-collapsible', context);
      const CHUNK = 50;

      for (let i = 0; i < nodes.length; i += CHUNK) {
        const slice = nodes.slice(i, i + CHUNK);
        slice.forEach((el) => {
          const trigger = el.querySelector('.js-collapsible__trigger');
          if (!trigger) return;
          trigger.addEventListener('click', (e) => {
            e.preventDefault();
            el.classList.toggle('is-open');
            el.setAttribute('aria-expanded',
              el.classList.contains('is-open') ? 'true' : 'false');
          });
        });
        // Give the browser a chance to process input events between chunks.
        if (i + CHUNK < nodes.length) {
          await yieldToMain();
        }
      }
    },
  };
})(Drupal, once);

# Run Lighthouse with the Interactions track on a 500-row Views page
$ npx lighthouse https://example.com/tags/drupal \
    --only-categories=performance \
    --form-factor=mobile \
    --throttling.cpuSlowdownMultiplier=4 \
    --output=json --output-path=./lh-inp-drupal.json

# Extract the longest task duration and INP contribution
$ jq '.audits["long-tasks"].details.items[0:5]' lh-inp-drupal.json
$ jq '.audits["interaction-to-next-paint"].numericValue' lh-inp-drupal.json
# expected: no single task > 100 ms; INP under 200 ms

// themes/custom/mytheme/js/autocomplete-throttle.js
//
// Overrides Drupal.autocomplete.options.autoFocus and the debounce interval,
// caches responses in a Map keyed by the query string, and re-uses cached
// markup on repeat keystrokes so the input paints without a network round trip.

(function (Drupal, $) {
  'use strict';

  if (!Drupal.autocomplete) return;

  Drupal.autocomplete.options.autoFocus = false;
  Drupal.autocomplete.options.minLength = 3; // was 1
  Drupal.autocomplete.options.delay = 500;    // was 300

  const cache = new Map();
  const originalSource = Drupal.autocomplete.options.source;

  Drupal.autocomplete.options.source = function (request, response) {
    const term = (request.term || '').trim().toLowerCase();
    if (cache.has(term)) {
      response(cache.get(term));
      return;
    }
    originalSource.call(this, request, function (data) {
      // Cap the cache at 100 entries to avoid unbounded growth.
      if (cache.size > 100) {
        const firstKey = cache.keys().next().value;
        cache.delete(firstKey);
      }
      cache.set(term, data);
      response(data);
    });
  };
})(Drupal, jQuery);

<?php
// modules/custom/mymodule/mymodule.module
//
// Wrap the Views exposed-form output in a BigPipe placeholder so the
// initial paint does not block on the widget query. The placeholder
// streams after the shell and re-attaches behaviors scoped to itself.

use Drupal\Core\Render\Element;

/**
 * Implements hook_form_alter().
 */
function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if (strpos($form_id, 'views_exposed_form') !== 0) {
    return;
  }
  // Mark the exposed form for BigPipe placeholder rendering.
  $form['#lazy_builder'] = ['mymodule.exposed_filter:build', [$form_id]];
  $form['#create_placeholder'] = TRUE;
}

<!-- templates/block--chat.html.twig -->
<button
  type="button"
  class="chat-facade"
  aria-label="Open chat"
  data-chat-facade>
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
  </svg>
  Chat with support
</button>

<script>
// themes/custom/mytheme/js/chat-facade.js -- 320 bytes gzipped
(function () {
  var button = document.querySelector('[data-chat-facade]');
  if (!button) return;
  button.addEventListener('click', function loadChat() {
    button.removeEventListener('click', loadChat);
    button.textContent = 'Loading chat...';
    var s = document.createElement('script');
    s.async = true;
    s.src = 'https://widget.intercom.io/widget/APP_ID';
    s.onload = function () { window.Intercom && window.Intercom('show'); };
    document.head.appendChild(s);
  }, { once: true });
})();
</script>

# Compare third-party summary before and after
$ npx lighthouse https://example.com/tags/drupal \
    --only-audits=third-party-summary,interaction-to-next-paint \
    --form-factor=mobile \
    --throttling.cpuSlowdownMultiplier=4 \
    --output=json --output-path=./lh-tp.json

$ jq '.audits["third-party-summary"].details.summary.wastedBytes' lh-tp.json
$ jq '.audits["interaction-to-next-paint"].numericValue' lh-tp.json
# before: wastedBytes ~180000, INP ~450
# after:  wastedBytes ~55000,  INP ~175

# Confirm the chat script does not appear in the initial HTML
$ curl -s https://example.com/ | grep -c 'widget.intercom.io'
# expected: 0 (loads only on facade click)