• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

153
Vistas
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 Respuestas
Responde la pregunta

0

The preload attribute is ignored if autoplay is present.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda