Introducción a la Web Sostenible

by Injenieroupdated 18 Jul 2025 · Web Sostenible

Guía introductoria pensada para los tomadores de decisiones referente a la compra de servicio de desarrollo y diseño web, ya sean empresas industriales, empresarios autónomos, organizaciones sin fines de lucro, o empresas tercerizadas (agencias). La guía esta pensada tanto para ser una introducción a los conceptos de la Web Sostenible como para ver que es Web Sostenible en la práctica. Prepara un café/té/matecito e interiorizate con un tema que beneficiará a tu organización. Lectura estimada de 10 minutos.

Introducción
Definición
Analogía
Historia y Gobernanza
Por qué Web Sostenible?
Beneficios de la Web Sostenible
- Beneficios comerciales
- Beneficio para gerente de sostenibilidad
Calculadoras y metodologías
Web Sostenible en la práctica
Glosario Términos
Conclusión
Notas
Referencias

2112
2050
Actualmente
Tu web

La comunidad científica no considera que cambio climático sea un evento de extinción humana 1 , pero sí que será catastrófico para muchas personas, con un incremento de tormentas, ondas de calor y frío intenso, inundaciones y sequías 2.

Holanda es uno de los países con más historia y experiencia en ingeniería anti-inundación 3. Así que probablemente no hipopótamos ;)

Una web promedio B2B emite más de 100kg de CO2 al año. Estimación propia usando calculadora de websitecarbon 4

Introducción

Un sitio web es un punto de contacto de tu marca con tus clientes, proveedores, y sociedad en general. A pesar de que la primera impresión de Internet es de ser “limpia”, al no tener polución visible, Internet sí genera polución. Dicha polución provoca un impacto negativo en el ambiente, economía y sociedad. Cómo mitigar dicho impacto, por qué mitigarlo y qué se gana con mitigarlo son las cuestiones principales que Sostenibilidad Web trata.

Definición

Web sostenible es que hacemos para reducir el impacto en los recursos del planeta cuando creamos, mantenemos y usamos la web.

Analogía

Web sostenible es como comprar una apolleta led, es mucho más eficiente que las tradicionales, se puede comprar fácilmente (agencias web sostenibles), tiene precio razonable y contamina menos.

Historia y Gobernanza

Tal cual como en 1999 el grupo Web Content Accessibility Guidelines WCAG22, definio guias de accesibilidad para desarrolladores, en 2013 un grupo de apasionados y entusiastas por la sustentabilidad llamado the Sustainable Web Design CG5 junto individuos y organizaciones afines con el objetivo de crear la guía técnica de mejores prácticas en web sostenible. A partir de 2024 el grupo Sustainable Web Interest Group, del consorcio W3C tomo las riendas de la mantención de dicha guía6

Por qué Web Sostenible?

Por dos sencillas razones:

La web es útil
La web produce polución, que no es menor

Internet es parte de nuestras vidas en todos los niveles sociales, incluyendo la producción y comercialización de bienes, uso de servicios financieros, servicios médicos, defensa, transporte, construcción, energía, alimentación, entretenimiento y comunicación entre otros. Internet es responsable por el 4% del total de emisiones de carbono, equivalentes a la totalidad de la industria de aviación 7.

La web en particular, una de las mayores aplicaciones de internet (otras aplicaciones incluyen email, mensajería instantánea, FTP, entre otros) es usada día a día por billones de personas y sus proyecciones son de aumentar tanto su volumen de uso como su alcance. Se estima que una web promedio produce más de 100KG de CO2 al año! en dónde las emisiones provienen principalmente de 3 fuentes 8:

Producción de hardware, que contribuye un 22% de las emisiones de la web
Datacenters y transferencia de información, que contribuye un 24% de las emisiones de la web
Uso de dispositivos (pc, celulares, etc), que contribuyen un 54% de las emisiones de la web

Beneficios de la Web Sostenible

