How to Customize Standard WordPress Comment Templates for Optimized Core Web Vitals (LCP/INP)

Understanding WordPress Comment Template Structure

WordPress’s comment system, while functional, can be a significant bottleneck for Core Web Vitals, particularly Largest Contentful Paint (LCP) and Interaction to Next Paint (INP). The default comment template often loads excessive JavaScript, complex CSS, and even embeds external resources that block rendering. To optimize, we must first understand the core files involved: comments.php and the wp_list_comments() function.

The comments.php file is the primary template file responsible for displaying comments and the comment form. It typically includes a loop that iterates through comments using wp_list_comments(). This function is highly customizable and accepts an array of arguments to control how each comment and the overall comment structure is rendered.

Leveraging wp_list_comments() Arguments for Optimization

The key to customizing the comment template lies in the arguments passed to wp_list_comments(). By default, WordPress might enqueue scripts and styles that aren’t strictly necessary for rendering the basic comment structure. We can override this behavior and selectively load resources.

Customizing the Callback Function

The callback argument of wp_list_comments() allows us to define a custom function that will render each individual comment. This is where we can strip out unnecessary HTML, attributes, and potentially defer loading of certain elements.

Let’s define a basic custom callback function in your theme’s functions.php file. This example focuses on a cleaner HTML structure and avoids unnecessary classes that might be added by default.

function my_custom_comment_callback( $comment, $args, $depth ) {
    $args['avatar_size'] = 40; // Smaller avatar size
    $tag = ( 'div' === $args['style'] ) ? 'div' : 'li';
    ?>
    <?php // phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped ?>
    <?php // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped ?>
    <?php // phpcs:disable VariableFunctions.Functions.variable_functions.func_get_args -->
    <li id="comment-<?php comment_ID(); ?>" class="<?php echo esc_attr( implode( ' ', get_comment_class() ) ); ?>">
        <article id="div-comment-<?php comment_ID(); ?>" class="comment-body">
            <div class="comment-author vcard">
                <?php
                if ( 0 != $args['avatar_size'] ) echo get_avatar( $comment, $args['avatar_size'] );
                ?>
                <?php
                printf(
                    '<b class="fn"><a href="%1$s" rel="external nofollow ugc">%2$s</a></b>',
                    esc_url( get_comment_author_link() ),
                    get_comment_author()
                );
                ?>
                <span class="comment-meta">
                    <time datetime="<?php comment_time( 'c' ); ?>">
                        <?php
                        /* translators: 1: Comment date, 2: Comment time */
                        printf( esc_html__( '%1$s at %2$s', 'your-text-domain' ), get_comment_date( '', get_comment_ID() ), get_comment_time() );
                        ?>
                    </time>
                </span>
            </div><!-- .comment-author -->

            <div class="comment-content">
                <?php comment_text(); ?>
            </div><!-- .comment-content -->

            <div class="reply">
                <?php
                comment_reply_link(
                    array_merge(
                        $args,
                        array(
                            'add_below' => 'div-comment',
                            'depth'     => $depth,
                            'max_depth' => $args['max_depth'],
                        )
                    )
                );
                ?>
            </div><!-- .reply -->
        </article><!-- .comment-body -->
    <?php // phpcs:enable ?>
    



Now, in your comments.php file, you'll modify the wp_list_comments() call to use this custom callback:



<?php
wp_list_comments( array(
    'callback' => 'my_custom_comment_callback',
    'style'    => 'li', // or 'div' depending on your HTML structure
    'avatar_size' => 40,
    'max_depth' => 5, // Adjust as needed
) );
?>



Optimizing the Comment Form



The comment form itself can also be a source of performance issues. By default, WordPress might enqueue comment-reply.js, which is necessary for threaded comments. However, if you don't use threaded comments or want more control, you can dequeue it or load it conditionally.



Conditional Loading of comment-reply.js



If you are not using threaded comments, you can prevent comment-reply.js from loading on pages where it's not needed. Add the following to your theme's functions.php:



function my_dequeue_comment_reply_script() {
    // Check if it's a single post or page and if comments are open
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        // Threaded comments are enabled, so we need the script
        wp_enqueue_script( 'comment-reply' );
    } else {
        // Threaded comments are disabled or not on a singular page, dequeue the script
        wp_dequeue_script( 'comment-reply' );
        wp_deregister_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_comment_reply_script' );



If you do use threaded comments, ensure that comment-reply.js is enqueued correctly. The above code snippet handles both scenarios. The key is to ensure it's only loaded when threaded comments are enabled and active.



Lazy Loading Comments



For pages with a large number of comments, loading them all at once can significantly impact LCP and INP. Lazy loading comments is a powerful technique to defer their loading until they are visible in the viewport or triggered by user interaction.



Implementing Lazy Loading with JavaScript



This approach involves initially hiding the comment section and then revealing it using JavaScript when the user scrolls to it or clicks a "Load Comments" button. This requires a custom JavaScript file.



First, modify your comments.php to wrap the comment section in a container that can be targeted by JavaScript. You might also add a button to manually load comments.



<div id="comments-container">
    <h2 class="comments-title"><?php // Add your comments title logic here ?></h2>
    <button id="load-comments-btn" style="display: none;">Load Comments</button>
    <div id="comments-wrapper" style="display: none;">
        <ol class="comment-list">
            <?php
            wp_list_comments( array(
                'callback' => 'my_custom_comment_callback',
                'style'    => 'ol', // Use 'ol' for comment-list
                'avatar_size' => 40,
            ) );
            ?>
        </ol><!-- .comment-list -->

        <?php
        // Comment form
        comment_form( array(
            'title_reply_before' => '<h3 id="reply-title" class="comment-reply-title">',
            'title_reply_after'  => '</h3>',
        ) );
        ?>
    </div><!-- #comments-wrapper -->
</div><!-- #comments-container -->



Next, create a JavaScript file (e.g., lazy-comments.js) in your theme's JavaScript directory and enqueue it conditionally. This script will handle the lazy loading logic.



document.addEventListener('DOMContentLoaded', function() {
    const commentsContainer = document.getElementById('comments-container');
    const commentsWrapper = document.getElementById('comments-wrapper');
    const loadCommentsBtn = document.getElementById('load-comments-btn');

    if (!commentsContainer || !commentsWrapper || !loadCommentsBtn) {
        return; // Exit if elements are not found
    }

    // Function to load comments
    function loadComments() {
        commentsWrapper.style.display = 'block';
        loadCommentsBtn.style.display = 'none';
        // Optionally, re-initialize any scripts needed for comments here
    }

    // Option 1: Load comments when the button is clicked
    loadCommentsBtn.addEventListener('click', loadComments);

    // Option 2: Load comments when they scroll into view (more advanced)
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // If the comments container is in view, show the load button
                // or directly load comments if you prefer automatic loading
                loadCommentsBtn.style.display = 'block';
                observer.unobserve(entry.target); // Stop observing once visible
            }
        });
    }, {
        rootMargin: '0px 0px 200px 0px', // Trigger when 200px from bottom
        threshold: 0.1
    });

    observer.observe(commentsContainer);

    // Initially hide the comments wrapper and show the load button if comments are not immediately visible
    // This part might need adjustment based on your initial CSS and layout
    if (commentsContainer.getBoundingClientRect().top > window.innerHeight) {
        loadCommentsBtn.style.display = 'block';
    } else {
        // If comments are already in view, load them directly
        loadComments();
    }
});



