Image Optimization
Images are usually the biggest bytes on the page, and the LCP element is often an image. Treat the LCP image differently than offscreen content.
One Image Pipeline
Be explicit about which tool/system owns:
- compression and resizing
- WebP/AVIF generation
- CDN delivery
- lazy loading
caution
Avoid enabling WebP conversion and lazy loading in multiple places. Duplicated image pipelines create hard-to-debug behavior.
Step 1: Fix the LCP Image
For the LCP image (often the hero/featured image):
- serve the correct dimensions (do not ship a 3000px image to render at 900px)
- compress aggressively without visible artifacts
- do not lazy load it
- give it request priority
Make the LCP image high priority
<img src="/path/hero.webp" width="1600" height="900" loading="eager" fetchpriority="high" decoding="async" alt="">
Optional: preload the hero image
Only preload if the same image is reliably the LCP element for that page/template.
Preload a hero image (template-level)
<link rel="preload" as="image" href="/path/hero.webp">
Step 2: Optimize Offscreen Images
- Lazy load images below the fold.
- Make sure WordPress generates responsive images (
srcset) by using proper media sizes. - Avoid background images for content that should be indexable or that is critical for LCP.
Step 3: Prevent CLS
- Ensure images and iframes have
widthandheight(or a reserved aspect ratio) so layout space is allocated before they load. - Reserve space for embeds/ads.
Step 4: Fix Logos and Icons
- Use SVG for logos and simple icons.
- Keep hero imagery as raster (WebP/AVIF) when it is photographic.
Verification
- DevTools Network: the LCP image is not
loading=lazy. - Images are served as modern formats where supported (WebP/AVIF).
- No visible layout shift when images load.
Checklist
- One clear image pipeline (no duplicated WebP/lazy load).
- LCP image is eager + high priority.
- Offscreen images are lazy loaded.
- Image dimensions prevent CLS.