Web Sostenible utiliza el mínimo de recursos necesarios para cumplir tus objetivos de negocio.

A nivel privado: Tiene ventajas comerciales con excelente retorno por peso invertido.
A nivel social: Reduce las emisiones CO2, con los beneficios que ello implica en contexto de cambio climático.
A nivel económico: Crea nuevas oportunidades comerciales e incrementa la eficiencia económica.

Beneficios comerciales

Web Sostenible mejora SEO, velocidad, accesibilidad, usabilidad y reputación ambiental de tu sitio web/ecommerce/sistema.

Una web veloz implica mayor probabilidad de conversión y menor probabilidad de abandono
Mejor SEO aumenta volumen y mejora la probabilidad de conversión
Una web accesible aumenta la diversidad de usuarios y casos de uso junto con mejorar el SEO, lo que aumenta el alcance y probabilidad de conversión
Una web eficiente genera menores costos de mantención
Dependiendo de la industria, NO ser sostenible es PERDER ventas
Mejor usabilidad se traduce en mayor conversión
Mejor experiencia de usuario implica mejor branding
Mejor reputación. Ante igualdad de los atributos de una marca muy pocas personas van a prefirir empresa que contamina más.

Beneficio para gerente de sostenibilidad

Sotenibilidad industrial es difícil. Requiere mejorar procesos, ser más eficientes e innovar. Dificultad de alinear objetivos internos de la organización, incentivos de “greenwashing” ¹, falta de capital humano experiente en nuevas tecnologías y altos costos de inversión entre otros.

No obstante, web sostenible no lo es. Web sostenible es razonable en precios, en dificultad, fácil de tercerizar con empresas competentes (como Injeniero) y mejora muchos atributos comerciales de una web (SEO, velocidad, accesibilidad, reputación ambiental).

Web sostenible es una ganacia fácil para un gerente en sostenibilidad. Un checklist menos en una gerencia difícil y cada vez más importante.

Calculadoras y metodologías

Es posible estimar las emisiones de CO2 producidas por una página web. Es importante notar que:

Las páginas web sí producen emisiones de CO2.
Son estimaciones y dependen de la metodología usada.

En particular en Injeniero usamos la calculadora de websitecarbon.com. Podríamos crear nuestra propia calculadora, o crear un proyecto con alguna Universidad, no obstante, nuestra apreciación es que el número preciso es irrelevante. Categorías de A y A+ son suficientes como un atributo a conseguir en una web, debido a que la mayoría de las empresas no consiguen dicha categoría, produciendo uma mejora de sostenibilidad web. A su vez por ser calculadoras más antiguas y con mayor difusión es un buen punto comparativo (comparar manzanas con manzanas) para compararse a otras páginas web. No obstante recalcamos que el número en sí es especulativo y sensible. En particular la metodología de websitecarbon.com se basa en la metodología de SustainableWeb Design 8 que usa modelo Diseño Web Sostenible (SWDM).

SWDM es un marco de código abierto (actualmente en la Versión 4) para estimar las emisiones de gases de efecto invernadero de servicios digitales: sitios web, apps, streaming, APIs, etc. Fue desarrollado por varias organizaciones del ámbito tecnológico sostenible. Es modular, transparente y permite integrar tus propios datos para mayor precisión.

Alcance y Límites SWDM

El modelo abarca tres grandes áreas:

Centros de datos (22% del consumo energético)
Infraestructura de red (24%)
Dispositivos del usuario (54%)

Incluye:

Emisiones operativas (energía usada en funcionamiento)
Emisiones incorporadas (por fabricación del hardware)

Datos Clave de Entrada

Transferencia de datos (GB): Unidad principal para estimar el consumo energético.
Intensidad de carbono de la red eléctrica (gCO₂e/kWh): El valor por defecto global es de 494 gCO₂e/kWh, pero puede personalizarse según el país o región.

Por qué usar la transferencia de datos?

