Fix INP in WordPress

<?php
// functions.php

// Step 1: Audit third-party scripts with Chrome DevTools
// Performance tab > Record page load
// In the flame chart, look for tasks from third-party origins
// Check "Third-party usage" section in Lighthouse for impact summary

// Step 2: Defer third-party scripts registered through WordPress
add_action( 'wp_enqueue_scripts', function() {
    // Example: defer a live chat widget
    wp_enqueue_script(
        'live-chat',
        'https://cdn.livechat-provider.com/widget.js',
        array(), // no jQuery dependency needed
        null,
        array(
            'strategy'  => 'defer',
            'in_footer' => true,
        )
    );

    // Example: load HubSpot tracking asynchronously
    wp_enqueue_script(
        'hubspot-tracking',
        'https://js.hs-scripts.com/YOUR_ID.js',
        array(),
        null,
        array( 'strategy' => 'async' )
    );
} );

// Step 3: For scripts not registered through wp_enqueue_scripts,
// add the defer/async attribute via a filter on script_loader_tag
add_filter( 'script_loader_tag', function( $tag, $handle, $src ) {
    $defer_handles = array( 'google-tag-manager', 'facebook-pixel', 'hotjar' );
    if ( in_array( $handle, $defer_handles, true ) ) {
        return str_replace( '<script ', '<script defer ', $tag );
    }
    return $tag;
}, 10, 3 );

// WP Rocket: Performance > Delay JavaScript Execution
// Add third-party script URLs or keywords to delay until first interaction

<?php
// Measure DOM size:
// Chrome DevTools > Console: document.querySelectorAll('*').length
// Lighthouse > Diagnostics > "Avoid an excessive DOM size"
// Good: under 800 nodes | Warning: 800-1500 | Poor: over 1500

// Common DOM-bloating patterns to eliminate in theme templates:

// Bad: unnecessary wrapper divs
// <div class="outer-wrapper">
//   <div class="inner-wrapper">
//     <div class="content-wrapper">
//       <p>Text</p>
//     </div>
//   </div>
// </div>

// Good: semantic minimal structure
// <p class="content">Text</p>

// In page builder templates, reduce nesting:
// - Convert multi-column sections to CSS Grid instead of nested rows/columns
// - Replace visual composer shortcodes with native WordPress blocks
// - Remove decorative wrapper elements and use CSS pseudo-elements instead

// WordPress template: simplified hero section (fewer DOM nodes)
function mytheme_hero_section( $post_id ) {
    $title       = get_the_title( $post_id );
    $image_id    = get_post_thumbnail_id( $post_id );
    $image_url   = wp_get_attachment_image_url( $image_id, 'hero' );
    $image_alt   = get_post_meta( $image_id, '_wp_attachment_image_alt', true );

    // Direct semantic HTML with no unnecessary wrappers
    printf(
        '<section class="hero" style="background-image:url(%s)" aria-label="%s">
    <h1 class="hero__title">%s</h1>
</section>',
        esc_url( $image_url ),
        esc_attr( $title ),
        esc_html( $title )
    );
}
// Targets: each page builder row = ~5-15 nodes. Eliminating 20 rows saves 100-300 nodes.

<?php
// functions.php

// WordPress 6.3+: strategy parameter replaces the boolean in_footer
add_action( 'wp_enqueue_scripts', function() {

    // Theme main script: defer to footer
    wp_enqueue_script(
        'mytheme-main',
        get_theme_file_uri( 'js/main.js' ),
        array( 'jquery' ), // dependency on jQuery
        wp_get_theme()->get( 'Version' ),
        array(
            'strategy'  => 'defer',
            'in_footer' => true,
        )
    );

    // Navigation script: defer (no jQuery dependency)
    wp_enqueue_script(
        'mytheme-nav',
        get_theme_file_uri( 'js/navigation.js' ),
        array(),
        wp_get_theme()->get( 'Version' ),
        array( 'strategy' => 'defer' )
    );

    // Contact form validation: defer until after initial paint
    wp_enqueue_script(
        'mytheme-forms',
        get_theme_file_uri( 'js/forms.js' ),
        array(),
        '1.0.0',
        array(
            'strategy'  => 'defer',
            'in_footer' => true,
        )
    );
} );

