¿Afectan los iframes de YouTube al rendimiento de un sitio web?

Publicado el 9 de marzo de 2024

Índice

Los iframes son en muchas ocasiones el único método viable de citar o reutilizar un contenido alojado en otro sitio web, en uno propio. Por norma general impuesta, los iframes delegan en el dominio que aloja el contenido los recursos que se cargarán desde el dominio de origen, y el modo en que lo harán, ya que un iframe no es más que una “ventana” mediante la que puede accederse a un contenido externo, pero sin posibilidad de tener control sobre él.

Uno de los iframes más comúnmente utilizados son los de YouTube por motivos obvios: esta práctica permite ahorrar espacio de almacenamiento en el servidor al mismo tiempo que permite la visualización del vídeo de manera externa, pero contribuyendo a los datos de analítica o monetización de la red social.

La pregunta es: ¿la incrustación de estos iframes un perjuicio para el rendimiento?

Análisis de rendimiento del iframe de YouTube

Para realizar las comprobaciones, he alojado en un entorno libre (no dependiente de ninguna librería o recurso) un iframe de YouTube tal y como lo haría generalmente en cualquier otra circunstancia. Puedes acceder a él en este enlace. 

La carga inicial

Durante la carga inicial y sin llegar a interactuar de ningún modo con los elementos del iframe, se puede observar tal y como detalla la siguiente captura, que el iframe ha sido el causante de 32 solicitudes de red (obviando la carga del propio documento html), sumando un total de 3.7mb de peso, y concluyendo el proceso en 838ms.

Solicitudes de red en la carga de documento con iframe de YouTube

Al mismo tiempo, durante los primeros 700ms se han generado cuatro tareas que han bloqueado al hilo principal por exceder su tiempo de ejecución en más de 50ms.

Tareas de larga ejecución en la carga de documento con iframe de YouTube

La reproducción

Si bien es cierto que la reproducción del video no ha supuesto la ejecución de ninguna tarea que suponga el bloqueo del hilo principal, nos encontramos con que la cantidad de solicitudes de red ha pasado de las 32 devengadas de los primeros segundos de carga, hasta 70 tras los primeros 40 segundos de reproducción -que continúan en aumento progresivamente hasta superar las 90-, llegando a requerir 12.3mb de espacio almacenado.

Solicitudes de red tras la reproducción de un video con iframe de YouTube

Método alternativo con Lite YouTube Embed

Lite Youtube Embed es una sencilla librería de código abierto desarrollada para mejorar el rendimiento de la incrustación de iframes de YouTube. Aunque posteriormente analizaremos cómo consigue hacerlo, primero te invito a conocer Lite Youtube Embed en Github y a seguir leyendo para ver las diferencias con respecto a una incrustación convencional. Puedes acceder al entorno libre donde utilizaremos esta librería para obtener las siguientes conclusiones.

La carga inicial

En el caso de Lite YouTube Embed se puede observar que durante la carga inicial se llevan a cabo únicamente 7 solicitudes de red (frente a las 32 del iframe convencional) sumando un total de 69.7kb de peso (frente a 3.7mb) en tan solo 124ms (frente a 838ms).

Tampoco se observa la ejecución de ninguna tarea que pueda ser considerada de larga ejecución, siendo aquella más costosa únicamente requiriendo 16.95ms de ejecución.

Solicitudes de red en la carga de documento con iframe de YouTube Embed Lite Ausencia de tareas bloqueantes de hilo principal durante la carga del iframe de YouTube Embed Lite

La reproducción

Tras la reproducción del video tampoco se ha generado ninguna tarea de larga ejecución (al igual que en el caso del iframe convencional), y la cantidad de solicitudes de red y el peso de transferencia ha aumentado del mismo modo en que ocurriría con el iframe convencional, puesto que realmente son las solicitudes y recursos obligatoriamente necesarios para hacer uso del iframe.

Solicitudes de red en la reproducción de video en iframe de YouTube Embed Lite

Tabla comparativa: YouTube vs Lite YouTube Embed

En las pruebas ejecutadas en entornos limpios, ambos sistemas de incrustación devuelven diferencias muy significativas durante el estado de carga, aunque no durante la reproducción:

