I'm trying to up my lighthouse scores by loading a video after the page has fully loaded. It's after the fold and will not be seen until scroll so I want it to load everything on the page first so it can get a quick FCP and then load the video after everything.
This doesn't seem to work in terms of upping my Lighthouse score...
export default function AboutUs() {
const [loadVideos, setLoadVideos] = useState(false)
useEffect(() => {
setLoadVideos(true)
}, [])
.....etc etc.....
{loadVideos && (
<video
autoPlay
muted
playsInline
loop
preload="none"
poster="/images/charge_poster.jpg"
>
<source src="/videos/charge.mp4" type="video/mp4" />
</video>
)}
..Closing tags etc
Is there a better way? I don't want to load on scroll cause then the video will have to load when they are already there. Just load after HTML, CSS and Images preferably.
Thanks
The preload attribute is ignored if autoplay is present.