// For WordPress < 6.3: use the boolean in_footer param + script_loader_tag filter
// wp_enqueue_script( 'handle', $src, $deps, $ver, true );
// Then add defer via the script_loader_tag filter shown in Step 1

// Before: jQuery event delegation on document root (slow)
// Every click anywhere on the page runs this function
jQuery(document).on('click', '.accordion-toggle', function(e) {
    jQuery(this).closest('.accordion').find('.accordion-content').slideToggle();
});

// After: event delegation on the closest ancestor (fast)
// Only clicks inside .accordion-list trigger this function
document.querySelector('.accordion-list')?.addEventListener('click', (e) => {
    const toggle = e.target.closest('.accordion-toggle');
    if (!toggle) return;
    const content = toggle.closest('.accordion').querySelector('.accordion-content');
    content.hidden = !content.hidden;
    toggle.setAttribute('aria-expanded', !content.hidden);
});

// Before: reading layout properties inside scroll handler (causes layout thrash)
jQuery(window).scroll(function() {
    var scrollTop = jQuery(window).scrollTop(); // forced layout recalculation
    jQuery('.sticky-header').css('top', scrollTop > 100 ? '0' : '-80px');
});

// After: use passive scroll listener + requestAnimationFrame
let lastScrollY = 0;
const header = document.querySelector('.sticky-header');
window.addEventListener('scroll', () => {
    lastScrollY = window.scrollY; // no layout recalculation
}, { passive: true }); // passive: true prevents scroll blocking

requestAnimationFrame(function update() {
    header.classList.toggle('is-sticky', lastScrollY > 100);
    requestAnimationFrame(update);
});

// Before: jQuery animation that modifies DOM on every frame
jQuery('.banner').animate({ opacity: 1 }, 600);

// After: CSS transition triggered by class (GPU-accelerated, no JS overhead)
// CSS: .banner { opacity: 0; transition: opacity 600ms ease; }
// CSS: .banner.is-visible { opacity: 1; }
document.querySelector('.banner').classList.add('is-visible');

// Pattern: lazy-initialize any heavy widget when it enters the viewport

// 1. Google Maps: load script and initialize only when map container is visible
function initLazyMap() {
    const mapContainers = document.querySelectorAll('[data-lazy-map]');
    if (!mapContainers.length || !('IntersectionObserver' in window)) return;

    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (!entry.isIntersecting) return;
            observer.unobserve(entry.target);

            const container = entry.target;
            const lat = parseFloat(container.dataset.lat);
            const lng = parseFloat(container.dataset.lng);

            // Load the Maps script only when needed
            const script = document.createElement('script');
            script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap';
            script.defer = true;
            document.head.appendChild(script);

            window.initMap = () => {
                new google.maps.Map(container, { center: { lat, lng }, zoom: 14 });
            };
        });
    }, { rootMargin: '200px 0px' }); // start loading 200px before viewport

    mapContainers.forEach((el) => observer.observe(el));
}

// 2. Slider/carousel: initialize only when the slider enters the viewport
function initLazySliders() {
    const sliders = document.querySelectorAll('[data-lazy-slider]');
    if (!sliders.length) return;

    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (!entry.isIntersecting) return;
            observer.unobserve(entry.target);
            // Dynamically import the slider module
            import('/wp-content/themes/mytheme/js/slider.js').then(({ initSlider }) => {
                initSlider(entry.target);
            });
        });
    }, { rootMargin: '100px 0px' });

    sliders.forEach((el) => observer.observe(el));
}

// Run after DOM ready
document.addEventListener('DOMContentLoaded', () => {
    initLazyMap();
    initLazySliders();
});