Consejos de velocidad del sitio para una carga de video más rápida • Yoast


No hay forma de evitarlo: los archivos de video son grandes. Tan grandes, de hecho, que representaban 81% del tráfico de internet en 2021. Los videos cargados en cualquier página web dada probablemente serán el activo más grande con el que tendrá que lidiar un navegador. A menos que esté haciendo algo extremadamente inusual (y probablemente desaconsejable) con Images JavaScript, eso es.

Esto puede llevar a algunos desarrolladores web y SEO sin experiencia a mirar un gráfico de cascada de una herramienta de medición de velocidad del sitio y declarar que «el video es malo para la velocidad del sitio». Si bien esto no es cierto en su aplicación amplia, existen ciertas prácticas recomendadas que debe tener en cuenta. La configuración correcta asegurará que el video no ralentice su sitio y que su sitio no ralentice su video.

Los videos siempre se ven muy mal para la velocidad del sitio en los gráficos de cascada.

El objetivo es garantizar una reproducción de video fluida, sin almacenamiento en búfer y tiempos de carga increíblemente rápidos con todos los activos en su sitio web. En este esfuerzo, debe vigilar su vitales web centrales – Pintura con contenido más grande (LCP), Primera demora de entrada (FID) y Cambio de diseño acumulativo (CLS).

Los principales web vitals y sus siglas

Consejo 1: sirve tus videos a través de un CDN

La forma más sencilla de obtener videos en su sitio web de WordPress es simplemente cargar uno en su biblioteca de medios. Después de eso, puede incluirlo dentro de una página o publicación usando el bloque de video de Gutenberg.

Esta también es probablemente la peor manera de agregar videos. Es una receta para el almacenamiento en búfer garantizado tan pronto como el usuario presiona el botón de reproducción. Y eso afecta negativamente a First Input Delay (FID). Tal configuración requiere que el navegador cargue un archivo de video completo (no optimizado) directamente desde su servidor al hacer clic, sin problemas de servidor, ubicación del usuario o baja velocidad de conexión.

Revisar la Guía de Yoast para CDN para obtener detalles completos sobre una mejor manera de configurar esto. Tenga en cuenta que si está incorporando videos de servicios como YouTube o Wistia, ellos administran la entrega de los recursos de video desde su propia red de CDN.

Consejo 2: utilice la transmisión adaptativa

La etiqueta HTML5

El problema aquí para la velocidad del sitio es cuando desea cargar un archivo de video grande o de alta resolución. Con una conexión menos que estelar, todo lo que sucede es una gran cantidad de almacenamiento en búfer, mientras que el navegador intenta cargar suficiente archivo para iniciar la reproducción. Es muy malo para la FID.

La mejor manera de lidiar con este problema es utilizar algo llamado transmisión adaptativa. La transmisión adaptativa es cuando varias variaciones diferentes de un solo video, todas con diferentes resoluciones y tasas de bits, se ponen a disposición de un servidor. Luego, el servidor proporciona la versión de mejor calidad del video que cualquier conexión determinada puede manejar. Con la transmisión adaptativa, si su usuario está en un dispositivo móvil en la cima de una colina remota y solo trabaja con una conexión de 500 kbps, el servidor proporcionará un video SD con una tasa de bits de algo así como 300 kbps, en lugar de la variación ideal de 4K a 35 mbps.

¿Cómo puedes hacer esto? Bien tu puedes configúrelo usted mismo usando MPEG-DASH. O muévase a una plataforma de alojamiento de videos de terceros como Youtube o wistia; estos usan transmisión adaptativa como parte de la pila de tecnología de entrega de video.

Consejo 3: exporte archivos de video con una tasa de bits variable

Otro consejo para mejorar la velocidad de reproducción es reducir los archivos de video tanto como sea posible durante el proceso de exportación. Una tasa de bits variable (VBR) es un medio de compresión que adapta la tasa de bits del archivo de video en función de la complejidad de los colores y el movimiento en cualquier punto del video. El objetivo de esto es mantenerlo lo más bajo posible sin una degradación notable en la calidad. Por ejemplo, las secuencias de acción de movimiento rápido con muchos colores complejos requieren una tasa de bits mucho más alta. Pero una toma de cabeza parlante más estática sobre un fondo simple funciona bien con una tasa de bits más baja. Un VBR permitirá que su compresor de video tome decisiones inteligentes sobre las tasas de bits apropiadas durante la exportación que reducirán el tamaño del video.

