This is a step-by-step implementation guide based on a real optimization process. Every step includes exactly where to apply changes and what to do.
1. Problem Overview
Initial issues observed:
- Dropdown menu not working
- Header JS broken
- High PageSpeed score but poor real behavior
Root cause: LiteSpeed JS Delay (Guest Mode)
2. Fix Broken Header (CRITICAL FIRST STEP)
Where to do this
WordPress Admin → LiteSpeed Cache → General → Guest Mode
Steps
- Set Guest Mode → OFF
- Set Guest Optimization → OFF
Then go to
LiteSpeed Cache → Page Optimization → JS
- Set Delay JS → OFF
- Set Load JS Deferred → OFF
This restores proper JS execution.
3. Apply Controlled JS Delay (SAFE METHOD)
Where
LiteSpeed Cache → Page Optimization → Tuning
Step
Add ONLY this in JS Delayed Includes:
googletagmanager gtag adsbygoogle googleads gsi/client
Then add in JS Delayed Excludes
ct-scripts elementor-frontend elementor-webpack woocommerce wc-add-to-cart wc-cart-fragments
Do NOT add anything else.
4. Fix LCP Image (Product Pages)
Problem
LCP image was lazy loaded.
Where to add code
WordPress Admin → Appearance → Theme File Editor → functions.php
OR use Code Snippets plugin
Step
add_filter( 'wp_get_attachment_image_attributes', function( $attr ) {
if ( is_product() ) {
$attr['loading'] = 'eager';
$attr['fetchpriority'] = 'high';
}
if ( is_single() ) {
if ( isset( $attr['class'] ) && strpos( $attr['class'], 'wp-post-image' ) !== false ) {
$attr['loading'] = 'eager';
$attr['fetchpriority'] = 'high';
}
}
unset( $attr['data-src'] );
unset( $attr['data-srcset'] );
return $attr;
}, 999 );
After adding
- Save file
- Go to LiteSpeed → Toolbox → Purge All
- Hard refresh browser
5. Reduce Render Blocking CSS
Where
LiteSpeed Cache → Page Optimization → CSS
Set
- CSS Minify → ON
- CSS Combine → OFF
- Generate UCSS → OFF
- Load CSS Asynchronously → ON
- Font Display → Swap
Then
- Click Run CCSS Queue Manually
- Wait 30–60 seconds
- Purge All Cache
6. Fix WooCommerce Overhead
Where to add code
WordPress → functions.php OR Code Snippets
Step
add_action( 'wp_enqueue_scripts', function() {
if ( is_cart() || is_checkout() || is_account_page() ) return;
wp_dequeue_script( 'wc-cart-fragments' );
wp_deregister_script( 'wc-cart-fragments' );
}, 20 );
After
- Purge cache
- Test cart functionality
7. LiteSpeed Cache Final Settings
Cache
- Enable Cache → ON
- Cache Logged-in Users → OFF
- Cache Commenters → OFF
- Cache REST API → ON
- Cache Login Page → OFF
- Cache Mobile → OFF
JS
- JS Minify → ON
- Delay JS → OFF
- Deferred → OFF
Media
- Lazy Load Images → ON
- Exclude LCP images (handled via code above)
8. Cloudflare (Free Plan)
Where
Cloudflare Dashboard → Your Domain
Use only
- CDN → ON
Do NOT enable
- Rocket Loader
- Extra JS optimization
9. Testing Process
Tool
https://pagespeed.web.dev/
Test pages separately
- Homepage
- Product page
- Blog post
Focus on
- LCP
- TBT
- CLS
10. Final Results
- Homepage → ~98 score
- Product page → LCP ~3.2s
- Post page → LCP ~3.2s
- Stable UI across all pages
11. Key Rules (DO NOT BREAK)
- Never enable global JS delay
- Never lazy load LCP image
- Always prioritize critical resources
- Delay only third-party scripts
12. Final Conclusion
Performance optimization is not about aggressive tricks.
It is about:
- Correct loading order
- Understanding browser behavior
- Protecting critical rendering path
This setup ensures:
- High performance
- Stable frontend
- No functional breakage
Frequently Asked Questions
Why did the header menu break after enabling LiteSpeed optimization?
The header broke because LiteSpeed’s JS Delay rewrote and postponed core scripts (like Blocksy and WooCommerce). These scripts must run immediately for menus and dropdowns to work.
Is JS Delay good for performance?
JS Delay improves PageSpeed scores but can break functionality if applied globally. It should only be used for third-party scripts like analytics and ads, not for core site scripts.
Why should LCP images not be lazy loaded?
LCP (Largest Contentful Paint) measures the time to render the main visible content. If that image is lazy loaded, it gets delayed, increasing load time and hurting performance.
What is fetchpriority=”high” and why is it used?
fetchpriority=”high” tells the browser to prioritize loading a specific resource. It ensures that the main image (LCP element) loads as early as possible.
Why not use CSS Combine in LiteSpeed?
CSS Combine can break layout and caching behavior, especially with modern HTTP/2/3. Keeping CSS separate allows better parallel loading and stability.
Why is Load CSS Asynchronously useful?
It reduces render-blocking by loading only critical CSS first and deferring the rest. This improves visual load speed without affecting functionality when configured correctly.
Why remove WooCommerce cart fragments on non-cart pages?
Cart fragments trigger unnecessary AJAX requests on every page. Removing them reduces load and improves performance without affecting checkout functionality.
Why is Cloudflare optimization limited on the free plan?
The free plan provides CDN and caching but lacks advanced features like Rocket Loader controls or deep optimization tools. Optimization is handled mainly via LiteSpeed.
Why did the PageSpeed score drop after optimization?
Some optimizations (like async CSS) may reduce synthetic scores but improve real-world performance. Actual metrics like LCP and TBT are more important than the score.
What is the safest way to optimize WordPress performance?
Focus on prioritizing critical resources, avoiding aggressive JS delay, optimizing images properly, and testing each change step-by-step instead of applying bulk optimizations.