Cómo optimizar el rendimiento web y los resultados finales

La paciencia no es una virtud para los visitantes del sitio web y los compradores en línea. Cada fracción de segundo cuenta cuando se trata de mantener, o perder, un visitante en su sitio web.

Según Kissmetrics, el tiempo de carga es un factor importante que contribuye al abandono de la página. Debido a que el visitante web promedio no tiene paciencia con una página que tarda demasiado en cargarse, el porcentaje de abandono aumenta con cada segundo de tiempo de carga. Casi el 40% de los usuarios abandonarán una página después de 10 segundos, señaló el blog. Es probable que los usuarios de Internet móvil experimenten la mayor frustración con este problema: el 73% notó que encontraron un sitio web que era demasiado lento para cargar.

El problema de carga de la página afecta directamente el comportamiento de compra de los visitantes del sitio web. Kissmetrics también señaló que el 79% de los compradores que no estaban satisfechos con el rendimiento del sitio web tienen menos probabilidades de comprar en el mismo sitio nuevamente. Casi la mitad de los consumidores esperan que las páginas se carguen en 2 segundos o menos, y un retraso de 1 segundo disminuirá la satisfacción del cliente en un 16 %.

Las consecuencias de estos retrasos se traducen en dinero real. El gigante del comercio electrónico Amazon reveló que una ralentización de la carga de la página de solo 1 segundo le costaría $ 1.6 mil millones en ingresos por ventas. De igual forma, Google señaló que una ralentización de tan solo cuatro décimas de segundo en sus resultados de búsqueda supondría una pérdida de 8 millones de búsquedas al día, lo que se traduce en millones menos en publicidad online.

Llegar al corazón del problema

Los factores que más contribuyen y afectan el tiempo de carga son las imágenes, los videos y los gráficos. Los sitios web actuales incorporan más elementos visuales y menos texto para atraer visitantes. Según HTTP Archive, casi el 64% del peso promedio de un sitio web son imágenes, mientras que el video representa otro 8%.

Dado que estos tipos de medios representan casi las tres cuartas partes del tamaño del sitio web, es importante que administre de manera más eficiente las imágenes y los videos en su sitio para mejorar el rendimiento y las tasas de conversión. Veamos algunos pasos que puede seguir para reducir el impacto de las imágenes y los videos en el rendimiento de su sitio web.

Use formatos de imagen más eficientes y modernos

Google ha agregado soporte para su formato de imagen WebP a los navegadores Chrome, y Microsoft ha hecho lo mismo con JPEG-XR en la mayoría de sus navegadores Internet Explorer y Edge. Pero muchos desarrolladores aún no han aceptado estos cambios, y se han quedado con los mismos formatos JPG y PNG, en lugar de aprovechar cómo los formatos modernos pueden optimizar sus sitios.

Idealmente, debe convertir las imágenes a WebP y JPEG-XR cuando corresponda, y ajustar la calidad de compresión para equilibrar los formatos. También es importante detectar el navegador específico que accede a cada imagen y entregar una versión de la imagen optimizada para el navegador respectivo. Si lo hace, podrá asegurarse de que los usuarios reciban las mejores imágenes posibles, en términos de calidad visual y optimización del tamaño del archivo, sin ralentizar su sitio.

Elimine el derroche de cambio de tamaño del lado del navegador

Los desarrolladores a menudo usan el cambio de tamaño de la imagen del lado del navegador como acceso directo, en lugar de cambiar el tamaño de las imágenes del lado del servidor. Si bien el resultado final se ve exactamente igual en los navegadores modernos, el impacto en el ancho de banda es bastante diferente. Con el cambio de tamaño del lado del navegador, los visitantes del sitio web pierden un tiempo precioso descargando una imagen innecesariamente grande y usted desperdicia ancho de banda entregándosela.

Para los navegadores más antiguos, el problema es aún más pronunciado ya que sus algoritmos de cambio de tamaño suelen ser inferiores a la media. Debe asegurarse de que sus imágenes se ajusten perfectamente a las dimensiones requeridas del sitio web. Vale la pena crear diferentes miniaturas de la misma imagen en lugar de entregar una imagen grande y confiar en el navegador para cambiar su tamaño. Hay algunas herramientas disponibles que pueden ayudar con esto, como un redimensionador de imágenes de código abierto como ImageMagick o una solución basada en la nube como Cloudinary.

Utilice los tipos de archivo de imagen correctos

JPEG, PNG y GIF son los formatos de archivo más comunes utilizados en los sitios web hoy en día, pero cada uno tiene funciones muy diferentes. Utilice el formato incorrecto y estará desperdiciando el tiempo de sus visitantes y su propio dinero. Un error frecuente es utilizar archivos PNG para entregar fotografías. Hay una idea errónea común de que los PNG, como formatos sin pérdidas, producirán la reproducción más alta posible para las fotos.