Estado Métrica Valor
(YouTube Convencional)		 Valor
(Lite YouTube Embed)		 Cambio
Carga Solicitudes de red (40s) 32 7 -78.12%
(-25 solicitudes)
Carga Tareas bloqueantes de hilo principal 4 0 -100%
(-4 tareas)
Carga Almacenamiento utilizado (kb) 3.700 69.7 -98.116%
(-3.630kb)
Carga Demora (ms) 838 124 -85.203%
(-714 ms)
Reproducción Todas Iguales Iguales Ninguno

Por tanto, podemos concluir que la mejora de Lite YouTube Embed es muy efectiva durante los primeros segundos de carga del documento, que pueden considerarse críticos puesto que ese espacio idealmente debe ser reservado para recursos que son inicialmente necesarios para el renderizado.

¿Qué hace exactamente Lite YouTube Embed?

Tal y como indican las comparaciones anteriores, Lite YouTube Embed es mucho más eficiente en la carga inicial del iframe (de manera previa a su interacción) que la incrustación mediante el método convencional, y para saber cómo lo consigue analizaremos las partes de la librería más relevantes.

En primer lugar, debe destacarse que esta librería no modifica el iframe convencional de YouTube como tal, puesto que como decía anteriormente, no es posible modificar el contenido incrustado procedente de dominios externos. Lo que hace realmente es construir algo que se asemeja mucho al iframe convencional de YouTube pero que no lo es, hasta que finalmente se interactúa con el iframe, en cuyo momento pasa a ser efectivamente el iframe de YouTube.

En la siguiente captura se puede observar como el iframe convencional cuenta desde su inicio con elementos que no son perceptibles inicialmente con Lite YouTube Embed:

Esta librería obtiene la imagen de fondo del vídeo haciendo una solicitud directa a la misma, algo posible gracias a que YouTube ofrece la misma nomenclatura como URL final para sus thumnbails, diferenciándose únicamente por el identificador único de cada vídeo.

if (!this.style.backgroundImage) {
    this.style.backgroundImage = `url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg")`;
    this.upgradePosterImage();
}

Además, añade un botón de reproducción en el centro, pero se obvian elementos como el título del vídeo, el acceso directo a compartirlo, o la miniatura del usuario: bien porque no son accesibles externamente del modo en que sí son accesibles las imágenes de fondo, o bien porque de un modo u otro sí lo son, pero se obvian para mejorar el rendimiento.

Por otra parte se lleva a cabo una preconexión con los principales servidores que pueden tener relación con la reproducción del vídeo en el momento en que el usuario pulsa o sitúa el cursor sobre el reproductor, aunque no lo pulse.

this.addEventListener('pointerover', LiteYTEmbed.warmConnections, {
    once: true
});

static warmConnections() {
    if (LiteYTEmbed.preconnected) return;
    // The iframe document and most of its subresources come right off youtube.com
    LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com');
    // The botguard script is fetched off from google.com
    LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com');
    // Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling.
    LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net');
    LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net');
    LiteYTEmbed.preconnected = true;
}

Y para ello, lo que hace es insertar dinámicamente elementos <link> con <rel=”preload”> o <rel=”preconnect”> mediante la siguiente función:

static addPrefetch(kind, url, as) {
    const linkEl = document.createElement('link');
    linkEl.rel = kind;
    linkEl.href = url;
    if (as) {
        linkEl.as = as;
    }
    document.head.append(linkEl);
}

Finalmente y aunque no se citará el código por ser menos relevante para entender qué hace exactamente esta librería, el “falso iframe” se convierte en un verdadero iframe de YouTube cuando el usuario pulsa en el botón de reproducción, momento en el cual ya se habrán iniciado de manera previa las conexiones para facilitar la descarga.

Las implicaciones de Lite YouTube Iframe en el ámbito SEO

Ya hemos podido comprobar que en materia de rendimiento, esta librería supone una gran ventaja frente al iframe de YouTube convencional durante la carga inicial, lo cual obviamente puede traducirse en beneficios aplicables al rendimiento orgánico en motores de búsqueda.

Sin embargo, Lite YouTube Iframe no contempla (exitosamente al menos) la accesibilidad (que no la reproducción) de los videos desde navegaciones sin JavaScript habilitado, algo que sí contempla el iframe de YouTube convencional, que muestra un mensaje de error y adjunta un enlace a la URL del video en la plataforma: no resuelve el hecho de que el video no puede verse, pero sí declara que en ese lugar debería haber un vídeo si JavaScript estuviera habilitado, y deja un enlace para dar mayor crédito a la declaración.

Mejorando Lite YouTube Iframe desde la perspectiva SEO