Es medible y rastreable.
Refleja el impacto del diseño poco optimizado (páginas pesadas).
Es coherente con estudios previos.

Cómo Funciona?

Consumo energético por GB:

Centros de datos: 0,055 kWh/GB
Red: 0,059 kWh/GB
Dispositivos: 0,080 kWh/GB

Multiplicando los valores anteriores por la intensidad de carbono se obtienen las emisiones operativas por GB.

Emisiones incorporadas (fabricación de equipos):

Centros de datos: 0,012 kWh/GB
Red: 0,013 kWh/GB
Dispositivos: 0,081 kWh/GB

Multiplicadas también por la intensidad de carbono.

Fórmula completa:

Se calcula el CO₂ por visita web considerando:

Visitantes nuevos vs. recurrentes
Caché y optimización
Si el hosting es alimentado por energías renovables

Fortalezas SWDM

Estándar y comparable
Útil para estimaciones rápidas
Distingue entre emisiones operativas e incorporadas
Es modular y personalizable, pudiendo incluir datos propios

Limitaciones

Tiende a sobreestimar ligeramente para ser conservador
No detecta detalles a nivel técnico fino (como uso de CPU)
Basado en promedios globales, no en datos específicos por usuario o dispositivo

Fuentes de Datos Utilizadas

Consumo energético: IEA 2022, Malmodin 2023
Transferencia de datos total: ITU 2023
Intensidad de carbono: Ember 2022
Emisiones incorporadas: Malmodin 2023

Consideraciones del modelo

El SWDM v4 es una herramienta robusta y adaptable para estimar la huella de carbono digital. Usa datos de transferencia y consumo energético para obtener resultados que, aunque conservadores, son consistentes y útiles para guiar decisiones de diseño más sostenibles.

Más allá de resultados en test calculadoras de emisiones de CO2 de páginas web, nuestra recomendación práctica es intentar lograr una página con carga inicial entre 300 kb a 500 kb

Web Sostenible en la práctica

Caché

Las páginas web funcionan con el modelo cliente-servidor, en dónde el cliente es un computador con un navegador que escribe una dirección (ejemplo miempresa.com) y el servidor es el computador que entrega los archivos que componen una página (HTML, JS, CSS, imágenes, etc). Cada visita implica “un viaje”, llamado request, desde el dispositivo del cliente hasta el servidor, produciendo emisiones CO2, en el uso de ambos dispositivo (cliente y servidor) junto con la transferencia de información y el procesamiento de información.

Mientras menos “visitas” (requests) menos emisiones. Una de las maneras más eficientes de evitar requests que no son realmente necesarios, es el uso de cache. La lógica de cache es bien simple, si el archivo solicitado no ha cambiado, entonces por qué perdirlo nuevamente al servidor si puede ser guardado en el cliente. Cache no es otra cosa que una copia guardada.

Cache debe ser definido cuidadosamente pues puede perjudicar un sitio si es mal implementado. Por ejemplo, actualizaciones de nuevo contenido pueden no aparecer hasta sino borrar el cache. Una política de cache incorrecta puede hacer que un gran esfuerzo de marketing se vaya a la basura. Por otro lado, una política adecuada puede acelerar enormemente la carga del sitio en las visitas reiteradas junto con contribuir con menor emisión de CO2.

Quizá una de las formas más efectivas sea el “cache busting”. Cache busting se basa en cambiar el nombre del archivo o bien agregar una query a la url del archivo de tal manera que el navegador lo considere un nuevo archivo y por lo mismo necesariamente lo cargue. Por ejemplo si existe la imagen <img src="/imagenes/foto.avif"> y se modifica el archivo foto.avif, cache busting agrega –via un proceso de “building”– un hash único al nombre por ejemplo <img src="/imagenes/foto-224-434-3434.avif"> haciendo que la url del archivo cambie. Esto también es posible de lograr vía una query, como por ejemplo <img src="/imagenes/foto.avif?3525-55345">En ambos casos el navegador solicita nuevamente el archivo descartando la copia del cache por la nueva. Dedibo a que es una url única, es posible entonces aplicar reglas estricas de cache con larga duración pues está garantizado que de cambiar/editar la foto, la url será diferente.

