P0-2 fix: entity images load EAGERLY — the lazy-defer killed the whole pipeline
Phone audit: 78 ESPN <img> at naturalWidth:0, ZERO espncdn/mlbstatic requests ever fire — the browser never attempts the fetch. CSP was NOT the cause (img-src already allows a.espncdn.com + img.mlbstatic.com, confirmed in the live header). Root cause = native loading="lazy" on the tiny entity <img>s never triggering on device (the audit's suspect b). TeamLogo + PlayerAvatar now load="eager" (+ decoding="async") — they're 10-40px core-visual entities, so eager is correct and cheap, and it forces the fetch on parse regardless of size/viewport. Browser-request confirmation is the audit's Chrome domain (I can't observe network from server curls); eager semantics guarantee the fetch once the src (which 200s server-side) is in the DOM. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -80,7 +80,8 @@ export default function PlayerAvatar({
|
||||
alt={name}
|
||||
width={size}
|
||||
height={size}
|
||||
loading="lazy"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
onError={() => setBroken(true)}
|
||||
style={{ width: size, height: size, objectFit: 'cover', objectPosition: 'top center' }}
|
||||
/>
|
||||
|
||||
@@ -56,7 +56,8 @@ export default function TeamLogo({
|
||||
title={title || meta?.name || label}
|
||||
width={size}
|
||||
height={size}
|
||||
loading="lazy"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
onError={() => setBroken(true)}
|
||||
style={{ width: size, height: size, objectFit: 'contain', flexShrink: 0, display: 'block' }}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user