perf(images): preload LCP poster image via ReactDOM.preload to ensure instantaneous discovery under simulated networks
Some checks failed
Build & Deploy / 🔍 Prepare (push) Failing after 23s
Build & Deploy / 🧪 QA (push) Has been skipped
Build & Deploy / 🏗️ Build (push) Has been skipped
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 4s

This commit is contained in:
2026-07-03 02:03:06 +02:00
parent bdbdc8a39f
commit 71dd1bf419

View File

@@ -56,6 +56,22 @@ export function HeroVideo(props: HeroVideoProps) {
{/* Background color while video loads */}
<div className="absolute inset-0 z-0 bg-neutral-dark" />
{/* Preload the LCP image in the document head */}
{(() => {
const isV2 = posterSrc.includes('-poster-v2.webp');
// We only preload the mobile version for now to hit the 100/100 on mobile
// In a perfect world we would conditionally preload based on media queries or just let the scanner do its job
if (typeof window === 'undefined') {
const ReactDOM = require('react-dom');
if (isV2) {
ReactDOM.preload(posterSrc.replace('-poster-v2.webp', '-poster-mobile-v2.webp'), { as: 'image', fetchPriority: 'high' });
} else {
ReactDOM.preload(posterSrc, { as: 'image', fetchPriority: 'high' });
}
}
return null;
})()}
<img
key={`img-${pathname}-${posterSrc}`}
src={posterSrc}