LCP — Loading Performance

Slow LCP —
Unoptimized Hero Image

Your largest above-the-fold element is loading last. Google noticed.

Where to find it: PageSpeed Insights > LCP Element > Opportunities > Properly Size Images & Efficiently Encode Images

What It Is

LCP — Largest Contentful Paint — measures how long it takes for the largest visible element on the page to fully render. In the vast majority of sites, that element is the hero image: the large banner or background image at the top of the page. Google's target is under 2.5 seconds. Most unoptimized hero images on shared hosting fail this comfortably, often hitting 4–8 seconds. The hero image is the single most common LCP failure point agencies find — and also the most fixable.

Why It Matters

LCP is a confirmed Google ranking signal. Pages that fail the 2.5-second threshold are at a direct ranking disadvantage in competitive searches. Beyond rankings, research consistently shows that LCP under 2.5 seconds correlates with 15–25% higher conversion rates. A slow-loading hero image isn't just an SEO problem — it's a first impression problem. Users see a blank space where the most important visual should be, and many bounce before the image ever loads.

Root Diagnostics

Common Causes

Understanding why this failure occurs is the first step to fixing it permanently.

Image Not Compressed

The hero image is being served at full original file size — often 1–5MB. Browsers must download the entire file before painting it, directly adding seconds to LCP.

Wrong Image Format

The hero image is served as JPEG or PNG instead of WebP or AVIF. Modern formats deliver the same visual quality at 25–40% smaller file sizes, reducing download time proportionally.

No Preload Hint

The browser doesn't know to prioritize the hero image until it parses the full HTML and CSS — which means it starts downloading the image late in the waterfall, after dozens of other resources.

No CDN

The image is served directly from the origin server. Every visitor downloads from the same location regardless of geography, adding latency for anyone not near the server's data center.

Interactive Standard Operating Procedure

The Fix Blueprint (Interactive SOP)

Check off each step to monitor your implementation progress live!

Implementation Progress: 0% Completed (0/7)

1. Identify the LCP Element

Run the URL through PageSpeed Insights (pagespeed.web.dev). Scroll to the Diagnostics section and find 'Largest Contentful Paint element.' Confirm it's the hero image. Note the current LCP score in both Field Data and Lab Data.

2. Compress and Convert to WebP

Export the hero image at the correct display dimensions — don't serve a 3000px image in a 1200px container. Compress it using Squoosh (squoosh.app, free) targeting under 100KB for most hero images. Export as WebP format.

3. Add a Preload Hint in the Page Head

Add the following line inside the <head> tag of the page: <link rel='preload' as='image' href='hero-image.webp'>. This tells the browser to start downloading the image immediately — before parsing the rest of the HTML.

4. Set Explicit Width and Height Attributes

Add width and height attributes to the hero img element matching the image's intrinsic dimensions. This prevents CLS during load and helps the browser allocate layout space before the image arrives.

5. Implement a CDN

Route traffic through Cloudflare (free tier available). Once configured, Cloudflare caches and serves your assets from edge nodes globally — reducing physical distance between the image and each visitor's browser.

6. Validate with PageSpeed Insights

Re-run the page through PageSpeed Insights after implementing changes. Confirm LCP score has moved from Poor (above 4s) into Needs Improvement (2.5–4s) or Good (under 2.5s). Field data takes 28 days to fully update.

7. Monitor in Search Console

Check the Core Web Vitals report in Google Search Console. The page should move from the Poor URLs list to Needs Improvement or Good within 28 days of the field data collection window completing after your fix.

Tools

PageSpeed Insights
Free (pagespeed.web.dev) | Identifies the LCP element, current score, and specific image optimization opportunities
Squoosh
Free (squoosh.app) | Google's browser-based image compression tool — converts to WebP and shows file size reduction in real time
Cloudflare
Free tier available | CDN, caching, and image optimization — the fastest way to improve TTFB and asset delivery globally

Time to Fix

30 minutes

To identify LCP element and audit image

1–3 hours

Compress + convert + preload + CDN setup

Pro Tip

Check both mobile and desktop LCP scores separately.

Google uses mobile field data as its primary ranking signal for Core Web Vitals. A hero image that passes on desktop often fails on mobile due to slower connection speeds and smaller CPU capacity. Always run PageSpeed Insights in Mobile mode first, and test on real mobile devices using Chrome DevTools device emulation.

Slow LCP — Unoptimized Hero Image