¿Cómo aumentar la velocidad de carga de tus posts usando mp4?

Te propongo aprender a aumentar la velocidad de carga de tus posts usando mp4 en lugar de gif. 

Seguramente te hayas unido ya a la moda de utilizar gifs en tus contenidos y, si no lo has hecho todavía, seguro que o te lo has planteado o lo harás en un breve lapsus de tiempo.

No te voy a hablar de las ventajas y oportunidades que tiene utilizar gifs en tus contenidos pero vamos, que si te interesa, en este artículo Ana Mata te explica muy bien cómo crear gifs para tu blog y porqué deberías de usarlos.

Yo lo que te voy a enseñar es a cambiar la mentalidad y a utilizar mp4 en vez de gif.

¿Por qué utilizar mp4 en vez de gif en tu blog para aumentar la velocidad de carga?

La explicación es muy rápida y sencilla…..

Porque pesan muuuuuucho menos.

Un archivo mp4 de 1 mega, serán unos 5 o 6 megas si lo conviertes a gif, ahora piensa que en un artículo de tu blog metes entre 6 y 10 gif... sí, la carga de la página se hará muy larga.

Pongo un ejemplo del gif de SEMrush de giphy, aunque en este caso hay poca diferencia porque casi no hay movimiento, pero en gifs animados con mucho movimiento la diferencia de peso puede ser muy grande.

Que el peso de un gif sea elevado es negativo para nuestro posicionamiento.

Está claro que cuanto más rápido carga, la web posiciona mejor y eso tiene lógica, ya no sólo por el posicionamiento, sino por el usuario que está al otro lado leyendo nuestro artículo.

Ponte en situación, vas al enlace de un artículo, entras y empieza a cargar y a cargar y loading…. y hasta luego.

¿Qué es lo que haces?

Te marchas porque no nos gusta esperar, obviamente Google se da cuenta de que la permanencia en esa página ha sido baja y nos tira para abajo.

Os pongo un test de velocidad de Google de una misma web, con dos artículos iguales, uno con 10 gif en mp4 y el otro en formato gif.

Como se puede observar, en la parte de la izquierda está el test de escritorio y en la derecha el de móvil.

Simplemente con este detalle, se puede observar perfectamente cómo cambia la velocidad de una entrada poniendo mp4 o gif.

Así que vamos al meollo de la cuestión y vamos a aprender a poner mp4 y que nuestra página cargue rápido.

¿Dónde puedes conseguir mp4 gratis?

Seguro que lo primero que has pensado es... ahora que tenía el Giphy dominado me viene Gastre con que ahora gifs no, que ahora tengo que poner mp4.

No te apures hombre (o mujer) que sigue siendo igual de simple.

Lo bueno de Giphy es que va un paso por delante de nosotros y…… tienen todos los gifs en formato mp4, así que el proceso es el mismo.

Buscas en Giphy.com el “gif” que más te guste, para el ejemplo he buscado “SEMrush” y lo abres, en este caso sólo hay uno.

Una vez en la URL del gif verás lo siguiente:

Si ahora pulsas sobre Advanced verás unos nuevos enlaces, en este caso en particular, escogemos la URL de “HTML5 Video”

Esa URL la abrimos en una nueva pestaña y nos va a llevar al gif en cuestión pero en formato mp4, dentro de esa pestaña pulsamos sobre la imagen, botón derecho y seleccionamos copiar dirección del vÍdeo.

Bien, una vez hecho esto, ya tenemos la URL del gif que vamos a poner como mp4 en la entrada de nuestro blog.

Hay URLs de Giphy donde ya viene el código de mp4 directamente justo debajo de Gif download.

Si no queremos usar la URL y preferimos alojarlo en nuestro blog, deberemos descargar el mp4 y luego subirlo a wordpress como hacemos con las fotos, nos dará una URL y esa la usaremos para ponerla en el código que os daré después.

Personalmente recomiendo crearte un usuario en giphy o gfycat e ir acumulando ahí tus gifs, así, el blog irá mucho más ágil, ya que no lo llenas de miles de archivos, pero esto es una elección muy personal y es más fácil que abandones tu blog a que desaparezca Giphy.

Aunque nada es imposible.

Otro lugar que os recomiendo es desde gfycat, aquí todos los gif que suben son en mp4 directamente por lo que es aún más cómodo que con giphy.