VBR se puede usar con los códecs de video web más comunes, como VP9 y h.264.

Consejo 3: evite reproducir en bucle los videos de reproducción automática (o al menos manténgalos breves y silenciosos)

Los videos de reproducción automática siguen siendo populares, particularmente como fondos en las páginas de inicio. Pero implementados de manera deficiente, pueden causar todo tipo de problemas de velocidad del sitio.

En mi opinión, es mejor evitarlos. Casi siempre aumentarán drásticamente el tiempo hasta la mayor pintura con contenido (LCP). Al forzar la reproducción de video al mismo tiempo que se cargan los elementos principales de HTML, imagen y JavaScript de una página, requiere que un navegador haga una gran cantidad de cosas a la vez. Lo hará con lentitud si la velocidad de conexión es baja.

Si debe tener videos de reproducción automática en bucle, manténgalos lo más cortos posible (idealmente, menos de 10 segundos). También exporte los archivos sin audio, para mantener el tamaño del archivo lo más pequeño posible.

Consejo 4: Cargue contenido de video de forma asíncrona

Hay dos beneficios de utilizar JavaScript asíncrono en la entrega de video. En primer lugar, puede evitar que los videos bloqueen la representación de otros elementos de la página. Y, en segundo lugar, puede cargar los activos más críticos en la pintura con contenido más grande (LCP) y el cambio de diseño acumulativo (CLS) antes de cargar el archivo de video grande en sí.

Si usa AJAX para cargar su reproductor de video, una vez que el cliente procesa el script inicial central (generalmente solo unos pocos cientos de kilobytes), todo lo demás se puede cargar rápidamente en segundo plano. Mientras tanto, el cliente renderiza el resto de los elementos de la página. Además, el marco y la miniatura del reproductor de video, aquellos elementos que son visibles antes de que un usuario haga clic en reproducir, se pueden priorizar y cargar de inmediato, para impactar positivamente en los principales elementos vitales de la web.

Esto es precisamente lo que Yoast Complemento de vídeo SEO para WordPress hace para acelerar la entrega de video, asegurando que incluso los archivos de video más grandes no afecten negativamente la experiencia del usuario o el rendimiento de búsqueda.

Cuando se implementa bien, el video no afectará negativamente su puntaje de PageSpeed ​​Insights

Consejo 5: no coloque videos detrás de JS que bloquee el renderizado

A veces, los scrollers o carruseles contienen videos, como alternativa a las imágenes.

Desafortunadamente, los complementos que operan estos frecuentemente terminan cargando cada imagen en un disparador. Esto puede significar que otro JavaScript bloquea la carga del video. Cuando esto sucede, el cliente debe cargar por completo todos los activos de video cuando el video aparece en el carrusel, en lugar de haber hecho parte del trabajo duro antes de que el usuario o el rastreador llegue allí.

Esto dificulta la velocidad del sitio y el retraso de la primera entrada, pero no solo eso. También puede dañar el SEO, ya que Googlebot no puede encontrar e indexar el video.

Para comprobar si Googlebot puede analizar la implementación de su video, puede consultar el nuevo Informe de páginas de video en Google Search Console.

Resumen

Con la velocidad del video y del sitio, los principios básicos a recordar son:

  1. Use una configuración de servidor específica para manejar archivos multimedia grandes (CDN)
  2. Asegúrese de que el archivo de video que se está cargando se adapte a la velocidad de conexión del cliente (Streaming adaptativo)
  3. Mantenga sus archivos de video lo más pequeños posible sin sacrificar la calidad (tasa de bits variable)
  4. Cargue los elementos visuales principales antes de cargar el archivo de video real (entrega asíncrona)
  5. No impida que los videos se carguen con otros activos de la página (JavaScript de bloqueo de procesamiento)

Para obtener más información sobre la velocidad del sitio, consulte el resto de nuestras publicaciones y guías!



Source link

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.