La última actualización de Google aumentó aún más la importancia del contenido visual en el ranking de páginas. En efecto, optimizar imágenes , especialmente en e-commerce , reduce la velocidad de carga y mejora significativamente el ranking de una web.
6 consejos para optimizar imágenes en e-commerce Recientemente, Google Search Central (GSC) publicó un video imperdible acerca de cómo se debe abordar la optimización de imágenes. Es Alan Kent, desarrollador encargado del área de e-commerce de Google, quien realiza una revisión de puntos clave que hay que considerar al realizar este proceso:
1. Eliminar el desplazamiento de diseño acumulado (CLS), clave para optimizar imágenes Imagina que estás tratando de leer una página y todo comienza a cambiar a tu alrededor. O que agregas un elemento al carrito y un repentino pop-up mueve el botón de compra de su lugar. Este tipo de experiencias generan ruido y se manifiestan como una frustración entre los usuarios. Tal es su importancia que Google lo definió como una de las tres métricas principales de Web Vitals .
Al respecto, GSC recomienda la utilización de herramientas como PageSpeed Insights para reducir el CLS; es decir, el rango de tiempo que le toma a los elementos de diseño cambiar de posición. Al respecto, Kent resalta su utilidad, ya que presenta datos de laboratorio y de campo en un solo informe. Para reducirlo el CLS, también se recomienda evitar:
Cambios de diseño invasivos. Imágenes que no tengan ancho y alto explícitos. Solucionar problemas de almacenamiento en caché de imágenes puede ser simple. Por ejemplo, basta con incluir las dimensiones de la imagen en el marcado HTML. De esta forma, el navegador sabe inmediatamente cuánto espacio reservar para la imagen.
2. Elegir el ancho y la altura correctos para las imágenes En este nuevo apartado para optimizar imágenes , GSC igualmente resalta la importancia del uso de PageSpeed. Usando esta herramienta se logran detectar anomalías en el tamaño de las imágenes. También, se identifican imágenes en una página que tienen dimensiones más grandes de lo necesario.
Una vez que hayas detectado un problema puedes, por ejemplo, aplicar comandos de atributo en HTML enumerando las URL de diferentes tamaños y formatos de imágenes. De esta manera, el navegador podrá elegir la mejor imagen para descargar en cada caso.
En este apartado se destaca la importancia de generar una distinción entre las necesidades de diseño, comparadas con los tipos de formatos a usar. Concretamente, se debe tener cuidado con formatos como JPEG y WEBP, en relación con su peso. Estos se pueden reducir utilizando algoritmos de compresión con pérdida de tamaño.
Si requieres optimizar imágenes con píxeles perfectos, como para íconos de botones, debes emplear formatos menos eficientes. Alternativamente, en lugar de elegir un solo formato, puedes hacer que tu sitio web se convierta en el formato más eficiente que el navegador dice que admite.
4. Codificar las imágenes de manera eficiente PageSpeed tiene una sección que permite identificar imágenes candidatas para compresión. Para encontrar un factor de calidad con el que estés satisfecho, agrega en tu herramienta de optimizar imágenes favoritas diferentes valores de calidad. Un valor predeterminado común para WEBP es 75. Al respecto, Kent señala: «Si bien las imágenes de menor calidad pueden sonar como una mala idea, recuerda que la degradación de la calidad puede no ser percibida por los compradores».
5. Caché de imágenes usado en el navegador Decirle al navegador cuánto tiempo y dónde puedes almacenar imágenes en caché beneficia el tiempo de carga de una web. Usando el informe de análisis podrás detectar oportunidades para optimizar imágenes .
Si es tu caso y eres de los que no cambia las imágenes con frecuencia, entonces puedes establecer una duración de caché más larga. Otro truco es almacenar imágenes en múltiples ubicaciones alrededor del mundo, más cerca de donde se conectan tus usuarios.
6. Secuenciar el orden en que se descargan los recursos, necesario para optimizar imágenes Cualquiera que sea el enfoque que utilices para optimizar imágenes , existe un cuello de botella en el ancho de banda de la red. En general, desearás programar la descarga imágenes destacadas de gran tamaño en la parte superior de la página.
Luego las imágenes serán visibles sin necesidad de desplazarse en tu página. Una técnica común para mejorar el orden de carga de imágenes es la carga diferida. Aquí es donde las imágenes no se descargan hasta que el usuario se desplaza a esa parte de la página.
Para finalizar, sabemos que las imágenes en realidad producen tráfico a tu contenido, lo que tiene el potencial de generar permanencia y aumentar el rango de tu página. Como consecuencia, todos los esfuerzos que apliques siguiendo estos consejos pronto darán frutos.
