¿Cómo hacer que los vídeos de YouTube no afecten la velocidad de un blog?

¿Te gusta esto?... Entonces que no se te olvide compartirlo ;)


Si eres un bloguero y también tienes un canal de YouTube para ayudar a que tus contenidos sean más relevantes e interesantes para las personas entonces debes preguntarte muy seguido: ¿cómo evitar que los vídeos de YouTube pongan lenta la velocidad de carga del blog?. Tener un canal de YouTube representa muchas ventajas hoy en día, sobre todo en factores de posicionamiento web ya que si tu blog cuenta con un canal donde por cada entrada que hagas subes un vídeo esto permite que el post y el contenido multimedia se posicionen los primeros lugares de Google y de YouTube en el caso del vídeo.

YouTube nos permite realizar una inserción rápida de cualquier vídeo con solo copiar un iframe desde su plataforma el cual contiene el ID del vídeo, pero si lo insertas usando el iframe la entrada que lo contenga cargara más lento y esto afectara el raking de tu web. Para evitar que el blog se vea afectado debes implementar un sencillo script en la plantilla el cual cumple la función de solo cargar el contenido multimedia si la persona lo quiere ver, de esta manera estarías ahorrando aproximadamente 500Kb lo que se traduce en unos 2 segundos de carga para conexiones de Internet rápidas y hasta 10 segundos para conexiones lentas.

¿Cómo colocar el script que permite que la velocidad de carga de mi blog no se vea afectada?

Implementar este script en la plantilla es sumamente sencillo, simplemente debes seguir los pasos que te describo aquí, como tal dicho tutorial lo hice pensado exclusivamente para Blogger pero también funciona con blogs creados en Wordpress.

1.- Primero que nada debes ir a Tema.
2.- Seguidamente haces clic en editar HTML.
3.- Buscas la etiqueta de cierre </body>.
4.- Y por último encima de ella pegas el script que se encuentra aquí:

<script>/*<![CDATA[*/(function(){var a=document.getElementsByClassName("reproductor");for(var c=0;c<a.length;c++){var b=document.createElement("div");b.innerHTML=labnolThumb(a[c].dataset.id);b.onclick=labnolIframe;a[c].appendChild(b)}})();function labnolThumb(a){return'<img class="imagen-previa" src="//i.ytimg.com/vi/'+a+'/hqdefault.jpg"><div class="youtube-play"></div>'}function labnolIframe(){var a=document.createElement("iframe");a.setAttribute("src","//www.youtube.com/embed/"+this.parentNode.dataset.id+"?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");a.setAttribute("frameborder","0");a.setAttribute("id","youtube-iframe");this.parentNode.replaceChild(a,this)};/*]]>*/</script>

¿Cómo colocar los vídeos de YouTube en las entradas?

Cuando hayas implementado el script que te di arriba simplemente tienes que colocar los vídeos encerrados en un DIV, en la edición HTML de cada entrada en la que pongas un vídeo debes adjuntar el DIV y adentro se encontrara el ID del vídeo que insertaras. Ten presente que también puedes usar esto en los gadgets de Blogger y así ponerlos en el sidebar del blog. Dicho DIV es el siguiente:

<div class="contenedor">
<div class="reproductor" data-id="aquí debe ir el ID del vídeo">
</div>
</div>

Lamentablemente el DIV de arriba no te lo puedo dejar con un botón para que lo copies de forma automática debido a que la edición HTML de la entrada al colocarlo en el botón no lo interpreta como un área de texto para que se copie, por lo que tendrás que hacerlo a mano, pero lo más importante es que te deje todo allí para que lo hagas tal cual y como se encuentra arriba.

¿Cómo hacer que se vean bien los vídeos en las entradas?

Al implementar el script la funcionalidad para que se vean los vídeos ya está habilitada, pero puede que no se vean bien los mismos porque no se han definido los estilos, no solo basta con colocar el script en la plantilla también se deben definir estilos CSS que permitirán que los vídeos se adapten bien a las entradas y los DIV que los contienen sean responsive.

La implementación del código CSS es sumamente fácil, simplemente debes hacer lo siguiente:

1.- Estando en la edición HTML de la plantilla debes buscar }]]></b:skin>.
2.- Una vez que encuentres el código que mencione debes dar espacio para bajarlo y arriba debes pegar los estilos que están aquí y haces clic en Guardar plantilla:

.contenedor{display:block;margin:20px auto;width:100%;max-width:600px}.reproductor{display:block;width:100%;height:100%;padding-bottom:56.25%;overflow:hidden;position:relative;cursor:hand;cursor:pointer}img.imagen-previa{display:block;left:0;bottom:0;margin:auto;max-width:100%;width:100%;position:absolute;right:0;top:0;height:auto}div.youtube-play{height:64px;width:64px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;opacity:.7;position:absolute;background:url("https://cdn2.iconfinder.com/data/icons/social-icons-color/512/youtube-64.png") no-repeat}div.youtube-play:hover{opacity:1}#youtube-iframe{width:100%;height:100%;position:absolute;top:0;left:0}

Hacer que los vídeos carguen cuando las personas quieran verlos ayuda al posicionamiento

Hacer que los vídeos solamente carguen cuando los visitantes quieran verlos ayuda bastante a que el blog procese datos rápido y por tanto el posicionamiento se vea favorecido, si un vídeo forma parte de la carga completa de una entrada reduce la velocidad del procesamiento de los datos y aunque sea por unos 2 ó 10 segundos igualmente afecta al raking del sitio.

Con todo lo que deje en esta entrada te será más que suficiente para que la velocidad de tu blog no se vea afectada cuando implementes un vídeo de YouTube en una entrada, de esta forma podrás darle relevancia a tus contenidos y a la vez los optimizas debidamente; YouTube es una plataforma que puede ayudar al crecimiento de un blog, pero hay que saber cómo utilizarla externamente para que sus scripts no afecten la carga de las webs donde se colocan los vídeos de un canal.


Atención: Puede que el script te dé problemas si tu blog esta creado en la plataforma Blogger, puede que al momento de darle clic en play para ver el vídeo la caja se ponga pequeña, a mi no me pasa eso porque yo mismo diseño el estilo de mi plantilla y no utilizo las que trae Blogger por defecto, es decir, mi plantilla es similar a una de Wordpress pero en formato XML.

En el caso de Blogger será necesario que tengas conocimientos avanzados de edición HTML, CSS y Javascript para que la caja no se te reduzca ya que esto se debe a un error que traen las plantillas por defecto y la única forma de eliminarlo es bloqueando la carga del javascript que bloquea la visualización del contenido.

Si te gusto la publicación compártela ahora:


Tu donación me ayuda a seguir manteniendo este sitio en marcha ;)

También puedes contribuir con un pequeño donativo en Bitcoin.


Introduce tu correo electrónico y mantente informado de todas las actualizaciones:

Delivered by FeedBurner

Tu comentario es muy importante por lo que te invito a tomarte unos minutos y revisarlo, no debe poseer errores ortográficos y tampoco debe tener links a otros sitios web. El comentario será eliminado si posee alguna de las cosas señaladas anteriormente.







Afiliados Forex