Fix CLS in WordPress

<?php
// functions.php

// Correct approach: always use wp_get_attachment_image() in theme templates
// This automatically outputs width, height, srcset, and sizes
$image_html = wp_get_attachment_image(
    $attachment_id,
    'large',         // registered image size
    false,           // not an icon
    array(
        'class'   => 'hero-image',
        'loading' => 'lazy',      // use 'eager' for LCP image
        'alt'     => get_the_title(),
    )
);
// Outputs: <img src="..." width="1024" height="512" srcset="..." sizes="...">

// Filter to auto-add missing dimensions to any <img> tag in page output
// WordPress 5.5+ tries this automatically, but you can hook it for custom sources:
add_filter( 'wp_img_tag_add_width_and_height_attr', function( $value, $image, $context, $attachment_id ) {
    // Return true to force dimension injection even in 'other' context
    if ( $attachment_id ) {
        return true;
    }
    return $value;
}, 10, 4 );

// For content images (post body), WordPress 5.5+ handles dimensions via
// wp_filter_content_tags() which runs on the_content and the_excerpt.
// Ensure this is not disabled in your theme or plugins:
// remove_filter( 'the_content', 'wp_filter_content_tags' ); // <-- remove this if present

/* CSS: reserve space for common ad sizes */

/* 728x90 leaderboard */
.ad-leaderboard {
    width: 100%;
    max-width: 728px;
    aspect-ratio: 728 / 90;
    min-height: 90px;
    background: var(--ad-placeholder-bg, #f3f4f6);
    overflow: hidden;
}

/* 300x250 medium rectangle (sidebar) */
.ad-rectangle {
    width: 300px;
    aspect-ratio: 300 / 250;
    min-height: 250px;
    overflow: hidden;
}

/* Responsive video embeds (YouTube, Vimeo) */
.embed-responsive {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
}
.embed-responsive iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Ad Inserter plugin: Block settings
   Appearance tab > set "Min Height" to the ad unit's expected height
   This outputs a placeholder div before the ad script executes */

<?php
// functions.php

// 1. Enqueue Google Fonts with font-display=swap via URL parameter
add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'google-fonts',
        'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap',
        array(),
        null
    );
} );

// 2. Preload self-hosted font files for zero-CLS font loading
add_action( 'wp_head', function() {
    $font_url = get_theme_file_uri( 'fonts/inter-regular.woff2' );
    printf(
        '<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin="anonymous">' . PHP_EOL,
        esc_url( $font_url )
    );
}, 1 );

// 3. Self-hosted font @font-face with font-display:swap in theme CSS
/*
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    /* size-adjust matches fallback Arial metrics to reduce reflow *\/
    size-adjust: 107%;
    ascent-override: 90%;
}
*/

// For Google Fonts loaded via wp_enqueue_style, add display=swap to the URL.
// The &display=swap query parameter is appended automatically to the URL above.
// Verify: view page source and confirm font URL contains &display=swap

<?php
// functions.php

// Step 1: Identify shifting plugins using Chrome DevTools
// DevTools > More Tools > Rendering > Layout Shift Regions
// Blue highlights show shifting elements on page load

// Step 2: Match the element to a plugin via Sources panel
// Right-click a highlighted element > Inspect
// Check which stylesheet defines its positioning rules

// Step 3: Dequeue the offending plugin's CSS for non-admin users
add_action( 'wp_enqueue_scripts', function() {
    if ( ! is_admin() ) {
        // Example: remove a newsletter plugin's stylesheet from the front-end
        // Replace 'newsletter-plugin-style' with the actual handle
        // Find handles via Query Monitor plugin > Scripts and Styles panel
        wp_dequeue_style( 'newsletter-plugin-style' );
        wp_deregister_style( 'newsletter-plugin-style' );
    }
}, 100 ); // Priority 100 runs after plugins register their assets

// Step 4: Fix cookie banners with fixed positioning to prevent layout shift
/*
CSS to add in Customizer or Additional CSS:
#cookie-notice, .cookie-banner, .cookie-law-info-bar {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    z-index: 9999;
}
*/

// Useful plugin: Query Monitor (free)
// Shows all enqueued scripts and styles with their handles and conditions

/* Add to your theme's style.css or Customizer Additional CSS */

/* Sidebar widget areas: prevent widget reflow from affecting main content */
.widget-area,
.sidebar,
#secondary {
    contain: layout;
}

/* Individual widgets with dynamic content */
.widget,
.wp-block-widget-group {
    contain: layout;
}

/* Ad containers: full containment for fixed-size slots */
.ad-unit,
.advertisement,
[class*="ad-slot"] {
    contain: strict; /* layout + style + size: only when size is known */
    min-height: 250px; /* always define minimum height */
}

/* WooCommerce product grids: isolate each card */
.woocommerce ul.products li.product {
    contain: layout paint;
}

/* Footer widget areas */
.footer-widgets,
.site-footer .widget-area {
    contain: layout;
}

/* Note: Do not use contain:strict on elements with auto-height content.
   Use contain:layout when height is not fixed.
   Use contain:strict only for fixed-size containers like known ad units. */