• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

151
Views
How to defer after the fold video load after page loads in React/NextJS

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

enter image description here

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

The preload attribute is ignored if autoplay is present.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error