Minimize Main-Thread Work – Practical Guide (WordPress + WooCommerce) Sites
The browser main thread is responsible for rendering the page, executing JavaScript, and handling user interactions. When it is overloaded, the website feels slow, unresponsive, and laggy.
Tools like Google PageSpeed Insights report this as “Minimize main-thread work”.
Why Main-Thread Work Matters
- Delays page interaction
- Causes lag in scrolling and clicks
- Reduces Core Web Vitals performance
What Causes High Main-Thread Work
1. Heavy JavaScript Execution
- Large JS files
- Unused scripts still loading
- Analytics and third-party scripts
2. Layout & Rendering Cost
- Too many elements on page
- Complex layouts
- Dynamic content loading late
3. Script Parsing & Compilation
- Large bundles
- Multiple JS files
Real Optimization Example
| Category | Before | After |
|---|---|---|
| Script Evaluation | ~1860 ms | ~420 ms |
| Layout | ~1650 ms | ~320 ms |
| Main Thread | ~4.3 s | ~1.5 s |
This improvement was achieved without breaking site functionality.
How to Reduce Main-Thread Work
1. Delay Non-Critical JavaScript
Use LiteSpeed Cache to delay scripts that are not required immediately.
LiteSpeed JS Settings (Recommended)
- Load JS Deferred: Delayed
LiteSpeed Tuning (Recommended)
- JS Deferred / Delayed Excludes: jquery, jquery.min.js
- JS Excludes: googlesitekit, googlesitekit-events, googlesitekit-events-provider-woocommerce, gsi/client
- JS Delayed Includes: adsbygoogle, googleads
This setup ensures critical scripts load first, while non-essential scripts load later.
2. Avoid Over-Excluding Scripts
Excluding too many scripts from delay cancels optimization. Keep exclusions minimal and only for critical dependencies.
3. Reduce DOM Size
- Reduce products per section (16 → 8)
- Reduce categories shown (16 → 8)
- Reduce columns (5 → 3)
Fewer elements = lower layout cost.
4. Fix Layout Stability (CLS)
- Set aspect ratio for images
- Reserve space for hero and category sections
This prevents layout shifts and reduces recalculation work.
5. Remove Unused Styles & Scripts
- Disable unused WooCommerce block styles
- Remove unnecessary WordPress scripts
6. Keep CSS Clean
- Remove duplicate rules
- Avoid excessive styling
- Keep layout simple
What NOT to Do
- Do not remove WooCommerce scripts blindly
- Do not combine JS aggressively without testing
- Do not add random optimization snippets
- Do not ignore console errors
Recommended Targets
- Main-thread work: 1.0 – 1.5 seconds
- Script evaluation: below 500 ms
- Layout: below 400 ms
Conclusion
Main-thread optimization is not about removing everything. It is about loading the right resources at the right time and reducing unnecessary layout work.
FAQ
What is main-thread work?
Main-thread work is the time the browser spends running JavaScript, rendering layout, and handling user actions on a page.
Why is high main-thread work bad?
High main-thread work makes the site slow, delays clicks and scrolling, and reduces overall user experience.
How can I reduce main-thread work in WordPress?
You can reduce it by delaying JavaScript, removing unused scripts, reducing page elements, and simplifying layouts.
What is the best LiteSpeed JS setting?
Set JS to delayed mode, exclude only critical scripts like jQuery, and avoid over-excluding other scripts.
Does reducing products on homepage help?
Yes. Fewer products reduce layout calculations and improve main-thread performance.
What is a good main-thread work value?
A good value is between 1.0 to 1.5 seconds for most WordPress sites.