es
English Español Deutsch Français Italiano Português (Brasil) Русский 中文 日本語
Enviar un artículo
Ir a blog

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

57
Wow-Score
La Wow-Score muestra si una entrada de un blog crea o no interacción. Se calcula en base a la correlación entre el tiempo de lectura activo de los usuarios, su velocidad de desplazamiento y la longitud del artículo.

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

gastre
¿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.

¿Cómo aumentar la velocidad de carga de tus posts usando mp4?. Image :n

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.

¿Cómo aumentar la velocidad de carga de tus posts usando mp4?. Image :n

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:

¿Cómo aumentar la velocidad de carga de tus posts usando mp4?. Image :n

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

¿Cómo aumentar la velocidad de carga de tus posts usando mp4?. Image :n

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.

¿Cómo aumentar la velocidad de carga de tus posts usando mp4?. Image :n

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.

¿Cómo aumentar la velocidad de carga de tus posts usando mp4?. Image :n

¿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.

¿Cómo aumentar la velocidad de carga de tus posts usando mp4?. Image :n

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.

¿Cómo aumentar la velocidad de carga de tus posts usando mp4?. Image :n

<video class="aligncenter" autoplay="autoplay" loop="loop" muted="" width="364" height="200"><source src="la-url-del-video-que-quieras-poner-en-mp4" type="video/mp4" />¿Tu navegador no soporta MP4? ¡¿En serio?!</video>

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.

¿Cómo aumentar la velocidad de carga de tus posts usando mp4?. Image :n

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!

¿Cómo aumentar la velocidad de carga de tus posts usando mp4?. Image :n

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

¿Cómo aumentar la velocidad de carga de tus posts usando mp4?. Image :n

Descarga

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

gastre
Experto

Brinda información valiosa y añade sustancia a la conversación.

Entusiasta del mundo #web y #blogging. Aunque algunos piensan que soy un #bot muestro mi lado más humano en http://www.elmarketingtoday.com
Compartir esta entrada
o

Comentarios

2000
Africa Boleko Ribas
Novato

Se ha registrado recientemente o es demasiado tímido para comentar.

Como mola!!! Y lo siento porque es un comentario que no aporta pero tenía que decirlo...
Miguel
Novato

Se ha registrado recientemente o es demasiado tímido para comentar.

Gastre este tutorial has realizado. ¡Muchas gracias!
En mi caso no suelo usar Gif en mis entradas. Sin embargo hace poco publique un nuevo artículo el cual incluía un gif. Y luego de leer tu artículo me fui corriendo a mi blog para ver el peso del gif. Y vaya metida de pata la que tuve jajaja.
El gif pesaba casi 2 megas! Por lo que luego de borrarlo, coloque tu código y un gif bien chulo en mp4.
gastre
Experto

Brinda información valiosa y añade sustancia a la conversación.

Miguel
Genial Miguel!
Me alegro que haya servido, la verdad es que hay gifs que............y luego andamos comprimiendo por todos lados y nos dejamos lo más pesado.
Un saludo y gracias.
Natalia de la Peña Frade
Entusiasta

En ocasiones participa en las conversaciones.

Muy bueno, Gastre, muy útil. Por cierto, acabo de añadir "Gastre" a mí diccionario ?
Yo ya había visto al hacer mi post de GIF que casi todas las herramientas ofrecen el formato MP4, pero no conocía sus ventajas.
Tendré que actualizar mi post ?
Comparto este, ¡Muchas gracias!
gastre
Experto

Brinda información valiosa y añade sustancia a la conversación.

Natalia de la Peña Frade
Un saludo Natalia! que gusto verte comentando.
No hace falta actualizar, pero si seria bueno empezar a cambiar de costumbres
Un saludo y gracias.
Novato

Se ha registrado recientemente o es demasiado tímido para comentar.

Buenas tardes Gastre!! Como siempre, sembrado!!
gastre
Experto

Brinda información valiosa y añade sustancia a la conversación.

sonia quiles
Muchas gracias sonia
Novato

Se ha registrado recientemente o es demasiado tímido para comentar.

Es genial! me ha gustado el post y lo pondré en práctica, sin embargo debo decir que he intentado optimizarlo para puedan verse en dispositivos móviles y no lo he conseguido, solo se ve todo en Blanco. ¿A qué se debe? ¿estoy haciendo algo mal?
gastre
Experto

Brinda información valiosa y añade sustancia a la conversación.

Fernando Rivertt
Hola muy buenas. Gracias.
Sobre lo que comentas, me puedes dar mas datos?
En escritorio se ve?
Que navegador web móvil usas?
Un saludo
Ana  Mata
Buen samaritano

Miembro con experiencia que siempre está dispuesto a ayudar.

Qué pedazo de post!!!!!
La verdad es que no copiaba la url como tu que es mucho más directo!! jajajajaja pero bueno, de todo se aprende en esta vida...
Oye, esto viene muy bien, porque ahora está muy de moda esto de los gifs, así que creo que este post puede ayudar a mucha gente!!
Enhorabuena growthpi!! me encanta verte por aquí!
gastre
Experto

Brinda información valiosa y añade sustancia a la conversación.

Ana Mata
Gracias por el comentario, y me alegro de que te haya servido!
Sonia Duro Limia
Leyenda

¡Llegar hasta aquí no es nada fácil!

¡Anda! Me parece una ideaza. No lo había pensado.
Yo no soy muy amiga de los gifs, así que me acabas de dar una gran alternativa que, además, mejora la salud de la web.
Muchas gracias por compartir lo que sabes, gastre.
gastre
Experto

Brinda información valiosa y añade sustancia a la conversación.

Sonia Duro Limia
Hola muy buenas Sonia, me alegro de que te haga gustado.
Un saludo.

Enviar feedback

Your feedback must contain at least 3 words (10 characters).

Sólo usaremos tu dirección de correo para dar respuesta a tu feedback. Política de privacidad

Thank you for your feedback!