La WPO o Web Performance Optimization, es un apartado fundamental dentro del desarrollo web. Una web rápida se traduce en una mejor experiencia de usuario y también nos asegura una buena imagen de cara al posicionamiento en buscadores.
El señor Google valora positivamente aquellas webs que no hacen esperar al usuario y por tanto nos ayudará a escalar posiciones en las SERP frente a otros competidores que no trabajen este aspecto técnico.
El tiempo de espera se convierte en un aspecto a cuidar ya que afecta directamente a la conversión de nuestro sitio web. Más de un 50% de los usuarios abandonan una web si tarda más de 3 segundos en cargar.
En el siguiente artículo nos centraremos en la optimización de las imágenes para una web. Esta suele ser una de las principales causas que ralentizan nuestra tienda online y es necesario ponerle solución.
Tests de Velocidad de Carga
El primer paso será detectar si las imágenes que estamos utilizando suponen un problema y están agotando los recursos de nuestro servidor. Para ello existen los llamados Tests de Velocidad de Carga como: Google PageSpeed Insights o GTmetrix.
Estas herramientas de análisis nos ayudarán a identificar los diferentes cuellos de botella que afectan directamente a la carga web. Y para ello utilizan un sistema de semáforo de colores (verde, naranja y rojo) para saber aquellas partes optimizadas de nuestro sitio y aquellas que suponen un problema.
En ocasiones, nos encontramos con themes para nuestro CMS poco optimizados que retrasan la carga debido a numerosos ficheros .css o .js Aquellos temas más bonitos y con efectos visuales impactantes suelen suponer un sacrificio en velocidad.
Otro motivo, puede ser el de cargar muchos <iframes> de herramientas externas. Te recomendamos que analices los resultados junto a un perfil técnico o intentes contactar con tu hosting para poder comprender donde residen los aspectos más difíciles de comprender.
Optimización de imágenes para nuestra web
En cuanto a las imágenes, nos podemos encontrar con varios problemas a solucionar. Subir fotos a nuestro sitio web directamente desde el móvil no es para nada una práctica aconsejable, ten en cuenta que la calidad con la que nuestros smartphones toman las fotos actualmente es muy superior a hace unos años. El resultado son fotos de varios megas que harán que nuestra página cargue más y más lenta.
Las imágenes son demasiado grandes
Esto significa que estamos utilizando una escala que no se ajusta a como finalmente se muestra la imagen en el sitio. Nos llegamos a encontrar imágenes extraídas directamente desde un estudio de fotografía profesional cuyas dimensiones son de miles de píxeles para finalmente, utilizarlas en un pequeño espacio de nuestro contenido.
Esto no tiene sentido, puesto que estamos obligando al servidor a cargar una imagen más pesada de lo que debería para vuelvo volver a re-escalarla en pequeño.
La solución en estos casos es sencilla, podemos utilizar cualquier programa de edición, desde Photoshop hasta Paint y reducir la escala. El tamaño final que debemos utilizar nos lo dicen las propias herramientas de pagespeed que hemos comentando antes, de hecho, GTmetrix te permite descargar la imagen directamente con la escala óptima.
Las imágenes son demasiado pesadas
Cuando solucionamos el problema de la escala ya experimentamos una mejora en nuestra velocidad de carga, no obstante, todavía existen algunos consejos más para optimizar nuestras imágenes.
Podríamos empezar a utilizar formatos de próxima generación, como lo son JPEG 2000, JPEG XR y WebP que comprimen mejor las imágenes que los formatos PNG o JPEG, lo que hace que se descarguen más rápido y consuman menos datos.
También podemos jugar con la calidad de las imágenes, es decir, sacrificamos un poco de calidad visual que en ocasiones no es apreciable por el ojo humano para que el peso sea menor. Esto lo podemos hacer con herramientas como Photoshop aunque existen algunas más intuitivas y especializadas en este único paso como RIOT. En el siguiente vídeo te explicamos cómo utilizarla.
Vídeo sobre WPO y Optimización de Imágenes [RIOT + Imagify]
Imagify, plugin para optimización en WordPress
Imagify es un plugin dentro del propio repositorio de WordPress que puede ayudarnos a solucionar algunos de los aspectos que hemos comentado anteriormente. Actualmente el plugin cuenta con más de 400.000+ instalaciones activas y tiene versión free, lo puedes descargar directamente desde aquí.
Con él podemos optimizar la calidad de todas las imágenes que subamos a través del repositorio de medios de WordPress. Desde optimización Normal hasta Ultra, lo que estaremos indicando es la calidad que queremos sacrificar a cambio de un menor peso y por ende, menor tiempo de espera.
También podemos mantener un backup de las imágenes originales, así como convertir a formatos de próxima generación aquellas fotos que utilicemos. Por último gestionar los Datos EXIF, que son los parámetros de la cámara como el ISO utilizando para tomar la fotografía. Podemos decidir si mantenerlos o limpiarlos.
Así que no lo olvides, la velocidad de carga es un parámetro muy importante tanto para la captación (SEO) como para la conversión (UX) y conviene mantenerla cuidada.