Imágenes

Imágenes son sin duda el plato principal en optimización web, pues la mayoría de los kilobytes de un sito proviene de imágenes. En la práctica se basa en usar formatos eficientes como .avif, .webp y .svg e incluir atributos html responsivos tales como srcset, sizes, fetchpriority, loading="lazy"

Es tal su importancia que escribimos un post dedicado imágenes responsivas en markdown para crear imágenes responsivas y sostenibles usando Markdown

Carga inicial

La carga inicial es crítica en todo sitio web debido a la poca tolerancia de los usuarios a esperar. Por otro lado, usando técnicas “lazy” de ir cargando contenido a medida que se hace scroll o navega, es posible ahorrar kilobytes innecesarios.

Una de las recomendaciones es evitar obligar al usuario a consumir contenido. Un ejemplo típico son los videos y audios con autoplay. En vez de eso, cargar el video sólo si hay una intención de uso (usando efecto hover por ejemplo) y que sea el usuario quien decide si consumir dicho contenido o no mostrando una imagen representativa del video. Cabe señalar que hay excepciones en dónde hace sentido el patrón del autoplay tales como landingpages en contexto de una campaña de marketing. No obstante, en el sitio web corporativo y páginas con visitas frecuentes pierde su sentido.

Optimizar la carga inicial no sólo contribuye a una web sostenible sino que es vital desde el punto de vista comercial de una web, afectando directamente el SEO, las conversiones y experiencia de usuario (branding)

Eliminación de código de terceros

Scripts de terceros, tales como scripts de analíticas e IA, tienden a ser pesados y muchas veces francamente innecesarios contribuyendo a sitios lentos vía una carga inicial más lenta junto con un mayor procesamiento y uso de CPU.

Una de las recomendaciones es dejar de usar google analytics. Son muchos kb (más de 100) innecesarios que perjudican tu sitio en performance, SEO y conversión. A su vez no es compatible con GDPR y (muy probablemente) lucra con los datos. Existen herramientas opensource para obtener métricas relevantes del uso de tu sitio o bien puedes implementar scripts y APIs propias.

Es parte de nuestro servicio entregar servicio de analíticas eficiente y sostenible

Uso de diseño minimalista y usable

La adopción de un diseño minimalista reduce el desorden y resalta los elementos esenciales, lo que resulta en tiempos de carga más rápidos y menores demandas del servidor. Un diseño limpio y simple requiere menos recursos para mostrarse, lo que hace que su sitio sea más eficiente energéticamente en general. El minimalismo consiste en mejorar la funcionalidad centrándose en el contenido y la navegación. Un sitio minimalista bien elaborado es visualmente atractivo, fácil de usar y transmite eficazmente su mensaje sin distracciones innecesarias.

Compresión y minificación

Uso de gzip y otros formatos de compresión para textos reduce el tamaño de los archivos a ser transferidos. A su vez, el proceso de minificación, es decir eliminar comentarios y espacios en blanco de los archivos de texto también contribuye a disminuir el tamaño. Ambas técnicas son recomendadas para lograr web sostenible.

Uso de green Hosting

Lo ideal es buscar servicios de alojamiento web ecológicos, que tengan programas de compensación de carbono aplicados a energía renovable y un uso eficiente de la energía. El alojamiento web tradicional a menudo depende de energía no renovable, lo que aumenta las emisiones de carbono. Por el contrario, el alojamiento ecológico utiliza energía renovable, lo que minimiza el impacto ambiental y permite que su sitio web contribuya positivamente en lugar de empeorar el problema.

