Analizando con PageSpeed Insights una de las páginas web que mantengo en el trabajo, me encuentro con que en las páginas que contienen algún video de youtube incrustado, el rendimiento de la página cae por debajo de 40 por el siguiente motivo:
Empiezo a buscar información, y una de las soluciones más utilizada parece ser el emplego de plugins. Pero tras probar algunos de los más conocidos, no termino de conseguir depurar por completo la carga.
Así que tras varias pruebas, finalmente me decido a implementar uno de los métodos recomendados en la propia página: Lazy load third-party resources with facades.
Se trata de crear una imagen que enmascare el video (en mi caso saco la imagen con un recorte del fotograma mostrado en la web), y un pequeño script que sustituya la imagen por el frame del video al pasar el ratón por encima de la misma.
A continuación dejo el código bastante simple, que evita que se carguen los scripts correspondientes, pasando a obtener unos rendimientos superiores a 70 únicamente con este cambio.
<script>
const frame = '<iframe width="510" height="287" src="https://www.youtube.com/embed/IDENTIFICADOR_VIDEO" title="TITULO" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>'
function loadYtFrame(){
const imgSust = document.getElementsByClassName('mw-lb-yt');
console.log(imgSust);
imgSust[0].innerHTML = frame;
}
</script>
<div class="mw-lb-yt">
<img onMouseOver="loadYtFrame()" src="https://DOMINIO.com/wp-content/uploads/RUTA-IMAGEN.jpg" width="510" height="287" alt="Descripción imagen"/>
</div>
Notas:
En mi caso, utilizo el módulo de código de divi para insertar el código anterior.
El código del iframe, se obtiene fácilmente del propio video de la web, pulsando botón derecho del ratón y en “copiar código de inserción”. Además nos da el código con el tamaño del iframe mostrado.
Importante que el tamaño de la imagen coincida con el del frame para que no se vea “feo” al pasar el ratón por encima y cambiar de tamaño.
Evidentemente, se muestra un parpadeo al pasar el ratón y cargar el video, y esto posiblemente podría ser mejorado inyectando algún efecto, pero a efectos prácticos funciona correctamente.