If your design system can only apply `loading=lazy` or `fetchpriority=high` blindly, it may be safer not to apply them at all.

CSSWizardry's blog is a resource for frontend developers and web designers seeking to improve their CSS skills and build more maintainable and scalable CSS codebases. Through tutorials, best practices, and case studies, CSSWizardry offers insights into CSS architecture, naming conventions, and modular design principles. Readers can learn about scalable CSS methodologies, responsive web design techniques, and performance optimization strategies to create efficient and maintainable stylesheets. Additionally, CSSWizardry provides updates on the latest CSS specifications, browser support, and front-end tooling to help developers stay up-to-date with the rapidly evolving landscape of web development.

CSS Wizardry

When a design system or CMS cannot determine whether an image will appear above or below the fold, blindly applying `loading=lazy` or `fetchpriority=high` can actively harm performance rather than help it. Lazy-loading an LCP candidate delays the most important image; marking multiple images as high priority turns a useful hint into noise. The safer default is to omit these attributes entirely and let the browser use its own heuristics. These are contextual hints, not magic speed-up attributes, and they only work when applied with certainty. If a system gains enough context to apply them precisely, it should — but until then, doing nothing is better than doing the wrong thing.

When All You Can Do Is All or Nothing, Do Nothing – CSS Wizardry

Missed Opportunities Are Safer Than Bad Optimisations