I am looking to improve my lighthouse scores by delaying the loading of a video until after the page has completely loaded. Since the video is below the fold and only visible upon scrolling, I want it to wait for everything else on the page to load first in order to achieve a fast FCP (First Contentful Paint), and then load the video afterwards.
However, this approach does not seem to be effective in terms of enhancing 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 more efficient way to achieve this goal? I prefer not to load the video on scroll as it would result in the video loading while the user is already viewing the content. Ideally, I would like the video to load after the HTML, CSS, and Images have loaded.
Thank you