En este artículo, te explicaré por qué deberías redimensionar las imágenes de tus sitios web, y cómo puedes aprovechar Google Cloud Functions con GCP Load Balancer y Cloud CDN para ofrecer imágenes redimensionadas sobre la marcha para mejorar el rendimiento de tu sitio web, ahorrar un costoso espacio de almacenamiento y mejorar el tiempo de carga de tu sitio web.
Casi todos los sitios web importantes cambian el tamaño de las fotos que aparecen en el sitio, y ello por tres razones principales:
- Descargar imágenes grandes conlleva un uso elevado del ancho de banda y altos costes de transferencia de datos.
- Reducir el tamaño de las imágenes mediante HTML requiere que el navegador del cliente descargue toda la imagen y luego dedique tiempo de CPU a redimensionarla, lo que ralentiza el tiempo de carga de tu sitio web.
- Sin redimensionar sobre la marcha, necesitas almacenar diferentes tamaños de la misma imagen para el Escritorio, el Móvil, la Tableta y el correo electrónico (boletín) de tu sitio web, ya que los costes de almacenamiento en la nube empiezan en 0,02 $/GB al mes, lo que podría resultar caro.
Lee más sobre la optimización de imágenes en el libro de Steve Souders, Sitios web aún más rápidosCapítulo 10.
El uso de la Red de Entrega de Contenidos (CDN) de Google Cloud nos permite proporcionar tiempos de carga más rápidos a nuestro contenido estático, ya que los objetos se almacenan en caché en la red de borde, que está repartida por todo el mundo.
La solución de este artículo utiliza los siguientes servicios:
- Google Cloud Storage - para almacenar las imágenes a tamaño completo.
- Función Nube - para redimensionar los objetos sobre la marcha.
- Google Cloud Load Balancer con Cloud CDN activado: los usuarios accederán al equilibrador de carga para recuperar las imágenes.
Creamos un Equilibrador de Carga en la Nube (LB) de GCP y lo configuramos para invocar una Función en la Nube, la función extrae una imagen del Almacenamiento en la Nube de Google (GCS), la redimensiona, y el LB responde con la imagen redimensionada y guarda la imagen en el borde para futuras peticiones.
Cómo desplegar
Creamos un Google Cloud Storage (GCS) Bucket y subimos todos los objetos (imágenes) en su tamaño original.
Establecemos un nombre para el cubo y configuramos una ubicación regional, y hacemos clic en el botón Crear:
Subimos una imagen, por ejemplo, nasdaq.jpg (del edificio Nasdaq en Times Square, que tomé en 2019) a este cubo en su tamaño original, 6,3 MB.
El siguiente paso es crear una función. Ve a la consola Funciones en la Nube y haz clic en Escribir una función.
Si es la primera vez que utilizas Cloud Functions, puede que veas el mensaje "La API de Cloud Functions está habilitada". Esto significa que las funciones de Cloud Functions se están habilitando en tu proyecto sin coste adicional.
En este paso, tenemos que configurar la función:
- Utilizamos el editor en línea.
- Establece un nombre para la función.
- Elige la región: debe ser la misma que la de la GCS.
- Configura el tiempo de ejecución. En esta demostración, trabajamos con Python.
- Y desmarca la autenticación IAM para que el LB pueda invocar la función.
Ahora haz clic en el botón Crear, y si es la primera vez que utilizas los servicios de GCP, puede que necesites habilitar algunas API más:
Ahora viene la parte divertida, tenemos que escribir el código que realmente extrae el archivo de GCS, lo redimensiona y devuelve el archivo redimensionado.
Queríamos ver si esto se podía hacer completamente por ChatGPT, así que hice unas cuantas iteraciones con el LLM, después de escribir las siguientes indicaciones:
"Escribe código Python para redimensionar imágenes jpg png a x,y en base a la cadena proporcionada".
"Supongamos que es una función de la nube de google que pasa los parámetros como cadena de consulta y el archivo debe cargarse desde gcs y el resultado debe enviarse a un equilibrador de carga con el tipo mime apropiado".
"¿Qué debo poner en requirements.txt para este código?"
"Ahora recibo 'Error al procesar la imagen: el módulo 'PIL.Image' no tiene el atributo 'ANTIALIAS'"
El resultado es el siguiente código. En la línea 9, establece el cubo que utilizamos:
Este es el archivo requirements.txt para configurar Cloud Functions, qué librerías Python debe utilizar para construir el contenedor:
Cuando actualizamos el código en main.py y las bibliotecas en requirements.txt, vemos una advertencia que dice "La función especificada (punto de entrada) podría no estar presente en tu código fuente. Por favor, asegúrate de que el punto de entrada en tu código coincide con el campo de entrada".
Esto se debe a que la función está llamando a la función redimensionar_imagen , y el nombre por defecto de la función de Cloud Functions es hola_http:
Cambiamos el punto de entrada de la Función a redimensionar_imagen y hacemos clic en Guardar y volver a desplegar.
Cloud Functions construye el contenedor de nuestro código. Puede tardar un par de minutos, y podemos seguir el estado de la construcción en la parte superior del panel de control:
Nota: Cloud Function invoca una función. La función utiliza la Cuenta de Servicio Predeterminada de Compute Engine, que concede a la función acceso a todos los Buckets GCS del proyecto. No cubriremos esto en el artículo, pero como mejor práctica, deberías utilizar una cuenta de servicio dedicada con el acceso menos privilegiado.
El siguiente paso es crear un Equilibrador de Carga. Busca "Equilibrador de Carga" en la consola de búsqueda, accede al panel del Equilibrador de Carga y haz clic en Crear equilibrador de carga:
Queremos crear un Equilibrador de carga de aplicaciones global, de cara al público. En el tipo de equilibrador de carga, elige Equilibrador de carga de aplicaciones (HTTP/HTTPS):
Queremos que nuestros usuarios de todo el mundo puedan acceder al equilibrador de carga, así que elegimos Public Facing (externo):
Elegimos el equilibrador de carga Global para aprovechar la función CDN de Google Cloud, que nos permite almacenar en caché la imagen redimensionada en el servidor de borde (sin coste adicional).
A continuación, elegimos la última generación del Equilibrador de Carga y pulsamos el botón Siguiente y Crear .
Para simplificar esta etapa, creamos un punto de entrada HTTP para el Equilibrador de Carga.
Establece un nombre para el Balanceador de Carga y la IP del frontend.
Haz clic en Configuración del backend, y en el cuadro Servicios de backend y cubos de backend, haz clic en Crear un servicio de backend.
Establece un nombre y una descripción para el servicio backend, y cambia el Tipo de backend a Grupo de puntos finales de red sin servidor.
Desplázate hasta el área Backends. En Nuevo backend, haz clic en Grupos de puntos finales de red sin servidor y haz clic en Crear grupo de puntos finales de red sin servidor.
Establece el Nombre para el Endpoint y elige la región donde creas la Función Nube.
Si nunca antes has invocado la función, aparecerá este error:
Ve al enlace que aparece en el error y activa la API de funciones en la nube:
Vuelve a la página del punto final de la red sin servidor, establece un nombre para el punto final, la Región donde se encuentra la función y elige Cloud Run (Puede resultar confuso, pero las Funciones Cloud ahora se llaman Funciones Cloud Run, y utilizan la misma tecnología subyacente).
Selecciona la función y haz clic en Crear.
En la página backend, podemos configurar los ajustes de la caché Cloud CDN:
Podemos configurar la CDN para que almacene en caché la respuesta durante el tiempo (1 hora a partir de la fila 54 del script), o durante un tiempo mayor.
Quiero destacar que la CDN utiliza una caché caliente, lo que significa que sólo el contenido solicitado con frecuencia se almacena en la caché de la CDN. Si estableces una caché de 1 año para tu contenido, pero no hay peticiones frecuentes al contenido, puedes esperar que al cabo de un tiempo la CDN extraiga el contenido del origen (la función).
Consulta la función de Registro (marcada con la flecha arriba). Es estupenda para depurar y hacer un seguimiento del uso, pero también es costosa (512 $ por 1 TB de registros).
Si generas muchas peticiones, puedes establecer la Tasa de muestreo en 0,01 para registrar una petición de cada 100 peticiones.
Bajemos hasta Seguridad:
Por defecto, Google activa Cloud Armor, el cortafuegos de aplicaciones web (WAF), para nuestro backend, pero como tiene un coste adicional y esto es una demostración, lo desactivamos haciendo clic en la política de seguridad del backend Cloud Armor y cambiándola a Ninguno.
El siguiente paso es hacer clic en Crear, y en el panel del Equilibrador de Carga, hacer clic de nuevo en Crear.
Nota: La creación y actualización de un Balanceador de Carga en GCP puede tardar hasta 15 minutos en propagarse.
Ahora, una vez que el equilibrador de carga esté listo, haz clic en el nombre del equilibrador de carga y verás la IP que se ha generado:
Accedemos a esta IP y especificamos el nombre de la imagen y la altura y anchura:
http://34.49.21.153/?image=nasdaq.jpg&size=500x600
El resultado: En lugar de un archivo de 6,5 MB, recibimos una imagen más pequeña y redimensionada, que pesaba 63 KB.
Mi trabajo consiste en guiar a los clientes en el uso de la nube. Ven a ver lo que podemos hacer por ti en doit.com/services
