Categorías

Optimización de PageSpeed: Conseguir que las imágenes se carguen más rápido Parte 1 - WebP

La velocidad de la página es un componente crucial para un sitio web. Usted puede aumentar la velocidad de su sitio haciendo una variedad de modificaciones de optimización de la velocidad de la página. Una de ellas es la optimización de las imágenes.

Google ha confirmado que la velocidad de la página es un factor de clasificación y que la velocidad de un sitio puede afectar a la clasificación. La SIA puso a prueba esta afirmación para comprobar y confirmar qué considera exactamente Google cuando se trata de la velocidad de la página: ¿es el tiempo de carga de la página, el tiempo hasta el primer byte o la primera pintura del contenido? Descubrimos que si bien el tiempo de carga de la página o el tiempo que tarda en cargarse completamente no es un factor de clasificación, el tiempo hasta el primer byte sí podría serlo. Y a partir de esto, es mejor mantener su TTFB pequeño.

Aparte de la afirmación de Google de que es un factor de clasificación, la velocidad de la página es también un factor de experiencia del usuario. Los usuarios que visitan un sitio que se carga con lentitud, en la mayoría de los casos, abandonan la página. Esto puede conducir a un aumento de la tasa de rebote y afectar a las tasas de conversión.

visitantes felices del sitio web

Como puede ver, la velocidad de la página es un factor importante de un sitio y la optimización de la velocidad de la página de su sitio para que se cargue rápidamente satisface no sólo a Google, sino también a los visitantes de su página. Hay muchos ajustes de optimización de la velocidad de la página que puede hacer para mejorar la velocidad de su sitio. Uno de ellos es la optimización de sus imágenes.

Las imágenes suelen ser el archivo más grande de una página web y suele ser uno de los principales factores que ralentizan la velocidad de un sitio. Optimizar las imágenes para que el tamaño de los archivos no sea muy grande, sin dejar de ofrecer imágenes de calidad, es un factor importante a tener en cuenta.

En una de nuestras pruebas en el SIA, comprobamos si Google tiene preferencia por las imágenes JPG o PNG y descubrimos que, aunque no hay una preferencia particular entre ambas, se reduce a la velocidad de la página. En las pruebas, Clint habló de sus ideas sobre los formatos de imagen y la velocidad de las páginas, y presentó dos tipos de archivos de imagen de nueva generación que se cargan más rápido en comparación con JPG y PNG. Se trata de WebP y AVIF.

Aunque estos dos tipos no son exactamente nuevos, no son tan populares como JPG y PNG y a menudo se pasan por alto. Esto me hizo pensar en escribir sobre estos dos tipos de imágenes, para discutir más a fondo ambos formatos: qué son estos tipos de archivos de imagen, sus ventajas y desventajas, y cómo podrías aplicarlos a tus páginas.

En la primera parte de este artículo, nos centraremos en WebP. ¿Qué es WebP? ¿Debe cambiar sus imágenes a WebP? Si es así, ¿cómo aplicarlo a su sitio?

¿Qué es WebP?

qué es el webp

En realidad, WebP no es un formato de imagen nuevo. Fue desarrollado por Google en 2010 y fue diseñado para utilizar un algoritmo de compresión más optimizado en comparación con los otros formatos de imagen más comunes.

WebP es un formato de imagen que proporciona una compresión superior sin pérdidas y con pérdidas de las imágenes. En comparación con JPG, GIF y PNG, WebP reduce significativamente el tamaño de los archivos, al tiempo que conserva la calidad de la imagen.

Antes había que decidir entre el tamaño del archivo y la calidad de la imagen. La introducción de WebP lo ha resuelto con su menor tamaño de archivo y su alta calidad de imagen.

Puede convertir casi cualquier formato de imagen en WebP y verá casi la misma calidad de la imagen que la del JPG, PNG u otro formato original. Sin embargo, el tamaño del archivo es mucho más pequeño, entre un 20 y un 40% menos.

Anteriormente, WebP no era compatible con Internet Explorer y Safari, pero en el momento de escribir este artículo (septiembre de 2021), más de 94% de los navegadores web son compatibles con WebP. Muchos sitios web utilizan hoy en día WebP para sus imágenes debido a su mayor velocidad de carga. No podrá reconocer ninguna diferencia en el tipo de archivo.

Las miniaturas de Youtube que se ven en Chrome están en WebP y Facebook también utiliza este formato en los dispositivos Android.

navegadores web moomba

Otra de las ventajas de WebP, además de su mayor compresión, es que admite fondos transparentes similares a los de PNG. También admite transiciones y animaciones, al igual que el GIF, pero con un tamaño menor y una calidad similar.

Cómo aplicar WebP a su sitio web

hacer cambios en el sitio moomba

¿Está convencido de las ventajas de WebP y quiere actualizar sus imágenes a este formato? ¿Se pregunta cómo aplicarlo a su sitio web?

Existen herramientas y plugins que puedes utilizar para convertir tus imágenes JPG, PNG o de otro tipo a WebP.

Para las herramientas online, puedes utilizar Squoosh y Online-convert.com. Todo lo que tienes que hacer es subir tus imágenes JPG o PNG, y luego convertirlas a WebP.

Anteriormente, Photoshop no era compatible con WebP. Sin embargo, se ha puesto a disposición un plugin de Photoshop para WebP que puedes instalar y que te permite poder guardar tus imágenes bajo este formato.

Si estás en WordPress, a partir de WordPress 5.8, WebP es compatible y puedes subir tus imágenes a tu biblioteca multimedia directamente, igual que harías con las imágenes JPG, PNG y GIF. No es necesario instalar plugins de terceros para que el formato de imagen funcione.

Si no está en WordPress 5.8+ o si le preocupa no servir las imágenes WebP a los visitantes que utilizan navegadores no compatibles, entonces su mejor opción sería optar por un plugin.

Con un plugin, sus imágenes JPG o PNG se convierten en WebP cuando el visitante utiliza un navegador compatible. Si el navegador del visitante no soporta WebP, entonces se sirve la imagen JPG o PNG. ¡De esta manera, usted tiene la seguridad de que todo el mundo puede ver sus imágenes y los que están en los navegadores compatibles pueden ver sus páginas rápidamente!

Los plugins que puedes utilizar para este fin son ShortPixel, Imagify y Optimole, entre otros.

Si quieres acelerar la velocidad de tu sitio, WebP es definitivamente una gran opción. Tus visitantes tendrán la misma experiencia que con una imagen JPG o PNG, pero todo se cargará más rápido. De hecho, PageSpeed Insights recomienda servir sus imágenes en WebP, para ayudar a acelerar su sitio.

¿Se trata de un factor de clasificación? Eso es algo que no hemos probado en el SIA, pero que añadiremos a nuestra lista de cosas a probar.

Sin embargo, factor de clasificación o no, le proporciona el beneficio de tener páginas de carga más rápida que pueden ayudar a hacer feliz tanto a Google como a sus visitantes. Todos salimos ganando.

En la segunda parte de este artículo, hablaremos del formato de imagen AVIF, que es más rápido que WebP. ¿Debería optar por AVIF o es suficiente con WebP? Hablamos de todo esto en parte 2 del artículo.

Marie Aquino

SIA STAFF SEO WRITER

Marie's biografía completa aquí.