5 consejos para crear sitios web más rápidos y sostenibles con Fastly

Como integrante del equipo de Solutions Engineering de Fastly, me dedico a crear soluciones para clientes que utilizan la nube de informática en el edge flexible de Fastly. Últimamente he estado investigado objetivos de desarrollo sostenible y me he llevado una grata sorpresa al descubrir la estrecha relación que existe entre la sostenibilidad digital y el rendimiento web.

Encontrar documentación relacionada con la sostenibilidad digital no resulta nada fácil, así que estoy muy agradecido al W3C Sustainable Web Design Community Group por haber publicado hace poco el borrador del informe Web Sustainability Guidelines.

Este documento contiene un conjunto de recomendaciones identificadas mediante un número, como se puede ver en la lista de abajo. Cada recomendación está asociada a una serie de datos, criterios, ventajas, ejemplos y recursos. Entre todas ellas, hay cinco que destacan especialmente por su capacidad para mejorar considerablemente el rendimiento web. 

En la guía hay unas cuantas sugerencias adicionales que contribuyen a su efectividad: 

• 2.6 Ofrecer siempre experiencias fluidas que consuman pocos recursos

• 2.7 Evitar el uso innecesario o excesivo de contenidos

• 2.16 Utilizar los contenidos multimedia de una manera más sostenible

• 2.18 Utilizar los tipos de letra de una manera más sostenible

• 2.26 Realizar pruebas de rendimiento en cada ciclo de lanzamiento importante

• 3.1 Identificar los indicadores técnicos pertinentes

• 3.2 Reducir al mínimo el uso de HTML, CSS y JavaScript

• 3.7 Evaluar los servicios externos con rigurosidad

• 3.9 Eliminar los contenidos que impiden el renderizado de las páginas

• 5.27 Definir los presupuestos asociados al rendimiento y la sostenibilidad

Veamos más a fondo las cinco recomendaciones clave:

2.15 Utilizar las imágenes de una manera más sostenible

Las imágenes son especialmente útiles y numerosas, de ahí que suelan acaparar la mayor parte de los datos digitales que se transfieren a través de una aplicación o sitio web. Por lo tanto, cuanto más reduzcas su tamaño y las cargas innecesarias, mejor será para la sostenibilidad.

Clave del éxito - Optimización de imágenes: conviene redimensionar, optimizar y comprimir cada imagen fuera del navegador y ofrecer varios tamaños que se adapten a distintas resoluciones de pantalla.

Ventaja en términos de rendimiento: si optimizas las imágenes, puedes agilizar las peticiones HTTP, las transferencias de datos e incluso el renderizado físico en tu sitio web, factores que tienen un efecto positivo en la experiencia de uso y la velocidad de acceso.

Qué ofrece Fastly: Image Optimizer de Fastly mejora el rendimiento sin sacrificar la experiencia reduciendo los tiempos de carga de las páginas con mucha carga visual mediante el uso de imágenes optimizadas que se transforman en el edge. De esta forma, los usuarios de tu sitio web disfrutarán de una carga más rápida y tu equipo de desarrollo podrá centrarse en tareas más interesantes que la optimización de imágenes. 

4.2 Optimizar el almacenamiento en caché en navegadores

Con el almacenamiento en caché en navegadores, los archivos no necesitan cargarse constantemente desde el servidor y, en algunas ocasiones, pueden verse sin conexión. En el caso de un proxy inverso, las peticiones recurrentes se pueden enviar de inmediato sin que el servidor tenga que realizar tareas de cálculo o computación adicionales. Esto tiene ventajas en materia de sostenibilidad y rendimiento. Por ejemplo, el tiempo hasta el primer byte se reduce de manera considerable.

Clave del éxito - Almacenamiento en caché en el lado del servidor: si tienes un sistema de gestión de contenidos (CMS), puedes instalar un complemento para habilitar el almacenamiento en caché sobre la marcha en el lado del servidor. Otra opción es utilizar los archivos de configuración del servidor proporcionados para incluir y modificar el vencimiento de la caché mediante el encabezado HTTP expires, bfcache o cache-control. Si empleas un lenguaje o entorno que genera páginas a partir de peticiones, almacena en caché las respuestas de las páginas estáticas y así podrán reutilizarse para futuros usuarios.

