Fix LCP in Drupal

# /admin/config/media/responsive-image-style/hero
# YAML export (via drush config:export)

id: hero
label: 'Hero image (LCP)'
breakpoint_group: bartik
fallback_image_style: hero_1600
image_style_mappings:
  # Mobile: up to 640px viewport -> 400w derivative
  - breakpoint_id: 'bartik.mobile'
    multiplier: '1x'
    image_mapping_type: image_style
    image_mapping: hero_400
  # Tablet: 641-1024px -> 800w
  - breakpoint_id: 'bartik.tablet'
    multiplier: '1x'
    image_mapping_type: image_style
    image_mapping: hero_800
  # Narrow desktop: 1025-1440px -> 1200w
  - breakpoint_id: 'bartik.narrow'
    multiplier: '1x'
    image_mapping_type: image_style
    image_mapping: hero_1200
  # Wide desktop: 1441px+ -> 1600w
  - breakpoint_id: 'bartik.wide'
    multiplier: '1x'
    image_mapping_type: image_style
    image_mapping: hero_1600

# Then attach the formatter to the hero field:
#   /admin/structure/types/manage/landing_page/display
#   field_hero_image -> Format = 'Responsive image', Style = 'Hero image (LCP)'

<?php
// themes/custom/mytheme/mytheme.theme

use Drupal\file\Entity\File;
use Drupal\image\Entity\ImageStyle;
use Drupal\node\NodeInterface;

/**
 * Implements hook_preprocess_page().
 *
 * Sets fetchpriority=high on the hero img and preloads a matching src.
 */
function mytheme_preprocess_page(array &$variables) {
  $node = $variables['node'] ?? NULL;
  if (!$node instanceof NodeInterface) {
    return;
  }
  if (!$node->hasField('field_hero_image') || $node->get('field_hero_image')->isEmpty()) {
    return;
  }

  // Add a class the twig template can hook fetchpriority on.
  $variables['hero_is_lcp'] = TRUE;

  // Emit a matching link rel=preload for the widest source in the set.
  $fid = $node->get('field_hero_image')->target_id;
  $file = File::load($fid);
  if (!$file) {
    return;
  }
  $style = ImageStyle::load('hero_1600');
  $url = $style->buildUrl($file->getFileUri());

  $variables['#attached']['html_head_link'][] = [
    [
      'rel'            => 'preload',
      'as'             => 'image',
      'href'           => $url,
      'imagesrcset'    => sprintf('%s 1600w', $url),
      'fetchpriority'  => 'high',
      'type'           => 'image/webp',
    ],
    // No key -> always emit; Drupal will not deduplicate cross-request.
    FALSE,
  ];
}

{# themes/custom/mytheme/templates/page--landing-page.html.twig #}

<main class="landing">
  {% if hero_is_lcp %}
    {# Render the hero inline instead of via a block so the preload scanner
       sees it before CSS parses. #}
    <figure class="hero" aria-label="{{ node.field_hero_image.alt }}">
      {{ content.field_hero_image|merge({
        '#item_attributes': {
          'fetchpriority': 'high',
          'loading': 'eager',
          'decoding': 'async',
        }
      }) }}
    </figure>
  {% endif %}

  {{ page.content }}
</main>

# List all blocks currently placed in the theme
$ drush config:list | grep '^block.block\.'

# Inspect a suspected duplicate hero block
$ drush config:get block.block.hero_landing status region

# Disable a duplicate block cleanly (does not delete config)
$ drush config:set block.block.hero_landing status false -y

# After template changes, rebuild caches so the new page twig ships
$ drush cache:rebuild

# Verify the hero renders only once and inline in the page HTML
$ curl -s https://example.com/ | grep -c 'class="hero"'
# expected: 1

<?php
// themes/custom/mytheme/mytheme.theme

use Drupal\Core\Asset\AttachedAssets;

/**
 * Implements hook_preprocess_html().
 *
 * Inlines critical.css (built at deploy time by Penthouse) and defers the
 * full aggregated stylesheet with a rel=preload swap.
 */
function mytheme_preprocess_html(array &$variables) {
  $critical_path = DRUPAL_ROOT . '/themes/custom/mytheme/dist/critical.css';
  if (!file_exists($critical_path)) {
    return;
  }
  $critical_css = file_get_contents($critical_path);

  // Inline the critical CSS in the head (before any external stylesheet).
  $variables['#attached']['html_head'][] = [
    [
      '#tag'   => 'style',
      '#value' => $critical_css,
      '#attributes' => ['data-critical' => 'true'],
    ],
    'mytheme_critical_css',
  ];

  // Add a noscript fallback that always applies the full sheet.
  $variables['#attached']['html_head'][] = [
    [
      '#tag'   => 'noscript',
      '#value' => '<link rel="stylesheet" href="/themes/custom/mytheme/dist/main.css">',
    ],
    'mytheme_noscript_css',
  ];
}

// Build step (package.json):
//   "build:critical": "penthouse --url=http://drupal.ddev.site \\
//      --css=themes/custom/mytheme/dist/main.css \\
//      --output=themes/custom/mytheme/dist/critical.css \\
//      --width=1440 --height=900 --keepLargerMediaQueries"

# 1) Install the WebP module and generate derivatives via ImageAPI Optimize
$ composer require drupal/imageapi_optimize_webp drupal/imageapi_optimize
$ drush pm:enable imageapi_optimize imageapi_optimize_webp -y

# 2) Configure /admin/config/media/imageapi-optimize-pipelines
#    Create a 'webp' pipeline with:
#      - Convert to WebP (quality 82)
#      - Optimize with cwebp binary
#    Attach the pipeline to your hero image styles (hero_400, hero_800, ...)

# 3) Rebuild image derivatives after config change
$ drush image:derive-flush hero_400 hero_800 hero_1200 hero_1600
$ drush cache:rebuild

# 4) Warm the homepage so derivatives generate on disk
$ curl -s -o /dev/null https://example.com/

# 5) Verify curl receives image/webp Content-Type for the hero
$ curl -sI -H 'Accept: image/webp,image/*,*/*;q=0.8' \
    https://example.com/sites/default/files/styles/hero_800/public/hero.jpg.webp | \
    grep -iE 'content-type|content-length'
# expected:
# content-type: image/webp
# content-length: ~45000  (was ~72000 as JPEG)

# 6) Measure LCP with the Chrome UX Report field data or a synthetic run
$ npx lighthouse https://example.com/ --only-categories=performance \\
    --form-factor=mobile --throttling.cpuSlowdownMultiplier=4 \\
    --output=json --output-path=./lh-drupal.json
$ jq '.audits["largest-contentful-paint"].numericValue' lh-drupal.json
# expected: ~1800 (ms) after the full stack lands