Reducing your LCP image load time is one of the most impactful performance improvements you can make — and it's far more achievable than most site owners realize. You don't need a CDN, a development team, or a cloud image service. With five targeted steps, most websites can move their LCP from Poor (4+ seconds) to Good (under 2.5 seconds) in a single afternoon. This guide walks you through each step precisely, with the actual HTML, the right settings, and the measurement methodology.
The process follows a clear sequence: identify the LCP image, optimize it, implement it correctly, and verify the result. Each step builds on the last, and skipping any one of them often means leaving significant LCP improvement on the table. Let's work through it systematically.
Step 1: Identify Your LCP Image via PageSpeed Insights
Run both mobile and desktop audits. Mobile is more important for ranking signals — always fix mobile first. The report takes 15-30 seconds to generate.
What to look for:
- The LCP value (in seconds) at the top of the report
- The LCP element screenshot in the "Diagnostics" section — this shows exactly which element is being measured
- The "Largest Contentful Paint element" diagnostic entry, which shows the CSS selector path to the LCP element
- The "Efficiently encode images" opportunity — if your LCP image appears here with potential savings, image format/compression is the fix
Record your baseline: Write down your current LCP time (e.g., "4.8s — Poor"). You'll compare this after making changes.
Baseline Measurement Checklist
- Current mobile LCP: ______ seconds
- LCP element identified: (img / background-image / other)
- LCP image filename and URL: ______
- LCP image current file size: ______ KB
- Current CLS score: ______
- Any "Preload LCP image" opportunity shown: Yes / No
Step 2: Compress and Convert to WebP via ConvertiImage
Once you know which image is your LCP element, download the original (or locate it on your server). Then use ConvertiImage to convert and compress it:
- Open ConvertiImage in your browser
- Upload your original image (JPEG, PNG, or other format)
- Select WebP as the output format
- Set quality to 82 (good balance of size and visual quality for photographs)
- Click Convert and download the .webp file
- Compare file sizes: if the WebP isn't at least 25% smaller than your original, try quality 78
Size targets for LCP images:
- Desktop hero (1200px wide): aim for under 180 KB in WebP
- Mobile hero (750px wide): aim for under 90 KB in WebP
- Blog header (1000px wide): aim for under 130 KB in WebP
Sizing Your LCP Image Correctly
Before compressing, check if your image is oversized. If you're displaying a 600px-wide image but your original is 2000px, resize it first:
- Find the CSS max-width of your image container (inspect element in DevTools)
- Multiply by 2 for retina screens (e.g., 800px container = 1600px image at 2x)
- Resize your image to this intrinsic width before converting to WebP
- This step alone can reduce file size by 60-80% compared to serving at original resolution
Step 3: Add rel="preload" in Your HTML Head
Without a preload hint, the browser discovers your LCP image only after parsing HTML and CSS — typically 300-600ms into page load. A preload link tag moves this discovery to the very start of the network waterfall.
Add this line in your HTML <head>, as early as possible (ideally before any external CSS):
Step 4: Add width, height, and fetchpriority Attributes
Your optimized image needs to be implemented correctly in HTML. Three attributes work together to prevent CLS and signal priority to the browser:
Attribute Reference Guide
| Attribute | Value | Purpose |
|---|---|---|
| width | Intrinsic pixel width (e.g., 1200) | Prevents CLS by reserving space |
| height | Intrinsic pixel height (e.g., 630) | Prevents CLS by reserving aspect ratio |
| fetchpriority | "high" | Boosts download priority for LCP element |
| loading | Omit or "eager" for LCP | Never use "lazy" on LCP image |
| alt | Descriptive text | Accessibility + SEO |
Step 5: Re-Measure LCP and Verify Improvement
After deploying your changes, run PageSpeed Insights again on the same URL. Compare the results systematically:
- LCP time: Should drop by at least 1-2 seconds
- CLS score: Should be under 0.1 (Good)
- Mobile Performance Score: Should increase by 10-25 points
- "Efficiently encode images": Should no longer appear if WebP conversion worked
- "Preload LCP image": Should no longer appear if preload was implemented correctly
If LCP didn't improve enough: Check that your server is actually serving the WebP file (use DevTools Network tab, look for Content-Type: image/webp) and that the preload link is in the head (not at the bottom of the body).
Troubleshooting: Common LCP Optimization Problems
| Problem | Symptom | Likely Cause | Fix |
|---|---|---|---|
| LCP didn't improve after WebP conversion | Same LCP time | Server still caching old JPEG; CDN not purged | Clear server cache and CDN cache after uploading WebP |
| Preload not working | "Preload LCP image" still shown | Preload tag added in body, not head; incorrect href path | Move link rel="preload" to inside <head>, verify path matches actual image URL |
| CLS still high after adding width/height | CLS score unchanged | Width/height attributes don't match intrinsic image dimensions | Check actual image dimensions (right-click → Inspect in DevTools) and match values exactly |
| WebP not loading in Safari | Broken image icon in Safari | No JPEG fallback, using WebP-only src | Use picture element with type="image/webp" source and JPEG img fallback |
| PageSpeed shows "Properly size images" after optimization | Opportunity still listed | Image intrinsic dimensions still larger than display size | Resize image to match display size (×2 for retina) and use srcset |
Full Core Web Vitals Image Optimization Guide — All 5 Metrics
WebP vs AVIF vs JPEG: Which Format Gets the Best LCP Score?
