diff --git a/components/blocks/HeroVideo.tsx b/components/blocks/HeroVideo.tsx index 599fc555b..3b596b269 100644 --- a/components/blocks/HeroVideo.tsx +++ b/components/blocks/HeroVideo.tsx @@ -56,6 +56,22 @@ export function HeroVideo(props: HeroVideoProps) { {/* Background color while video loads */}
+ {/* 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; + })()} +