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…

<iframe width="560" height="315" src="https://www.youtube.com/embed/CGSG8xH33nw" frameborder="0" allowfullscreen></iframe>

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

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/CGSG8xH33nw" frameborder="0" allowfullscreen></iframe>

¿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<vidDefer.length; i++) {
    if(vidDefer[i].getAttribute('data-src')) {
      vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;

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.

<iframe id="video_youtube" width="560" height="315" data-src="https://www.youtube.com/embed/CGSG8xH33nw" frameborder="0" allowfullscreen></iframe>

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(10 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

2 comentarios en “Cómo aplazar la carga (defer parsing) de JavaScript de vídeos YouTube”

  1. Buenas, gracias por el articulo, como siempre muy interesante, pero perdón ¿se puede poner ese código de ejemplo que parece javascript en el functions.php? estoy probándolo y no me funciona. Muchas gracias

  2. Hola Fernando, a mi el código en function.php me da el siguiente error:
    «Los cambios en tu código PHP se han revertido debido a un error en la línea 29 del archivo wp-content/themes/machoalfa-astra/functions.php. Por favor, arréglalo y trata de guardar de nuevo.
    syntax error, unexpected ‘var’ (T_VAR)»

Deja un comentario

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

 

Ir arriba Ir al contenido