Understanding the Basics of Classic functions.php Helper Snippets for Optimized Core Web Vitals (LCP/INP)

Leveraging `functions.php` for Core Web Vitals: LCP & INP Optimization

While WordPress abstracts much of the complexity of web development, direct manipulation of its core files, particularly `functions.php`, offers granular control for performance tuning. This guide focuses on practical, code-driven strategies within `functions.php` to positively impact Largest Contentful Paint (LCP) and Interaction to Next Paint (INP), two critical Core Web Vitals metrics. We’ll bypass abstract concepts and dive straight into actionable snippets.

Optimizing LCP: Deferring Non-Critical JavaScript

The Largest Contentful Paint (LCP) is heavily influenced by the loading time of the largest image or text block within the viewport. Render-blocking JavaScript can significantly delay the rendering of this content. A common technique is to defer the loading of JavaScript files that are not immediately required for the initial page render.

We can achieve this by hooking into WordPress’s script enqueuing system. The `script_loader_tag` filter allows us to modify the HTML `script` tag before it’s outputted. By adding the `defer` attribute, we instruct the browser to download the script asynchronously and execute it only after the HTML document has been fully parsed.

Implementing the `defer` Attribute

Add the following PHP snippet to your theme’s `functions.php` file. This function iterates through all enqueued scripts and appends the `defer` attribute. Be cautious: ensure that scripts you defer are indeed non-critical and won’t break essential functionality on initial load.

/**
 * Add 'defer' attribute to all enqueued scripts.
 * Use with caution, ensure scripts are non-critical.
 */
function optimize_scripts_defer( $tag, $handle, $src ) {
    // Exclude specific handles if necessary.
    // Example: if ( 'my-critical-script' === $handle ) { return $tag; }

    // Add defer attribute to all script tags.
    $tag = str_replace( ' src', ' defer src', $tag );
    return $tag;
}
add_filter( 'script_loader_tag', 'optimize_scripts_defer', 10, 3 );

For more granular control, you might want to defer only specific scripts. You can achieve this by checking the script handle within the filter function. For instance, to defer a script with the handle `my-plugin-script`:

/**
 * Add 'defer' attribute to specific enqueued scripts.
 */
function optimize_specific_scripts_defer( $tag, $handle, $src ) {
    // List of script handles to defer.
    $scripts_to_defer = array( 'my-plugin-script', 'another-deferred-script' );

    if ( in_array( $handle, $scripts_to_defer, true ) ) {
        $tag = str_replace( ' src', ' defer src', $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'optimize_specific_scripts_defer', 10, 3 );

Optimizing INP: Reducing Main Thread Workload

Interaction to Next Paint (INP) measures the latency of all user interactions with the page. High INP often stems from the browser’s main thread being busy with long-running JavaScript tasks, preventing it from responding quickly to user input. Deferring scripts, as discussed for LCP, also benefits INP by offloading JavaScript execution. However, we can go further.

Lazy Loading Images and Iframes

Images and iframes below the fold are prime candidates for lazy loading. This technique defers the loading of these resources until they are about to enter the viewport, significantly reducing the initial page load time and, crucially, the amount of work the main thread has to do upfront. WordPress has native lazy loading for images since version 5.5, but explicit control over iframes and older image implementations can still be beneficial.

We can use the `the_content` filter to modify the HTML output of your posts and pages. This allows us to add the `loading=”lazy”` attribute to `` and `