Esto no se contempla originalmente en la librería de Lite YouTube Iframe, pero podemos llevar a cabo algunas modificaciones sobre ella para mejorar la accesibilidad de los vídeos de un modo similar (¡y mejor!) al de la incrustación clásica de YouTube.

Uno de los principales desafíos o principios de un correcto rastreo por parte de los motores de búsqueda, es que el contenido debe ofrecerse de un modo óptimo y accesible en cualquier circunstancia, idealmente también con la inhabilitación de JavaScript.

Aunque los rastreadores son capaces de leer contenido de JavaScript, plantéatelo del siguiente modo: a la hora de evaluar la accesibilidad de un contenido, cuál tendría una mejor calificación, ¿aquel contenido que es accesible la mayoría de los casos, o aquel contenido accesible en todos los casos?

Aunque no es posible reproducir un video alojado en la plataforma de YouTube sin el uso de JavaScript, sí podemos facilitar su accesibilidad a los rastreadores mediante los datos estructurados.

Lite YouTube Iframe no contempla este aspecto, pero es algo que puede implementarse de manera sencilla del modo que describiré a continuación (al final del artículo podrás descargar la librería modificada contemplando estos cambios).

Aunque la librería contempla la incrustación de vídeos de diferentes formas, trabajaremos sobre el principal método de incrustación, y el primer paso será añadir algunos campos adicionales al HTML encargado de generar el “falso iframe” de la librería.

Por tanto, pasaremos de la incrustación básica:

<lite-youtube videoid="ogfYd705cRs"></lite-youtube>

A esta otra:

En la que añadimos los campos videoname=”Ejemplo de video”, videodescription=”Descripción del vídeo”, videouploaddate=”2024-03-09T16:00:00+02:00” y videoduration=”PT10M00S” y que posteriormente servirán para generar el dato estructurado final.

En lo referente a los campos de fecha y duración, asegúrate de utilizar el formato ISO 8601 que es el compatible con los datos estructurados de VideoObject. No es estrictamente necesario que especifiques una zona horaria en el caso de la fecha de subida, si no lo haces se utilizará la zona horaria por defecto de Googlebot.

No será necesario definir de nuevo el enlace final del vídeo ni tampoco el thumbnail del mismo, porque ya los define por defecto la librería.

El siguiente paso será trabajar sobre la clase LiteYTEmbed, añadiendo las referencias a los nuevos campos HTML:

class LiteYTEmbed extends HTMLElement {
    connectedCallback() {
            this.videoId = this.getAttribute('videoid');
            this.videoName = this.getAttribute('videoname') || '';
            this.videoDescription = this.getAttribute('videodescription') || '';
            this.videoUploadDate = this.getAttribute('videouploaddate') || '';
            this.videoDuration = this.getAttribute('videoduration') || '';
...

Para posteriormente generar un esquema básico, que puedes ampliar libremente con la información que consideres necesaria.

const videoObject = {
    "@context": "https://schema.org",
    "@type": "VideoObject",
    "name": this.videoName,
    "description": this.videoDescription,
    "uploadDate": this.videoUploadDate,
    "duration": this.videoDuration,
    "contentUrl": `https://www.youtube.com/watch?v=${this.videoId}`,
    "embedUrl": `https://www.youtube.com/embed/${this.videoId}`,
    "thumbnailUrl": `https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`
};

Y finalmente agregar el dato estructurado a la cabecera.

const scriptTag = document.createElement('script');
scriptTag.type = 'application/ld+json';
scriptTag.textContent = JSON.stringify(videoObject);
document.head.appendChild(scriptTag);

De este modo podrás insertar tantos vídeos como necesites haciendo uso del código de incrustación, generando un VideoObject por cada uno de ellos y resolviendo el único inconveniente que plantea esta librería.

<div class="img-inside-post">
<img width="400" height="286" class="modal-target" src="https://guillermofr.com/wp-content/uploads/2024/03/datos-estructurados-youtube-lite.webp" alt="Implementación de datos estructurados en YouTube Lite Embed">

<img width="400" height="206" class="modal-target" src="https://guillermofr.com/wp-content/uploads/2024/03/datos-estructurados-youtube-lite-2.webp" alt="Validación de los datos estructurados">
</div>

Puedes descargar aquí la librería con la implementación de datos estructurados o acceder a ella en vivo. Recuerda que será necesario utilizar el método de incrustación citado anteriormente, y no el que encontrarás en Github.