Enqueue this script in your theme's functions.php. Ensure it only loads on single posts/pages where comments are displayed.



function my_enqueue_lazy_comments_script() {
    if ( is_singular() && comments_open() ) {
        wp_enqueue_script( 'lazy-comments', get_template_directory_uri() . '/js/lazy-comments.js', array('jquery'), '1.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_lazy_comments_script' );



Minimizing CSS and JavaScript Dependencies



Beyond the core comment scripts, many themes and plugins add their own CSS and JavaScript to the comment section. This can include validation scripts, social sharing buttons, or advanced comment features.



Audit and Dequeue Unused Assets



Use browser developer tools (Network tab) to identify all CSS and JavaScript files loaded on your comment pages. If you find assets that are not essential for the basic comment functionality or your optimized template, dequeue them.



function my_dequeue_unnecessary_comment_assets() {
    // Example: Dequeue a hypothetical plugin's comment script
    // Replace 'plugin-comment-script-handle' with the actual handle
    if ( is_singular() && comments_open() ) {
        wp_dequeue_script( 'plugin-comment-script-handle' );
        wp_deregister_script( 'plugin-comment-script-handle' );

        // Example: Dequeue a hypothetical plugin's comment stylesheet
        // Replace 'plugin-comment-style-handle' with the actual handle
        wp_dequeue_style( 'plugin-comment-style-handle' );
        wp_deregister_style( 'plugin-comment-style-handle' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_unnecessary_comment_assets', 999 ); // High priority to run after others



Carefully test your site after dequeuing assets to ensure no critical functionality is broken. Prioritize removing anything that doesn't directly contribute to the user experience of reading or submitting comments.



Optimizing Comment Form Fields



The comment form fields themselves can be optimized. While WordPress provides standard fields (name, email, website, comment), you might consider:



Removing the "Website" field if it's not used or leads to spam.
Using HTML5 input types (e.g., email, url) for better mobile usability and basic validation.
Ensuring all form fields are properly labeled for accessibility.



function my_custom_comment_form_fields( $fields ) {
    // Remove the website field
    unset( $fields['url'] );

    // Modify other fields if needed, e.g., add 'required' attribute
    $fields['author'] = '<p class="comment-form-author">' .
                        '<label for="author">' . __( 'Name', 'your-text-domain' ) . '</label>' .
                        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" maxlength="245"' . $aria_req . ' required>' .
                        '</p>';

    $fields['email'] = '<p class="comment-form-email">' .
                       '<label for="email">' . __( 'Email', 'your-text-domain' ) . '</label>' .
                       '<input id="email" name="email" type="email" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30" maxlength="100"' . $aria_req . ' required>' .
                       '</p>';

    return $fields;
}
add_filter( 'comment_form_default_fields', 'my_custom_comment_form_fields' );

function my_comment_form_defaults( $defaults ) {
    // Remove the website field from the form structure itself if it was still there
    unset( $defaults['fields']['url'] );
    return $defaults;
}
add_filter( 'comment_form_fields', 'my_comment_form_defaults' );




By implementing these strategies, you can significantly reduce the overhead associated with WordPress's default comment templates, leading to improved LCP and INP scores and a faster, more responsive user experience.