Tengo este portal lasemanal.do donde los usuarios pueden buscar entre las transcripciones de las conferencias de prensa semanales impartidas por el Presidente Luis Abinader. El sitio web está hecho con Ruby on Rails y desplegado como una función en la nube (Cloud Run) en Google Cloud Platform (GCP). La página de resultados muestra clips incrustados desde youtube con el timestamp de donde se pronuncia el termino de búsqueda.
Al hacer pruebas de velocidad del sitio con PageSpeed Insights retornaba una nota abismal. A continuación los resultados:
Inmediatamente llama a la atención las metricas en rojo, sobretodo el tiempo total de bloqueo (Total Blocking Time). Al desplazarnos hacia abajo para ver las recomendaciones, el reporte muestra que el problema se genera por la carga de scripts de youtube en los iframes de los videos encrustados y nos sugiere hacer una carga lenta de los scripts usando una «fachada».
Leyendo la documentación se sugiere implementar algunas librerias de terceros. Escogí lite-youtube-embed arbitrariamente.
Previo a la implementación de la librería cada elemento embebido dentro de la página de resultados era un iframe tal cual lo genera youtube, el código se veía de la siguiente manera.
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/<%=transcript_fragment.post.youtube_link.gsub('https://www.youtube.com/watch?v=','')%>?start=<%=transcript_fragment.start %>" title="<%=transcript_fragment.post.title %>" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>Implementar la librería es muy fácil, solo debemos hacer referencia al script y css que vienen en ella y utilizar la etiqueta <lite-youtube></lite-youtube>
<lite-youtube videoid="%=transcript_fragment.post.youtube_link.gsub('https://www.youtube.com/watch?v=','')%>" playlabel="<%=transcript_fragment.post.title %>" params="start=<%=transcript_fragment.start %>&end=<%=(transcript_fragment.start+10) %>&modestbranding=2&rel=0&enablejsapi=1"></lite-youtube>Luego de este cambio los resultados se muestran inmediatamente en verde.
Los resultados de la página siguen viendose igual que antes con todos los beneficios de rendimiento.
Al reemplazar los tradicionales iframes de YouTube con una versión ligera que carga el contenido de manera más eficiente, logramos reducir significativamente los tiempos de carga y mejorar el rendimiento general del sitio. Esta práctica no solo es crucial para mantener a los usuarios comprometidos sino que también es un factor importante para mejorar el ranking en los motores de búsqueda debido a la optimización del tiempo de carga y la interactividad del usuario.
Los facades de vídeos permiten que el contenido multimedia se cargue únicamente cuando es necesario, lo que disminuye el tiempo total de bloqueo (TTB) y otros indicadores de rendimiento web críticos. Implementar fachadas en tus vídeos de YouTube no solo optimiza la carga de los mismos sino que también contribuye a una mejor puntuación SEO del sitio web, gracias a la mejora en los tiempos de carga y la experiencia del usuario.