LCP Optimization – Practical Implementation Guide (WordPress)
This guide explains how to identify and fix Largest Contentful Paint (LCP) issues in a real WordPress setup (Elementor + LiteSpeed environment).
Every section follows a simple structure: what → where → how → result.
Understanding LCP
LCP = time taken for the main visible element to load
Usually one of:
- Hero image
- Page title (H1)
- Banner section
Target: LCP under 2.5 seconds
Identify the LCP Element
Where
- Open site → Right click → Inspect
- Go to Lighthouse / Performance
What to look for
“Largest Contentful Paint element”
You can also use PageSpeed Insights. Open your site, scroll to the performance section, and check Largest Contentful Paint element. It shows the exact element (image, text, or container) causing delay.
Do not guess. Always confirm.
Fix Image-Based LCP (Most Common Case)
Problem: Hero image loads late → slow LCP
Use <img> instead of background image
Where:
- Elementor → Edit Hero Section
- Check: Style → Background
How:
- Remove background image
- Add Image widget
- Select the same image
<!-- Avoid -->
<div style="background-image:url(hero.jpg)"></div>
<!-- Use -->
<img src="hero.webp" width="1600" height="900" loading="eager" fetchpriority="high" alt="">
Result: Browser prioritizes image → faster render
Optimize image format and size
Where:
- WordPress → Media Library
- LiteSpeed → Image Optimization
How:
- Convert to WebP
- Keep size under 100KB
Result: Faster loading → improved LCP
Preload hero image
Where:
- Appearance → Theme File Editor → header.php
How:
- Find </head>
- Add before it:
<link rel="preload" as="image" href="https://yourdomain.com/hero.webp">
Result: Image loads early → better LCP
Ensure Above-the-Fold Content Loads Immediately
Problem: Lazy load delays important content
Where
LiteSpeed → Page Optimization → Media
How
- Disable lazy load for hero image
- Exclude first image if needed
Result: Instant loading of main element
Fix CSS Blocking Issues
Problem: CSS loads late → layout builds slowly
Where
LiteSpeed → Page Optimization → CSS
How
- Turn OFF Load CSS Asynchronously
Result: Layout renders immediately
Fix Font Loading Delays (Text LCP Issues)
Problem: Text (especially headings) appears late or changes after load. This delays LCP when your main element is text.
What is actually happening
- Your site is loading fonts from external sources (like Google Fonts)
- Browser waits for font files to download
- Until then, text is delayed or re-rendered
Use system fonts (recommended, simplest)
Where:
- WordPress → Appearance → Customize → Typography (Blocksy or similar theme)
- OR Elementor → Site Settings → Typography
How:
- Change font family to a system font stack
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
Result:
- No external font request
- Text loads instantly
- LCP improves significantly
If using Google Fonts (keep them optimized)
Where:
- Theme Typography settings OR Elementor typography settings
How:
- Use only one font family
- Select only required weights (e.g., 400, 600)
- Remove extra variants (italic, thin, etc.)
Result: Smaller font files → faster loading
Enable “swap” behavior (no code editing required)
Where:
- LiteSpeed Cache → Page Optimization → CSS Settings
How:
- Enable Font Display Optimization (or similar option)
Result: Text shows immediately → faster LCP
Reduce Main Thread Work (JavaScript Blocking)
Problem: Heavy JavaScript blocks the browser from rendering the page. Until JS finishes executing, the browser cannot paint content → increases LCP.
What is actually happening
- Browser loads HTML → then starts executing JavaScript
- If scripts are heavy → CPU is busy
- Rendering (including LCP element) gets delayed
In simple terms: Your page is ready, but JavaScript is holding it back.
Enable JS Defer (Primary fix)
Where:
- WordPress Dashboard → LiteSpeed Cache → Page Optimization → JS Settings
How:
- Find Load JS Deferred
- Turn it ON
- Save changes
Important:
- After enabling, check your site carefully
- If something breaks, exclude that script in LiteSpeed
Result: Browser renders page first → runs JS later
Remove unnecessary JavaScript
Where:
- WordPress → Plugins
How:
- Delete unused plugins
- Avoid script-heavy plugins
- Remove duplicates
Result: Less JS → faster rendering
Delay non-critical JavaScript
Where:
- LiteSpeed → JS Settings
How:
- Enable Delay JS
Result: Only essential scripts load first
Avoid heavy elements above the fold
- Sliders
- Animations
- Multiple third-party scripts
Result: Clean initial render
Learn more:
Minimize Main Thread Work (Detailed Guide)
Elementor Layout Stability (Prevent Section Shifting)
Problem: Sections change size after load → layout movement
What is happening
- Containers load first
- Content loads later
- Section expands
Keep hero section simple
Where:
- Elementor → Edit first section
How:
- Use only heading + image
- Remove sliders, animations, tabs
Result: Stable layout
Set minimum height
Where:
- Elementor → Layout tab
How:
- Select Min Height
- Set value (e.g., 400px)
Result: Prevents expansion
CSS fallback (if needed)
Where:
- Appearance → Customize → Additional CSS
.elementor-section .e-con-inner {
min-height: 300px;
}
Result: Prevents container collapse
Avoid Fake Fixes (Do Not Hide the Problem)
Problem: Forcing layout size instead of fixing cause
#main {
min-height: 1000px;
}
Why this is wrong:
- Does not fix real issue
- Creates layout problems
- Only hides symptoms
Correct approach:
- Fix the actual slow element
Rule: Do not force layout globally
Testing Process
- Test in PageSpeed Insights
- Check mobile and desktop
- Use incognito mode
- Repeat tests
Target:
- LCP under 2.5 seconds
- Stable rendering
Conclusion
LCP optimization requires:
- Fast images
- Immediate layout rendering
- Minimal blocking resources
- Clean first screen
Core principle:
Everything visible at first load must appear instantly without delay.
FAQ
What is a good LCP score?
A good LCP score is under 2.5 seconds. Anything above that needs optimization.
What usually causes high LCP in WordPress?
Large images, blocking CSS, slow fonts, and heavy JavaScript are the most common causes.
Should I use lazy loading for hero images?
No. Hero images should load immediately, not lazily, because they are part of the first screen.
Does Elementor affect LCP?
Yes. Heavy layouts, animations, and dynamic widgets can delay rendering and increase LCP.
Is JS defer safe to enable in LiteSpeed?
Yes, but you must test your site after enabling it. Some scripts may need to be excluded.