Cómo aplazar la carga (defer parsing) de JavaScript de vídeos YouTube

Uno de los mejores métodos de mejorar las puntuaciones de velocidad de página es aplazar la carga de tus archivos JavaScript que no sean necesarios para la carga inicial de la página.

Y uno de los grandes escollos en este sentido suelen ser los vídeos de YouTube, que muchos usamos y mostramos en nuestras páginas.

Cuando insertas un vídeo de YouTube suele cargar archivos JavaScript adicionales que pueden ralentizar de manera significativa la carga de tu web.

El método para combatir este problema es la carga diferida, el conocido como lazy loading, de los vídeos de YouTube, de manera que no se cargue su JavaScript hasta que el usuario no haga scroll (navegue) hasta donde esté el vídeo en la página.

Aplazar la carga de JavaScript de vídeos YouTube en WordPress con códigos

Para empezar vamos a meternos un poco con el código de incrustación de YouTube, para que no se carguen los vídeos en la carga inicial de la página.

Para ello necesitamos…

  1. Quitar el enlace del atributo src del iframe, o sea, quitar el src=""
  2. Añadir un atributo data-src
  3. Añadir el enlace original del atributo src al atributo data-src

No te agobies, ya mismo vemos un ejemplo de cómo aplazar la carga de JavaScript en vídeos de YouTube.

En este caso estamos hablando de cuando insertas un vídeo de YouTube insertando el código iframe en tu entrada o página.

Lo que hacemos es copiar el código iframe que nos ofrece YouTube y lo pegamos en nuestro contenido.

Este, por ejemplo…

Lo que hay que hacer, como te comentaba arriba, es sustituir el atributo src por data-src, y quedaría de este modo:

¿Ya está?

No, si simplemente dejas el código así el vídeo no se cargará.

Para que todo vuelva a funcionar tenemos que añadir una función al archivo functions.php del tema activo, este:

Guarda los cambios y el vídeo se cargará correctamente, pero solamente cuando el usuario navegue hacia la parte de la página donde esté insertado, no nada más cargar la página. Vamos, el famoso lazy loading o carga diferida.

Una vez termine de cargar la ventana del navegador este último código detecta todos los iframes que haya en tu sitio y, si existe el atributo data-src, lo copia al atributo src.

Como por defecto los códigos de inserción de vídeos de YouTube no tienen ni IDs ni nombres de clases el código funcionará con todos los vídeos de YouTube sin que tengas que cambiar nada.

En el caso de que solo tengas un vídeo en tu sitio no tienes que buscar en todos los iframes como hace el código anterior.

Puedes simplemente establecer un ID o nombre de clase al iframe y entonces simplemente configurar el código para ese elemento concreto.

Usando jQuery, el código de la función sería así:

Aplazar la carga de JavaScript de vídeos YouTube en WordPress con plugins

Todo lo anterior está muy bien, pero ¿qué pasa si los vídeos los tengo insertados solo con la URL?

Como ya sabrás, insertar un vídeo en WordPress es algo tan simple como copiar y pegar la URL del mismo en el editor y este se mostrará como por arte de magia.

Pero de este modo no tenemos un iframe que manipular.

Entonces ¿cómo aplazo la carga de vídeos YouTube si no tengo iframe?

¡Con plugins!

Lazy Load

Este plugin es el que suelo recomendar siempre para la carga diferida (lazy load) de vídeos.

En principio también sirve para hacer carga diferida de imágenes, pero para eso hay otros muchos.

Ahora bien, lo que hace realmente bien es la carga diferida de vídeos, y encima no hay que configurar nada.

Una vez lo instales y actives pásate por sus página de configuración, en Ajustes > LazyLoad, y activa al menos la segunda opción, la de iframes y vídeos, como en la siguiente captura…

Si quieres optimizar aún más la carga diferida puedes activar la última casilla. Lo que hace es que, inicialmente, se carga solo la captura de imagen del vídeo de YouTube, y solo cargará los JavaScripts de YouTube al hacer clic en el reproductor.

Como ventaja adicional, no solo se limita a vídeos de YouTube, también hace carga diferida de cualquier otro vídeo incrustado de otros servicios como Vimeo.

Lazy Load for Videos

Similar al anterior, pero este especializado solo en vídeos, está este plugin.

Con él también puedes cargar solo las miniaturas de imagen, entre otros muchos ajustes.

WP YouTube Lyte

Este plugin, de los creadores de Autoptimize, está especializado en la carga diferida de vídeos de YouTube, así que no es tan completo como los anteriores.

No obstante, el trabajo con los vídeos de YouTube que hace es correcto, y permite algunos ajustes en el reproductor.


Espero haberte ayudado con este artículo a comprender, pero sobre todo a aplazar la carga de los archivos JavaScript de YouTube y otros servicios de vídeo en WordPress, y así evitar los errores de defer parsing of JavaScript de los analizadores, en definitiva a mejorar los tiempos de carga de tu WordPress.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(10 votos, promedio: 5)
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!

Autor: Fernando Tellado

Fernando Tellado es un apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad
Ir al contenido