Ventaja en términos de rendimiento: los archivos sin modificar no tienen que descargarse constantemente, lo cual contribuye a ahorrar ancho de banda, y el almacenamiento en caché en el lado del servidor requiere menos recursos informáticos porque, con toda probabilidad, no hay que enviar tantas peticiones HTTP. Además, almacenar en caché de forma selectiva agiliza los tiempos de carga a la hora de abrir una nueva página: cuando se envían las mismas peticiones y los datos ya están ahí, los usuarios suelen disfrutar de una menor latencia.

Qué ofrece Fastly: nos encanta el almacenamiento en caché, que es muy potente en el servidor y en Fastly. Consulta esta guía para obtener más información y conocer las prácticas recomendadas en lo relativo a la actualización de los datos en caché y su tiempo de vida. 

4.3 Comprimir los archivos

Todos los archivos ocupan un espacio determinado en el disco duro de un servidor. El consumo asociado al envío de estos datos a cada usuario puede reducirse haciendo que los archivos ocupen menos mediante algoritmos de compresión.

Clave del éxito - Compresión en el lado del servidor: si tienes un CMS, puedes habilitar la compresión sobre la marcha en el lado del servidor instalando un complemento, como Brotli o GZIP. Otra opción es utilizar los archivos de configuración del servidor para incluir funcionalidades relacionadas con el rendimiento y adaptarlas a los requisitos.

Qué ofrece Fastly: la compresión de activos sin pérdida supone una gran ventaja en términos de rendimiento. Fastly puede comprimir todo tipo de archivos, independientemente de que se puedan almacenar en caché o no. Consulta esta guía para obtener más información sobre la distribución de contenidos comprimidos con Fastly. 

4.7 Comprender la importancia de la frecuencia de actualización para los usuarios

No envíes datos desde el servidor a menos que un usuario lo necesite. Siempre que sea posible, recurre a la caché en el lado del cliente o el lado del servidor y al almacenamiento en el lado del cliente o el entorno local. En lugar de actualizar los datos con una determinada frecuencia, puede ser una buena idea dejar esto en manos de los usuarios.

Clave del éxito - Frecuencia de actualización: define la frecuencia de actualización de la caché, los datos almacenados en el entorno local y la página según las necesidades de los usuarios.

Ventaja económica: el almacenamiento en caché puede reducir la cantidad de datos que se transmiten a través de una red y, por consiguiente, los gastos asociados.

Qué ofrece Fastly: una de las principales ventajas del almacenamiento en caché de Fastly es que puedes decidir el tiempo durante el cual se almacena el contenido (consulta esta guía sobre la actualización de los datos y su tiempo de vida) e invalidarlo cuando experimente algún cambio (consulta esta guía sobre las purgas).  

4.10 Plantearse el uso de CDN y el almacenamiento en caché en el edge

El almacenamiento en caché en el edge y la distribución mediante CDN pueden hacer que la distribución de servicios digitales sea más sostenible al optimizar la forma en que el tráfico de tu sitio web se transfiere por internet.

Clave del éxito - Red de distribución de contenidos (CDN): si tu público está repartido por todo el mundo, utiliza una CDN para almacenar y distribuir contenidos ya generados de solo lectura de una forma rápida y eficiente. Sin duda, una CDN puede aumentar el rendimiento, pero añade otra capa a la infraestructura que se debe tener en cuenta para la sostenibilidad.

Ventaja en términos de rendimiento: los usuarios disfrutan de una menor latencia porque se reduce la distancia entre ellos y el servidor.

Qué ofrece Fastly: no podemos sino respaldar esta recomendación porque sabemos que el almacenamiento en caché en el edge permite ofrecer experiencias rápidas y personalizadas en todo el mundo.

Unamos fuerzas

Elige a Fastly y trabaja con nosotros en la creación de sitios web más rápidos y sostenibles.