Si bien esto es generalmente cierto, también es una optimización bastante innecesaria. Es importante tener en cuenta qué formato de imagen se debe utilizar para el contenido que se muestra. PNG debe usarse para imágenes generadas por computadora (gráficos, logotipos, etc.) o cuando necesite transparencia en su imagen (superposiciones de imágenes); JPEG cuando muestra una fotografía capturada; y GIF cuando se necesita animación (animación de carga Ajax, etc.).

No use un solo tamaño de imagen en todos los medios de entrega

Su sitio web se ve en muchos dispositivos diferentes, especialmente porque los consumidores prefieren los teléfonos inteligentes, las tabletas y los relojes inteligentes. A menudo, los desarrolladores ofrecen las mismas imágenes en todas las resoluciones de dispositivos, utilizando el cambio de tamaño del lado del cliente para las imágenes. Las imágenes pueden verse muy bien, pero los visitantes pierden el tiempo cargando imágenes innecesariamente grandes en sus dispositivos y usted paga por el uso redundante de ancho de banda.

Esto es particularmente injusto para los usuarios de 3G y los usuarios de roaming que pagan un gran extra para descargar imágenes de alta resolución innecesariamente adicionales. Para evitar estos problemas, debe identificar los dispositivos móviles de los visitantes y la resolución mediante su agente de usuario. Con la resolución correcta en la mano, recupere la imagen que mejor se ajuste de sus servidores. Esto requiere que ponga a disposición un conjunto de miniaturas para cada una de sus imágenes originales. Hay excelentes paquetes de Javascript disponibles que automatizarán este proceso.

Aproveche el diseño receptivo

Cada dispositivo que utiliza un visitante para acceder a su sitio tiene una resolución diferente. El marcado de un sitio web debe adaptarse para verse perfecto en todos los diferentes dispositivos y en varias resoluciones, densidades de píxeles y orientaciones de dispositivos móviles. Administrar, manipular y entregar imágenes es uno de los principales desafíos del diseño receptivo que enfrentan los desarrolladores web.

Debido a estos desafíos, muchos sitios web se construyen con las imágenes de mayor resolución que pueden ser necesarias y simplemente se reducen en el lado del cliente según el punto de interrupción. Este proceso es ineficiente y perjudica el rendimiento. Pero hay opciones, como la herramienta de código abierto Responsive Breakpoints, que pueden ayudarlo a generar todos los tamaños de imagen que necesitará, así como el código HTML apropiado.

Utilizar redes de entrega de contenido (CDN)

Los CDNS suelen tener servidores desplegados estratégicamente en todo el mundo para acortar los tiempos de ida y vuelta del contenido. Las CDN permiten que las imágenes se sirvan más rápidamente a los usuarios y reducen la probabilidad de bloqueos, mejoran el rendimiento de SEO y mejoran la experiencia del usuario. Cuando elija una CDN, deberá considerar su nivel de cobertura global, la tasa de almacenamiento en caché, la capacidad de ejecutar operaciones lógicas en el perímetro, los tiempos de respuesta promedio y otras métricas, como los tiempos de invalidación promedio.

El impacto del cambio

Al emplear estas mejores prácticas, realmente puede marcar una diferencia en la experiencia del usuario, alentando a los visitantes a permanecer más tiempo, navegar más, participar y realizar compras. Considere los resultados de estas empresas:

Apartment List, un recurso en línea que ayuda a las personas a buscar viviendas de alquiler, se encontró lidiando con una variedad de formatos y resoluciones de imagen diferentes a medida que recopila fuentes de datos de imágenes de las diversas comunidades de apartamentos que aparecen en su sitio. Al transformar todas estas imágenes en imágenes óptimas para su presentación en dispositivos móviles de varios tamaños, así como en computadoras de escritorio, además de aprovechar las técnicas de diseño receptivo, la empresa vio un aumento de casi el 20 % en sus tasas de conversión.

KartRocket, una plataforma de comercio electrónico basada en SaaS que ofrece un ecosistema de comercio electrónico transparente y completo que ayuda a las PYMES a crear rápida y fácilmente tiendas en línea, necesarias para encontrar una manera de garantizar la calidad de las imágenes sin afectar el tiempo de carga o el rendimiento del sitio para su clientela. Aprovechó las herramientas para controlar dinámicamente las imágenes, de modo que se optimizaron para miniaturas pequeñas, imágenes de pancartas grandes e imágenes de productos principales. Este enfoque permitió a KartRocket lograr un aumento de 100 veces en el tiempo de respuesta para la carga de imágenes.

La línea de fondo

Cuando el tiempo es dinero, los propietarios de sitios web no pueden darse el lujo de no tomar todas las medidas necesarias para mejorar las experiencias de sus visitantes. Incluso una fracción de segundo de retraso en la carga de una página podría traducirse en pérdida de ingresos y confianza por parte del consumidor.

Teniendo en cuenta que las imágenes y los videos son los que más consumen ancho de banda en la mayoría de los sitios web, debe analizar seriamente el diseño web y los formatos de imagen, luego tomar las medidas necesarias para asegurarse de que los medios estén optimizados para que su sitio, sin mencionar sus ingresos y percepciones de los clientes: no sufra como resultado.