Tiene arriba un buscador igual que en giphy, le damos por ejemplo a buscar SEMrush y nos aparecen 4 gifs, damos con el botón derecho sobre el gif que nos interese y pulsamos sobre copiar dirección del vídeo o lo descargamos si preferimos adjuntarlo como archivo interno de nuestra web.

¿Que me gusta de gfycat?

Pues que los mp4 vienen en formato https y si tienes la web con amp te los va a mostrar, mientras que los de giphy no.

¿Cómo puedes convertir un gif a mp4?

La duda que os entrará a muchos es cómo hacer para convertir un gif a mp4, porque a lo mejor tenéis otras vías para conseguir los gif que no sean estas.

De hecho, los podéis crear vosotros y entonces, ¿qué hacemos para pasarlos a mp4?.

Pues lo que hay que hacer es convertirlos, así que atentos que os voy a contar un truquito para hacerlo de la forma más simple que os podáis imaginar y rápido.

Es tan simple como ir a la web de gfycat y en la parte de arriba, justo a la derecha de la lupa, pulsamos sobre Upload.

Le damos a Browse y adjuntamos nuestro gif y automáticamente lo sube y lo convierte a mp4, simple ¿no? y además, nos lo aloja para ponerlo en nuestra web con la URL como hemos visto antes.

Si gfycat ve que ese gif ya existe en su web, te lo dice y te da la URL de donde se encuentra.

Obviamente, podemos hacer lo propio desde Giphy si te gusta más esa plataforma.

El proceso es exactamente el mismo, arriba del todo pulsamos sobre Upload y luego en Browse y adjuntamos el gif.

Nos lo sube a la plataforma y luego nos muestra las URLs de gif y html5 video, ojo, hay que esperar un rato a que lo convierta y nos dará la dirección que nos interesa.

¿Cómo puedes incluir el formato mp4 en WordPress?

Ya que la mayoría se qué usáis WordPress, en primer lugar os voy a enseñar a poner un mp4 en este sistema.

Para poner un mp4 en Wordpress debemos de hacer lo siguiente, vamos a la entrada que estemos editando y pasamos de Visual a Texto y en texto colocamos el siguiente código donde queramos que vaya el gif.

Que quiere decir ese código:

• class=”aligncenter” - nos va a centrar el gif en la entrada.

• autoplay=”autoplay” - poco tengo que decir, para que se reproduzca por defecto.

• loop=”loop” - lo que hace es volverlo a reproducir en cuanto acabe.

• muted=”” - super importante, sin este comando el vídeo se ve perfecto en la versión desktop pero en el móvil sólo se vería una imagen estática.

• width=”364” - ahí se pone el ancho del vídeo que quieras (se puede poner en porcentaje).

• height=”220” - Este valor es la altura, si pones un porcentaje en width aquí pon auto.

Y luego eso que ves que pone "¿tu navegador no soporta MP4?" ... Bien, eso es para el navegador obsoleto de internet explorer, que no se ven los vídeos en mp4, entonces verán este mensaje.

¿Cómo puedes incluir mp4 en Blogger?

No sólo de Wordpress vive el blogger (me encanta esa frase y tenía que soltarla), yo soy muy fan de blogger y cómo no, os tengo que contar como poner los gif en mp4 en esta plataforma tambien.

El proceso es similar, entramos en la entrada que estemos editando y pasamos de Redactar a HTML y ponemos el código de arriba en el lugar en el que queramos que aparezca el gif.

Aquí en blogger, la diferencia respecto a WordPress es que no lo podemos alojar en nuestro blog, únicamente podemos conseguirlo tirando de servicios externos, pero como he comentado es mejor para la velocidad de nuestro sitio web.

Conclusión

Bueno, como has visto, es muy simple incorporar los gifs a tu blog, pero igual de simple es poner el gif en mp4 y encima te va a ir mucho más rápido, con lo que vais a salir ganando tú y tus lectores.

Así que, ya sabes, ahora que te has unido a la fiebre del gif, espero que continúes con ella pero con mp4.

¡Y ahora os pongo un gif para despedirme!

Por cierto, fijaros en la diferencia de peso de este gif entre ambos formatos.

¿A qué esperas para aumentar la velocidad de carga de tus posts con un simple cambio de gif a mp4?