En Injeniero usamos hosting con 100% de uso de energías renovables

Otras técnicas

Existen varias otras técnicas tales como:

Uso de CDNs, logrando viajes más cortos de la data desde origen (cliente) hasta destino (servidor)
Uso de CDNs de imágenes
Enfoque “Mobile first” que tiende a producir archivos de menor tamaño
Uso de dark-mode, con ahorro de batería en dispositivos con pantallas OLED
Generación del sitio desde el servidor (server side rendering) reduciendo consumo de energía y procesamiento del dispositvo del cliente

Glosario Términos

Internet: Es la red de redes. Instalaciones, hardware y software. Redes de cables subterráneos, antenas de celular, satélites. Una de sus principales aplicaciones es la Web. Su protocolo es IP, que identifica cada nodo de la red. Ejemplo 192.168.0.1 de un router de una casa, y utiliza sistema DNS que traduce números IP a nombres en lenguage natural.
Web: Colección de información accesible desde internet. Usa protocolo HTTP/HTTPS. Existe la web “tradicional” que es indexada (es decir encontrable vía buscadores) y la deep web, que no es indexada. Dentro de la deep web está la darkweb (actividades ilegales).
Sitio Web: Colección de páginas web bajo un mismo dominio.
Dominio: Asigna informaciones de propiedad del mismo y otras a una dirección IP usando el sistema DNS (Name Domain System). Ejemplo: 195.200.68.224 –> en.wikipedia.org.
Página Web: Documento HTML, con hyperlinks a otras páginas web. Un documento HTML incluye texto, imágenes, videos, audio, hojas de estilo (css) y código (javascript).
Ecommerce: Sitio web en dónde es posible comprar y/o vender bienes o servicios.
Conversión: Indica un objetivo comercial logrado por un usuario de un sitio web tales como una venta, un contacto, un compartir, etc.
Accesibilidad Web: Permite que usuarios con alguna discapacidad puedan navegar con la menor dificultad posible.
Usabilidad Web: Es fácil y rápido usar un sitio web.
Sostenibilidad: Cómo co-existir con nuestro planeta Tierra por un largo período de tiempo. Esto incluye la extracción, uso y reciclaje de recursos necesarios para nuestra sobrevivencia.
Sostenibilidad Web: que hacemos para reducir el impacto en los recursos del planeta cuando creamos, mantenemos y usamos la web.
Sostenibilidad Digital: Accesibilidad a la mayor cantidad y reusabilidad con el mínimo de restricciones técnicas, legales y sociales de recursos digitales – conocimiento y artefactos culturales en formato de texto , audio, imágenes, video y software.

Conclusión

Web sostenible está al alcance tanto en presupuesto como en disponibilidad para gerentes y empresarios que necesitan crear un sistema o sitio web. No sólo contribuye a bajar las emisiones de carbono sino que garantiza una serie de propiedades comerciales deseables, justificando su inversión.

Notas

Greenwashing es una forma marketing engañoso que hace creer al público que los productos y servicios de una organización son sostenibles. Ejemplo clásico es colocar un cierto tipo de logo que da impresión que es sostenible pero que no lo es realmente. ↩

Referencias

^ Intergovernmental Panel on Climate Change, “Climate Change 2023: Synthesis Report,” 3.1.2 Impacts and Related Risks. Contribution of Working Groups I, II and III to the Sixth Assessment Report of the Intergovernmental Panel on Climate Change, H. Lee and J. Romero eds. 2023. doi:10.59327/IPCC/AR6-9789291691647.
^ USGS.gov How can climate change affect natural disasters
^ Wikipedia Flood control in the Netherlands
^ Websitecarbon websitecarbon.com
^ W3C.org SUSTAINABLE WEB DESIGN COMMUNITY GROUP
^ W3C.org Sustainable Web Interest Group
^ Mozilla Foundation Introduction to web sustainability
^ Sustainable Web Design Calculating digital emissions