Carga Diferida del Reproductor

2 min read

El reproductor de audio utiliza carga diferida por defecto. No carga su JavaScript ni su CSS hasta que el visitante hace scroll cerca de él. Esto mantiene rápido el Largest Contentful Paint (LCP) de tu página.

Qué hace la carga diferida

  • Al cargar la página, se muestra un pequeño marcador de posición donde irá el reproductor
  • El JavaScript y CSS del reproductor completo NO se cargan todavía
  • Cuando el visitante hace scroll hasta 500px del reproductor, el reproductor completo se carga y reemplaza al marcador
  • La transición es visualmente fluida (normalmente menos de 100 ms)

Por qué mejora las Core Web Vitals

Sin carga diferida, cada página con un reproductor paga el coste del JS y CSS del reproductor en la carga inicial. Con carga diferida:

  • LCP: sin cambios, el reproductor no está en el contenido visible sin scroll
  • INP: sin cambios, no se ejecuta JS pesado al cargar
  • CLS: sin cambios, el marcador tiene la misma altura que el reproductor final

Cuándo desactivarla

La carga diferida está activada por defecto. Desactívala si:

  • Tu reproductor está siempre visible sin hacer scroll (poco frecuente)
  • Usas autoplay y quieres que el reproductor esté listo al instante (muy poco frecuente)
  • Quieres probar sin carga diferida para depurar errores

Cómo desactivarla

  1. Ve a Texto a Voz → Avanzado.
  2. Cambia Carga diferida del reproductor a desactivado.
  3. Guarda.

Cómo funciona técnicamente

  • El plugin usa IntersectionObserver para detectar cuándo el reproductor entra en el campo de visión
  • Al detectarse la intersección, carga dinámicamente el JS y CSS necesarios
  • Una vez cargados, los scripts quedan en caché en el navegador durante el resto de la sesión

Los navegadores sin IntersectionObserver (muy antiguos) cargan los scripts al cargar la página.

Casos límite conocidos

Reproductor dentro de un elemento oculto

Si tu reproductor está dentro de una sección con display: none (como un acordeón contraído), la carga diferida no se activa hasta que la sección se vuelve visible. Esto es lo esperado, no tiene sentido cargar lo que no se muestra.

Autoplay del audio

Si configuras autoplay en el reproductor y usa carga diferida, no reproducirá hasta que el visitante haga scroll hasta él. El autoplay se inicia en cuanto el reproductor termina de cargar.

Páginas relacionadas