La mejor optimización de carga de imágenes

Los estudios muestran que un retraso de un segundo en la carga de imágenes reduce las conversiones en un 7 %, las vistas de página en un 11 % y la satisfacción del cliente en un 16 %.

En Spurtcommerce, una solución de comercio electrónico de código abierto basada en NodeJS y Angular, hemos utilizado la mejor metodología para mejorar la función de carga de imágenes. Hemos optimizado todo el proceso al máximo para que la carga de imágenes sea rápida, sin hacer esperar a los visitantes para ver los productos.

Hemos seguido tres pasos clave en el proceso de optimización de carga de imágenes en Spurtcommerce.

Paso 1: Las imágenes se cargan en el bucket de Amazon AWS S3

La imagen que el vendedor o el administrador sube desde su panel, al añadir un producto, es recibida tal cual por el sistema y se almacena en el bucket S3.

Paso 2: Función Lambda para definir diferentes dimensiones y recorte de imágenes en tiempo real

En el siguiente paso, escribimos una función Lambda, que es un programa para definir diferentes dimensiones a las que se recortan las imágenes en tiempo real. A través de este programa, puedes declarar las dimensiones que se permitirán para el recorte. También se restringen otras dimensiones que no hayan sido especificadas, por lo tanto, es fundamental ser claro al definirlas.

Así, según las solicitudes de los usuarios finales, las imágenes se recortan al instante y se muestran.

¿Por qué usamos la función Lambda?

Para mantener la concurrencia cuando hay mucho tráfico y más visitantes navegando por la plataforma, solicitando imágenes, una función Lambda independiente que defina diferentes tamaños para el recorte dinámico es la opción más viable.

Además, en el futuro, si cambias el diseño general de la plataforma de comercio electrónico y deseas mostrar más imágenes (por ejemplo, dos o tres imágenes por producto en la página de detalles y productos relacionados), y necesitas una imagen adicional con otras dimensiones, todo será más fácil, ya que solo tendrás que actualizar la función Lambda con la nueva dimensión.

Así, evitarás subir múltiples versiones de la misma imagen con diferentes tamaños. Solo mantendrás una imagen principal por producto en el S3, y podrás generar diferentes tamaños mediante Lambda.

Paso 3: Integración con CloudFront

Cuando un cliente hace una solicitud, CloudFront llama a la API y se conecta con S3 y Lambda. Luego, se obtiene la imagen desde S3, se recorta con Lambda y se entrega al usuario final a través de la capa CDN. Esta capa CDN almacena cachés en distintas ubicaciones dentro de la red de entrega. Una CDN primaria tiene varias subredes donde se guardan cachés de diferentes imágenes. Cuando un usuario hace una solicitud, en lugar de repetir todo el proceso, se entrega la imagen almacenada en caché desde la ubicación más cercana, haciendo que la entrega sea mucho más rápida.

Para minimizar la distancia entre los visitantes y el servidor de tu sitio web, una CDN almacena una versión en caché de su contenido en múltiples ubicaciones geográficas. Cada ubicación geográfica contiene varios servidores de caché responsables de entregar contenido a los visitantes cercanos.