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:

/* Defer parsing of JS YouTube (ayudawp.com) */
function init() {
  var vidDefer = document.getElementsByTagName('iframe');
  for (var i=0; i

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í:

var newsrc = $("#youtube_video").attr('data-src');
$("#video_youtube").attr('src', newsrc );

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.

La entrada Cómo aplazar la carga (defer parsing) de JavaScript de vídeos YouTube la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

0 comentarios

Dejar un comentario

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *