Removing whitespace from HTML output and inlining above-the-fold CSS are two of the highest-ROI performance techniques for WordPress — they reduce Time to First Byte payload and eliminate render-blocking stylesheets in a single request.
Problem: WordPress loads full stylesheets on every page even when only a small portion of CSS is needed for the initial viewport — delaying the First Contentful Paint and causing layout shifts.
Solution: Extract critical CSS for above-the-fold content with the critical npm package, inline it in <style> tags via wp_add_inline_style(), and load the full stylesheet asynchronously with rel="preload" + onload. Automate regeneration in your build pipeline after any CSS change.
The examples below implement an output-buffer HTML minifier as a WordPress plugin, and show how to extract and inline critical CSS while deferring the full stylesheet.
// Minimal HTML minifier via output buffering
// Place in mu-plugins/html-minify.php
add_action( 'template_redirect', function() {
if ( is_admin() || wp_doing_ajax() || is_feed() ) return;
ob_start( 'myplugin_minify_html' );
} );
function myplugin_minify_html( string $html ): string {
// Skip if the page contains a or