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
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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user