🚀 Performance Optimization Report: Project Watchdog
Target Score: 100/100 Lighthouse (Mobile & Desktop) Core Strategy: Asset De-bloating, Critical Path Inlining, and Intelligent Resource Prioritization.
1. Eliminating Critical Request Chains (CSS)
Problem: The browser was waiting 845ms to download a tiny style.css file.
Solution: Inline the theme’s primary stylesheet directly into the HTML <head>.
The Implementation
Remove the standard wp_enqueue_style and replace it with a PHP file_get_contents call.
add_action('wp_head', function() {
$css_path = get_template_directory() . '/style.css';
if (file_exists($css_path)) {
echo '<style id="watchdog-critical-css">' . file_get_contents($css_path) . '</style>';
}
}, 0); - Result: 0ms latency for CSS. The page paints as soon as the HTML arrives.
2. Surgical Script De-bloating (WooCommerce)
Problem: WooCommerce Blocks injects massive JavaScript modules (interactivity.js, product-button.js) even on pages where they aren't used. Standard wp_dequeue_script often fails because these are registered as Script Modules.
The Implementation
Use a high-priority hook (1000+) to deregister both handles and modern script modules.
add_action('wp_enqueue_scripts', function() {
if (is_front_page()) {
// Kill the Script Modules (Modern System)
if (function_exists('wp_deregister_script_module')) {
wp_deregister_script_module('@woocommerce/interactivity');
wp_deregister_script_module('@woocommerce/blocks/product-button');
}
// Kill standard handles
wp_dequeue_style('wc-blocks-style');
wp_dequeue_script('wc-block-product-button');
}
}, 1000);3. Intelligent LCP Prioritization
Problem: When multiple images exist on the homepage, the browser struggles to decide which to load first, leading to high Resource Load Delay.
Solution: Use a static counter to identify the "Above the Fold" Hero image and boost it while removing lazy-loading.
The Implementation
add_filter('render_block', function($block_content, $block) {
static $cover_count = 0;
if (is_front_page() && 'core/cover' === $block['blockName']) {
$cover_count++;
if (1 === $cover_count) {
// Strip lazy loading and add high-priority hints
$block_content = str_replace('loading="lazy"', '', $block_content);
$block_content = str_replace('<img ', '<img fetchpriority="high" decoding="sync" ', $block_content);
}
}
return $block_content;
}, 10);4. Replacing Dynamic Blocks with Static Logic
Problem: The WooCommerce "Add to Cart" block carries a heavy JS payload to handle "Interactivity." Solution: Replace the block with a static HTML/CSS Pricing Section and a "Direct-to-Checkout" URL.
The Direct Link Logic
Instead of a JS-dependent button, use a standard anchor tag:
yourdomain.com/checkout/?add-to-cart=PRODUCT_ID
- Performance Gain: ~150KB of JS removed.
- Reliability: Works even if the user has JS disabled or a poor connection.
5. Summary Checklist for Other Sites
| Action Item | Why? | Impact |
|---|---|---|
| Inline Small CSS | Kills the 800ms+ network handshake. | FCP (Instant) |
| Deregister Modules | Removes unused WC Interactivity scripts. | TBT (Low) |
| Kill jQuery (Home) | jQuery is rarely needed for a landing page. | SI (Speed Index) |
| Fetchpriority High | Tells browser the Hero image is the #1 priority. | LCP (Fast) |
| Sync Image Decoding | Forces the browser to paint pixels immediately. | Element Delay |
Next Steps:
Would you like me to help you create a specific cleanup.php file you can drop into any theme to automate these steps for your other sites?