Optimizing SaaS Landing Page Core Web Vitals: A WP-CLI Guide

Improving SaaS Site Speed with WP-CLI and Critical CSS

As a developer, there is nothing worse than building a beautiful, conversion-focused software landing page only to watch its mobile PageSpeed score hover in the red. SaaS startups love heavy assets: gradient-heavy backgrounds, massive hero graphics, product screenshot mockups, and interactive pricing tables.

If you load all your stylesheets in the head synchronously, the browser has to download, parse, and execute every CSS file before displaying a single pixel. This delay negatively impacts your Largest Contentful Paint (LCP). To fix this for a SaaS client last month, we decided to automate our Critical CSS workflow using WP-CLI.

The Critical CSS Strategy

Critical CSS involves extracting the exact style rules needed to render the above-the-fold layout and inlining them directly into the HTML document. The remaining non-critical styles are then loaded asynchronously.

Instead of manually running this process through external node packages every time a client changes the hero section copy, we created a custom WP-CLI command. This command spins up a headless browser, extracts the visual styles for the front page, and saves them to a designated directory.

If you are unfamiliar with extending the WordPress shell, you can learn more from the official WP-CLI Command Reference. Here is a basic representation of how we registered our custom compiler command within our development environment:

if ( defined( 'WP_CLI' ) && WP_CLI ) {
    WP_CLI::add_command( 'saas css compile', function( $args, $assoc_args ) {
        $home_url = home_url();
        WP_CLI::log( "Extracting critical CSS from: " . $home_url );
        
        // Execute our external node critical-css engine
        $output = shell_exec( "npx critical {$home_url} --width 1300 --height 900" );
        
        if ( $output ) {
            file_put_contents( get_template_directory() . '/assets/css/critical.css', $output );
            WP_CLI::success( "Critical CSS compiled successfully." );
        } else {
            WP_CLI::error( "Failed to extract CSS." );
        }
    } );
}

We then set our template header to inject this critical.css directly into the page output, while deferring the loading of the main stylesheet.

Choosing a Lean Layout Base

This automation strategy only works if the underlying theme is structured cleanly. Many layouts in the general WooCommerce Themes Collection bundle massive, monolithic stylesheets that contain layout overrides for dozens of modules you aren't even using.

We opted for the SaaSoft WordPress Theme for this rebuild. The codebase is broken down into modular components rather than one single, bloated stylesheet. Because the layout files are segregated, our custom compiler script had a much easier time stripping redundant styles, allowing us to drop the above-the-fold CSS payload from 250KB to a mere 14KB.

Handling Marketing Script Overhead

SaaS portals are notoriously plagued by external marketing tracking, hotjar maps, and chat widgets. These can ruin your Total Blocking Time (TBT).

To keep our page speed in check, we loaded these third-party trackers asynchronously. We configured our setup with select Premium WordPress Plugins that defer JS execution until a user actually scrolls or interacts with the page.

The Takeaway

Getting a SaaS landing page to load under two seconds on a standard mobile connection is an iterative process. Using a cleanly segmented foundation like the SaaSoft WordPress Theme gets you halfway there. However, automating your Critical CSS generation with WP-CLI and deferring marketing scripts is what ultimately pushes your performance score into the green.