Rules Hub
Coding Rules Library
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP2stack specificStack: React
performanceimageslcp
Eager/priority-load only above-the-fold images
Mark only images visible in the initial viewport as eager/`priority`; let everything below the fold lazy-load (the default). Eager-loading off-screen images competes with the LCP image for bandwidth and hurts initial load performance.
PR: profico-org-corpus batch2 (all stacks/products)Created: Jul 26, 2026
Bad example
Old codetsx
| 1 | posts.map((p) => <Image src={p.img} priority alt={p.title} />) |
Explanation (EN)
Every image, including those far down the page, is forced to load immediately.
Objašnjenje (HR)
Good example
New codetsx
| 1 | posts.map((p, i) => <Image src={p.img} priority={i === 0} loading={i === 0 ? 'eager' : 'lazy'} alt={p.title} />) |
Explanation (EN)
Only the first, above-the-fold image is prioritized; the rest lazy-load.
Objašnjenje (HR)