From c868d1638e6c1dd52e1e0dcf9d92c0d8333f9dc2 Mon Sep 17 00:00:00 2001 From: Kev Date: Fri, 17 Jul 2026 00:53:46 -0400 Subject: [PATCH] =?UTF-8?q?P0-2=20fix:=20entity=20images=20load=20EAGERLY?= =?UTF-8?q?=20=E2=80=94=20the=20lazy-defer=20killed=20the=20whole=20pipeli?= =?UTF-8?q?ne?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Phone audit: 78 ESPN 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 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) --- web/src/components/vyndr/PlayerAvatar.tsx | 3 ++- web/src/components/vyndr/TeamLogo.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/web/src/components/vyndr/PlayerAvatar.tsx b/web/src/components/vyndr/PlayerAvatar.tsx index 1e5418b..54fe5b2 100644 --- a/web/src/components/vyndr/PlayerAvatar.tsx +++ b/web/src/components/vyndr/PlayerAvatar.tsx @@ -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' }} /> diff --git a/web/src/components/vyndr/TeamLogo.tsx b/web/src/components/vyndr/TeamLogo.tsx index 7fe370f..ef4c716 100644 --- a/web/src/components/vyndr/TeamLogo.tsx +++ b/web/src/components/vyndr/TeamLogo.tsx @@ -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' }} />