Introduction to Largest Contentful Paint (LCP)

Largest Contentful Paint, commonly referred to as LCP , is one of the Core Web Vitals metrics defined by Google to measure real-world loading performance. Since page speed is a ranking factor for SEO especially for mobile browsing, it is more important than ever to focus what your LCP scores are. 

LCP tracks how long it takes for the largest visible content element inside the viewport to fully render. This often includes:

• Hero banners
• Large background sections
• Image sliders or carousels
• Prominent content blocks
• Feature sections above the fold

Based on the standards used in Google PageSpeed Insights:

• Good: under 2.5 seconds
• Needs improvement: 2.5 to 4.0 seconds
• Poor: over 4.0 seconds

When the largest visible element loads slowly, users perceive the entire website as slow, regardless of backend speed or server performance.

The succeeding section will be useful for both SEO practitioners, specialists, or website owners who have web developer and technical support.

How to identify LCP issues on your webpage (e.g. carousel of logos)

Step 1: Confirm the LCP element

To verify the issue:

1. Run the website in Google PageSpeed Insights (https://pagespeed.web.dev)
2. Expand the “Largest Contentful Paint element” section
3. Inspect the highlighted DOM element

Then validate using DevTools in Google Chrome :

1. Open DevTools
2. Go to the Performance tab
3. Record a page load
4. Locate the LCP marker
5. Click the marker to identify the exact container

In this case, the carousel wrapper <div> is the LCP element.

Step 2: Reduce the initial load of the carousel

Many sliders load all images at once during initialization.

Recommended adjustments:

• Load only the first visible slide initially
• Lazy-load non-visible slides
• Disable auto-play during initial render
• Defer slider JavaScript when possible

If the carousel is not critical for immediate user action, consider moving it below the fold to prevent it from becoming the LCP element.

Step 3: Optimize all images inside the carousel

Even though the container is flagged as LCP, image weight still contributes to delay.

Best practices for image optimization:

• Resize logos to the actual display dimensions
• Convert to web-friendly and optimized versions of file types, e.g., WebP format, or JPG saved for web
• Avoid oversized PNG files; by default PNG filetypes have larger file sizes than other image files
• Compress images properly; use plugins or automated compression tools
• Remove unnecessary metadata

Even small logos can significantly affect load timing when multiple files are requested simultaneously.

Step 4: Replace background images with <img> elements

If the carousel uses CSS background images:

.slide {
background-image: url(logo.png);
}

Browsers typically prioritize <img> elements more effectively.

Improved structure:

<img src="logo.webp" alt="Certification logo" loading="eager" fetchpriority="high">

Using fetchpriority="high" ensures the first visible logo is prioritized appropriately.

Step 5: Reduce render-blocking CSS and JavaScript

Carousels often depend on third-party libraries, which can delay rendering.

Possible fixes and improvements:

• Inline critical CSS for above-the-fold content
• Defer non-essential JavaScript
• Minify and combine CSS files
• Remove unused slider features
• Delay third-party scripts

The objective is to allow the browser to render visible content before executing enhancements.

Step 6: Consider simplifying the layout

In some cases, replacing the carousel with a static grid layout improves performance immediately.

Carousels add:

• JavaScript execution overhead
• Layout recalculations
• Additional image requests

If movement or animation is not necessary for user experience, a simple responsive grid may produce better LCP results.

Actual demonstration: fixing a logo carousel affecting LCP

In this video demonstration, the homepage contains a carousel of logos positioned above the fold. These logos represent applications and technology, affiliations, product brands, or industry partners.

After running the site through PageSpeed Insights and verifying with Dev Tools in Google Chrome , the LCP element is identified not as a single logo image but as the entire carousel container. Because the full carousel section occupies a large portion of the viewport, the browser treats it as the dominant visible content block.

The performance issue occurs due to:

• Multiple images are loading simultaneously
• JavaScript is initializing the slider before the layout stabilizes
• Delayed image decoding
• CSS and script dependencies are blocking early rendering

This means the optimization approach must address how the whole carousel loads, not just by compressing individual logos.

Watch the video tutorial that shows a quick solution of how moving a carousel of logos from above the fold improved the LCP score of a services webpage.

Before and after results

In the YouTube video demonstration:

• Initial LCP: 4.0+ seconds
• After optimization: below 2.5 seconds

Improvements were achieved by:

• Reducing simultaneous image loads
• Optimizing logo file sizes
• Prioritizing only the first visible asset
• Deferring non-critical scripts
• Simplifying initialization behavior

No major redesign was required. Only proper prioritization, element positioning, and asset control were implemented.

Key takeaways

1. LCP may be an entire section, not just a single image
2. Above-the-fold carousels frequently become LCP elements
3. Loading multiple images simultaneously delays rendering
4. JavaScript sliders can block visual completion
5. Strategic asset prioritization significantly improves performance

Most LCP issues in business and corporate websites are related to how above-the-fold sections are structured and loaded. Identifying the correct element and optimizing its loading behavior often produces measurable improvements without extensive redevelopment.

Contact us if you need help optimizing your websites, both for better user experience and/or for SEO and search ranking.