Originally published on February 20th, 2020
Updated on August 29th, 2020

How to Remove HTML Comments from the Page Source

Many plugins inject unnecessary HTML comments into the page’s source code. Let’s look into ways we could remove them.

Why do you want HTML comments in the first place?

It is a pet hate of mine that HTML gets flooded with unnecessary tripe, such as comments that relate to a section of the HTML. In WordPress loads of plugins dump this crap into the page, but why? In my opinion, as a programmer, a live site is no place for this bloat. Sure, if you feel the need to output them for debugging purposes, in development/staging, then do so – though I’m still not sure why you would, as there are proper debugging tools and techniques for that. But a live site should be optimised; only transmitting data that are necessary for the presentation and functionality of the site, so let’s try to achieve that.

How can these HTML comments be removed?

There’s more than one way to remove these comments, and, in some cases, the best solution is to stop them being created in the first place, but that’s not so easy when you don’t always have control over third-party code that’s creating them.

Yoast, a third-party plugin for SEO, have provided us with a way to achieve this. Here’s an example of how to remove comments that Yoast injects:

/**
* Disable Yoast's comments
*/
add_action('template_redirect', function () {
    // abort if the class doesn’t exist
    if (!class_exists('WPSEO_Frontend')) return;

    // set probable method (Yoast updates this from time-to-time)
    $method = ‘debug_mark’;

    // get instance
    $instance = WPSEO_Frontend::get_instance();

    // abort if the method doesn’t exist
    if (!method_exists($instance, $method)) return;

    // remove the method
    remove_action(‘wpseo_head’, [$instance, $method], 2);
}, 9999);

Note that the code above is fairly volatile, as it will only work if Yoast doesn’t change the classes and hooks being called.

Remove all HTML comments

The above code snippet only addresses the comments in the head tag by a single plugin. There are techniques to remove all comments from the page. One way is to buffer all the page’s source code and use a regular expression to remove anything between  before outputting the buffer’s contents. Personally, I don’t think this is a nice solution, as it will probably slow your site unless you cached the results, nonetheless, here’s a theoretical solution (untested):

/**
 * Callback function to remove HTML comments
 */
function buffer_callback($buffer) {
    return preg_replace('/<!--(.|s)*?-->/', '', $buffer);
}

// start buffer at the site's head
add_action('get_header', function () {
    ob_start('buffer_callback');
});

// end buffer and flush after the WP Footer's content's been collected
add_action('wp_footer', function () {
    ob_end_flush();
});

Are There Other Ways to Clear Out the Noise?

Whilst searching the entire document for specific strings of characters isn’t ideal, it is a solution. Alternatively, we could investigate ways that prevent the creation of them in the first place, but that’s easier said than done. If I create one I’ll share my findings.

If you have a suggestion or you’d like to discuss implementing something like this on your site, then please get in touch.

Get in touch