Faster loading and a stable layout, measured with Core Web Vitals. On image-heavy static sites, image handling matters most.
Project requirement
Image-heavy static pages that load slowly and shift their layout on mobile.
Technical question
Which image attributes and loading rules improve LCP and CLS without changing the design?
Validation
The build adds the attributes automatically; tests cover sizes, priorities and srcset rules on sample HTML.
Decision
Size attributes on every image, high priority for the first visible images, lazy loading for the rest, and WebP variants only where CSS fixes the width.
Core Web Vitals thresholds as of 2026-10: LCP up to 2.5 s, INP up to 200 ms and CLS up to 0.1 count as good.
Fewer render-blocking requests help as well: self-hosted fonts with one preload, deferred scripts and no full-screen preloader.
On this portfolio, Lighthouse CI runs on every push and pull request with fixed thresholds per category (performance 0.9, accessibility 0.95, best practices 0.9, SEO 0.95), reported as warnings.
The build post-processes the rendered HTML with Pillow: real image sizes, loading priority and WebP srcset variants from a content-hash cache.