Diseño Digital Verde

 💻 Módulo optativo: Diseño Digital Verde

En este módulo optativo, aprenderás más sobre el valor del diseño digital con conciencia ecológica, y las estrategias específicas para hacer que los productos y servicios sean más verdes. Considera la posibilidad de publicar en los foros de actividades asociados y consulta los recursos adicionales al final del módulo.

Para completar este módulo optativo, deberás:

1️⃣ Revisar el contenido del elemento de aprendizaje "Módulo optativo - Diseño Digital Verde".

2️⃣ Ser aprobado el cuestionario del Módulo optativo - Diseño Digital Verde.

¡No olvides estar atento/a a los anuncios en tu Central de información y asistir al taller Semanal de esta semana! 😀

Opcional: Introducción de tu experto en la materiaPage

Módulo optativo - Diseño Digital VerdeSCORM package

Foro de la Actividad 1 Forum

Antes de comenzar a aprender herramientas y métodos que pueden hacer que el diseño digital sea más sostenible, comencemos con el mapeo de impacto. Quizás conozcas este término del mundo de la experiencia de usuario (UX). Aquí queremos que te concentres durante unos minutos en todas las formas físicas en las que impacta un producto digital.

Elige uno de los siguientes ejemplos: 

• Tienda online de comida y accesorios para mascotas. 
• Aplicación móvil para pedidos y entrega de comida de restaurantes. 
• Sitio web que te ayuda a elegir los mejores lugares y ofertas para las vacaciones. 
• Servicio de streaming de video. 

Escribe todas las formas en que impactan físicamente al mundo. 

• ¿Qué se necesita para que se creen? 
• ¿Qué impacto tienen mientras se utilizan? 
• ¿Qué ocurre después de que se utilizan, qué consecuencias generan? 
• ¿Qué otros procesos del mundo físico desencadenan? 

💭Reflexiona 💭

No te detengas solo en las conexiones visibles y directas. Intenta pensarlo en términos de cadena de suministro (por ejemplo, si hay un vehículo implicado en algunos de los impactos, también se necesita combustible y emisiones).

Publica tus ideas en el foro y considera la posibilidad de comentar las de los demás.

Foro de la Actividad 2 Forum

1. ¿Qué se necesita para que una página web aparezca en la pantalla de un dispositivo?
2. ¿Qué tipo de recursos se necesitan para lograrlo?
3. ¿Puedes determinar el número de esos recursos (en gramos, kilogramos, toneladas)?
4. ¿Cómo es una cadena de suministro para ofrecer contenido? 
5. ¿Qué dispositivos físicos se necesitan? 
6. ¿Cuánto tiempo crees que funcionan estos dispositivos/con qué frecuencia se sustituyen y cómo se eliminan?

Comparte tus ideas y cálculos en el foro. Considera la posibilidad de comentar las publicaciones de los demás.

Foro de la Actividad 3 Forum

Probar, comprimir y alternar:

Acabas de repasar una serie de herramientas para optimizar el peso, la velocidad y la eficiencia energética de un sitio web. Ahora es el momento de que pruebes tú mismo/a esas herramientas y métodos.

Elige un sitio web (puede ser el tuyo propio o el de una empresa con la que trabajes)

• ● Pruébalo con herramientas de auditoría como Beacon, recopila información sobre qué causa las mayores ineficiencias energéticas.
• ● Descarga los contenidos visuales (fotos, video) y comprímelos.
• ● Comprueba los elementos que podrían eliminarse o reducirse sin reducir la funcionalidad del sitio web.
• ● Calcula el ahorro que se podría conseguir con estas acciones y la optimización de contenidos.

Prepara un breve informe que muestre los posibles ahorros que podrían presentarse a un equipo, gerente o cliente, y súbelo al foro. ¡Considera la posibilidad de comentar el trabajo de los demás!

Foro de la Actividad 4 Forum

Indica todas las acciones "de la vida real" de los usuarios en las que tu diseño actual o posible diseño futuro (página web, app, servicio) podría tener un impacto.

• ¿Qué acciones con costos medioambientales podrías reducir?
• ¿Qué acciones o hábitos positivos puedes ayudar a crear o reforzar?

En el foro, publica estas acciones y haz una lluvia de ideas sobre cómo puedes hacerlas realidad. No seas demasiado crítico contigo mismo, ¡todas las ideas iniciales pueden conducir a alguna parte!

Foro de la Actividad 5 Forum

• Los mapas del trayecto del usuario pueden describir de forma didáctica todo el proceso por el que puede pasar un usuario hipotético con un producto o un servicio. Pueden ayudarte a ti, a tu equipo y a los clientes a comprender cómo piensan los usuarios y por qué procesos pasan. Por lo general, son lineales y no incluyen aspectos ambientales. Diseña un mapa del trayecto del usuario y publícalo en el foro. Considera la posibilidad de comentar también el trabajo de los demás.
• Define la persona objetivo de un trayecto del usuario. Haz que tu persona objetivo sea lo más real posible, habla con personas reales que podrían ser esos personajes o crea una encuesta. 
• Investiga las acciones, la percepción y los conocimientos medioambientales de tus usuarios. Pregúntales qué saben sobre los costos medioambientales de tu producto/servicio. ¿Son importantes para ellos a la hora de tomar decisiones? ¿Qué valores defienden? Si es posible, crea oportunidades para probar u observar sus acciones en la vida real.
• Define los puntos de contacto, todos los lugares y situaciones en los que un usuario puede interactuar con un producto. Puedes dividirlos en:
• Antes: todo lo que ocurre antes de la acción principal (como la investigación, la comparación, la reserva)
• Durante: el momento principal de las ventas u otra acción determinante (como la incorporación, la participación, el uso del producto/servicio, etc.)
• Después: lo que ocurre después (como comentarios, renovación)
• Ahora agrega a todo eso un factor verde. Revisa todo el proceso que has dibujado o descrito e intenta agregar comentarios sobre:
• Los problemas y costos medioambientales causados o afectados en momentos específicos del trayecto del usuario.
• Los impactos positivos ya existentes, influenciados por tus propias acciones o las de los usuarios.
• Las oportunidades e ideas sobre cómo se podrían diseñar momentos específicos para reforzar los hábitos verdes o fomentar opciones sostenibles.

Obligatorio: Cuestionario del Módulo optativo - Diseño Digital VerdeQuiz

Recursos adicionales opcionales: Página de diseño web sostenible

Introducción de tu experto en la materia

Un producto digital puede ser más ligero, en términos de emisiones de carbono, que su homólogo físico (pensemos en un libro). Sería fácil decir que los diseñadores digitales son menos responsables del medioambiente en comparación con los que se dedican al hardware y los productos físicos. Sin embargo, en manos de los diseñadores digitales hay un gran potencial. Internet (y las aplicaciones móviles aún más) están cambiando la forma en que usamos y consumimos no sólo los medios digitales, sino también cómo buscamos, compramos y compartimos los recursos físicos. Internet emite el 3,7 % de las emisiones de CO₂ al año, lo que equivale a la cantidad producida por la industria aérea. En algunos países, más del 70 % de las personas compran por Internet. Cada vez más personas lo hacen a través de las redes sociales. Estas tendencias afectan a nuestro planeta de muchas maneras. 

Los científicos nos animan a pensar en los costes energéticos, de agua y terrestres del uso de Internet, no sólo en términos de simples emisiones de CO₂. Nuestras vidas offline y online no están separadas, como tampoco lo está el diseño. Todos los diseños digitales tienen impactos físicos y en este curso experimentarás esto, y prototiparás cómo resolver los desafíos de diseño en la intersección de:

El consumo de energía en el ámbito digital,

Gestión responsable de los recursos utilizados para diseñar y ofrecer productos digitales,

Creación de hábitos de usuario más responsables mediante un diseño mejor y más verde.

Esperamos que no sólo adquieras nuevas habilidades que puedas utilizar en tu práctica diaria de creación de sitios web, aplicaciones y otros productos digitales. También esperamos que te comprometas como diseñador en el proceso de mejora de tu entorno de trabajo, así como en la preparación de tu carrera para el futuro.

Te damos la bienvenida al módulo optativo Diseño Digital Verde.

El concepto de diseño digital verde es una forma de reconocer el impacto medioambiental del diseño digital y de minimizarlo mediante prácticas de diseño sostenible. El diseño digital verde consiste en considerar todo el ciclo de vida de los productos y servicios digitales, y tomar decisiones de diseño que prioricen la sostenibilidad medioambiental.

• Introducción
• Impacto del diseño digital en el clima
• Emisiones digitales y costes medioambientales de un servicio digital
• Optimización del diseño digital para la reducción de emisiones
• Recorrido del usuario para un servicio digital

Lección 1 de 5 Introducción
Por IA Studio

A lo largo de este módulo, analizaremos conceptos de diseño verde y cómo hacer que tu trabajo como diseñador sea más sostenible. Aprenderás a comprobar si tus diseños actuales son sostenibles y a mejorarlos en aspectos como la eficiencia energética, la huella de carbono y el impacto ambiental. También debatiremos las formas en que los diseñadores pueden promover y comunicar la importancia del diseño digital verde a las partes interesadas.

Tras este módulo serás capaz de:

• Analizar la sostenibilidad de los servicios y productos digitales.
• Mejorar la eficiencia, la accesibilidad y la sostenibilidad en el diseño web.
• Fomentar el interés por el diseño responsable y sostenible.

¿Qué impacto medioambiental pueden tener los productos digitales como sitios web, aplicaciones o servicios de streaming?

Huella de carbono

Huella terrestre

Huella hídrica

Los productos digitales, como sitios web, aplicaciones y servicios de streaming, tienen un impacto ambiental significativo en varias áreas:

- Huella de carbono: La infraestructura digital, incluidos los centros de datos y la transmisión de datos, consume grandes cantidades de energía, lo que contribuye a las emisiones de gases de efecto invernadero.

- Huella terrestre: La fabricación de dispositivos electrónicos requiere la extracción de materiales y la construcción de infraestructuras, lo que afecta el uso del suelo y los ecosistemas.

- Huella hídrica: La producción de hardware y el enfriamiento de servidores en centros de datos requieren grandes volúmenes de agua, lo que puede generar un impacto en los recursos hídricos.

Lección 2 de 5 - Impacto del diseño digital en el clima

Por IA Studio

¿Qué es lo primero que se te ocurre cuando piensas en la lucha contra el cambio climático?

Icono de reciclaje con tres flechas verdes en forma de triángulo

¿Reciclaje?

Icono con bicicleta sobre el globo terráqueo

¿Sustituir el coche por la bicicleta o el transporte público para los desplazamientos diarios?

Icono que muestra un panel solar

¿Poner paneles solares en el tejado?

«Todos los diseños tienen implicaciones físicas, desde la cantidad de energía que se necesita para alimentar una experiencia hasta las decisiones que los usuarios toman en el mundo real a partir de la información que presentamos y las historias que contamos».

Jon Friedman y Rachel Romano / Blog de Diseño de Microsoft

¿Cómo influyen los diseños digitales en el clima?

Un producto digital puede ser más ligero en cuanto a emisiones de carbono que su homólogo físico (pensemos en un libro y un libro electrónico), pero su impacto ambiental radica en el número de usuarios que pueden acceder a él. Para que cualquier servicio digital funcione es necesaria una infraestructura física (infraestructura de red, dispositivos necesarios para crearlo y leerlo, software, aplicaciones, etc.)

Batería recargable

Recursos y energía empleados en todos los dispositivos y la red para ofrecer una experiencia en línea

En el Módulo 2 has aprendido a medir la huella de carbono digital de un sitio web y qué principios emplear para un diseño sostenible. Ahora profundizaremos en cómo construir diseños digitales más ecológicos con soluciones modernas.

Diseño digital

Costes medioambientales de las acciones y decisiones influidas por el diseño digital

En este módulo conectaremos lo digital con lo físico a todos los niveles. Explorarás casos del diseño de productos, el comercio electrónico, el transporte y muchos otros sectores que tienen un gran impacto medioambiental.

Las experiencias digitales (como la compra de ropa por Internet) pueden ocasionar costes medioambientales adicionales. ¿Por qué?

Compramos más

Devolvemos productos con más frecuencia

Las compras en línea suelen requerir más embalaje

Se emplea combustible adicional para la entrega

Las compras en línea pueden generar costes medioambientales adicionales por varias razones:

- Compramos más: La facilidad de acceso y las promociones constantes pueden incentivar el consumo excesivo.

- Devolvemos productos con más frecuencia: Las devoluciones implican transporte adicional, lo que aumenta las emisiones de carbono.

- Las compras en línea suelen requerir más embalaje: Para proteger los productos durante el envío, se utilizan materiales adicionales, como plástico y cartón.

- Se emplea combustible adicional para la entrega: La logística de distribución requiere transporte, lo que contribuye a la huella de carbono.

Todas las respuestas son correctas. Todas las formas de compra en línea pueden generar fácilmente mayores costes medioambientales.

Actividad

Antes de comenzar a aprender herramientas y métodos que pueden hacer que el diseño digital sea más sostenible, comencemos con el mapeo de impacto. Es posible que conozcas este término del mundo de la Experiencia de Usuario (UX). A continuación, nos gustaría que te centraras durante unos minutos en todas las formas físicas de impacto de un producto digital.

Escoge uno de los siguientes ejemplos:

• Tienda online de comida y accesorios para mascotas.
• Aplicación móvil para pedidos y entrega de comida de restaurantes.
• Sitio web que te ayuda a escoger los mejores lugares y ofertas para las vacaciones.
• Servicio de streaming de vídeo.

Escribe todas las formas en que repercuten físicamente en el mundo. Reflexiona sobre:

• ¿Qué se necesita para que se creen?

• ¿Qué impacto tienen mientras se emplean?

• ¿Qué sucede después de su uso, qué consecuencias generan?

• ¿Qué otros procesos del mundo físico desencadenan?

No te detengas únicamente en las conexiones visibles y directas. Trata de pensar en esto en términos de cadena de suministro (p. ej., si hay un coche implicado en algunos impactos, también hay una conexión con el combustible y las emisiones).

Lección 3 de 5 - Emisiones digitales y costes medioambientales de un servicio digital

Por IA Studio

Incluso las compañías que fabrican calculadoras digitales de carbono afirman que resulta complicado medir la huella de carbono digital. Pero eso puede ser bueno: aprendemos continuamente a medir, disminuir o reducir las emisiones a medida que comprendemos cómo funcionan las nuevas tecnologías digitales.

Dónde se produce el consumo de energía:

Fuente: ¿Por qué las estimaciones del consumo de energía de Internet varían de forma tan drástica?(opens in a new tab) Tom Greenwood, Wholegraindigital

Infraestructura

No se muestran aquí los costes energéticos de la construcción de los centros de datos, la fabricación de los servidores, la construcción de la infraestructura de redes por cable e inalámbricas y la fabricación de dispositivos para el usuario final.

Hogar/empresa

Consumo de energía de los usuarios finales.

Qué se mide con mayor frecuencia:

Solo redes principales y de acceso

¿Qué son los «alcances» en la notificación de las emisiones de dióxido de carbono?

Cuando analizamos la huella de carbono de un proyecto (y no solamente digital) es necesario tener en cuenta varios límites. En la mayoría de los sectores se denominan alcances 1, 2 y 3. Los «alcances» son la herramienta de contabilidad internacional más empleada en el Protocolo de Gases de Efecto Invernadero (GEI). Se emplean a efectos informativos y de compensación.

Alcance 1

–

Cubre las emisiones directas de fuentes propias o controladas, como las emisiones producidas por las instalaciones y los vehículos que posee la empresa:

• Combustión de combustible
• Vehículos de la empresa
• Emisiones fugitivas (fugas y otras liberaciones irregulares de gases o vapores)

Alcance 2

–

Cubre las emisiones indirectas resultantes de la generación de electricidad adquirida, vapor, calefacción y refrigeración consumidos por la empresa informante.

Alcance 3

–

Incluye todas las demás emisiones indirectas que tienen lugar en la cadena de valor de una empresa:

• Bienes y servicios adquiridos
• Viajes de negocios        
• Viajes diarios de los empleados al lugar de trabajo
• Eliminación de residuos
• Uso de los productos vendidos    
• Tratamiento de los productos vendidos al final de su vida útil
• Transporte y distribución (ascendente y descendente)    
• Inversiones    
• Activos arrendados y franquicias

Las emisiones de Alcance 3 suelen considerarse las más complejas de medir y, en la actualidad, las empresas no están obligadas a incluir todas las emisiones de Alcance 3 en sus informes. En el sector digital, a menudo a las empresas les cuesta establecer la atribución correcta de las emisiones asociadas a los productos digitales que venden a sus usuarios. Muchas empresas emplean distintas metodologías para hacerlo. La agencia digital Wholegrain Digital ofrece algunas explicaciones y posibles soluciones a este desafío.

¿Cómo medir la huella de carbono en el ámbito digital?

Ya conoces la Calculadora de carbono del sitio web(opens in a new tab). Ahora hablaremos de otra herramienta llamada Ecograder(opens in a new tab) para entender cómo se mide la huella de carbono de un sitio web. Ecograder (y otras herramientas similares) emplea la herramienta CO2.js(opens in a new tab) y la metodología de The Green Web Foundation, así como las métricas de páginas de código abierto de Google Lighthouse para identificar los cambios que mejorarán la huella de carbono de su sitio web.

Fuente: Ecograder, How it works

Uso de dispositivos de consumo

Se calcula que los usuarios finales que interactúan con un producto o servicio representan el 52 % del consumo energético del sistema. Se supone que los visitantes recurrentes son el 25 %, cargando el 2 % de los datos.

Uso de la red

Se calcula que los datos transferidos mediante la red representan el 14 % del consumo energético del sistema.

Uso del centro de datos

Se calcula que la energía requerida para alojar y servir datos representa un 15 % del consumo energético del sistema.

Las calculadoras de carbono de los sitios web parten de la base de que la red de telecomunicaciones y el usuario final consumen la electricidad estándar de la red. Se utiliza la base de datos de la Green Web Foundation (TGWF) para comprobar si el sitio web está alojado en un centro de datos que emplea fuentes de energía renovables o compensa sus emisiones derivadas del alojamiento.

Producción de hardware

La energía incorporada que se emplea en la creación de chips integrados, el uso de centros de datos, el uso de redes y el uso de dispositivos de comunicación de consumo representa alrededor del 19 % del consumo energético del sistema.

Tráfico web

A mayor número de páginas vistas, más emisiones. Ecograder calcula por defecto 1000 páginas vistas, pero si conoce la media mensual de páginas vistas de la URL que está probando, puede ajustarla.

Intensidad promedio y marginal de la electricidad

La intensidad de carbono mide el grado de limpieza de nuestra electricidad. Concretamente, cuántos gramos de dióxido de carbono se liberan para producir un kilovatio hora de electricidad.

Para la energía de red, la cifra por defecto es la intensidad media mundial de carbono de la electricidad (442 g/kWh), que proviene del conjunto de datos de intensidad de CO2 de la categoría «Mundo» del Explorador de datos de Ember. 

La intensidad promedio de las emisiones emplea la combinación de combustibles de toda la red eléctrica y puede servir para obtener estimaciones de la huella de carbono de un producto o servicio digital. 

La intensidad marginal examina el origen de la electricidad adicional empleada para alimentar un aparato, producto o servicio. En la mayoría de los casos procede de una fuente de energía fósil, por lo que las cifras de intensidad marginal suelen ser superiores a las de intensidad promedio. 

Herramientas (no solo) para diseñadores

Consulta estos sitios web que cuentan con herramientas para medir la huella de carbono digital de un sitio web:

• CO2.js(opens in a new tab), de The Green Web Foundation, es una biblioteca JavaScript (y una metodología) que permite a los desarrolladores calcular las emisiones relacionadas con el uso de sus aplicaciones, sitios web y software.
• Las herramientas de Google WebDev(opens in a new tab) te facilitarán información sobre el rendimiento del sitio web.
• Google Lighthouse(opens in a new tab) es una biblioteca de código abierto que permite analizar aplicaciones y páginas web, y reúne modernas métricas de rendimiento e información acerca de las mejores prácticas para desarrolladores.
• Una calculadora de carbono de sitios web(opens in a new tab) es una forma fácil de comprobar la huella de carbono digital de cualquier sitio web.
• Digital Beacon(opens in a new tab) hace la misma función, pero como extensión del navegador, ofrece datos más detallados y permite ajustes como el % de visitantes que regresan.
• Tanto Microsoft(opens in a new tab) como Google(opens in a new tab) ofrecen herramientas y paneles avanzados para medir la huella de carbono de los productos digitales albergados en sus servidores.
• ¿Mis terceros son ecológicos?(opens in a new tab) Este sitio web puede comprobar si los recursos de terceros empleados por un sitio web están alojados en un alojamiento ecológico y estimar sus emisiones de CO2e.

El tamaño promedio de una página web se sitúa ahora en torno a los 2,2 MB.

Si Internet se considerara un país, sería el séptimo más contaminante del mundo.

Costes medioambientales invisibles

La electricidad empleada para hacer funcionar Internet y sus servicios no solamente deja una huella de carbono. También tiene huellas de agua y tierra. Se requiere agua para enfriar la infraestructura del sistema. A la hora de crear infraestructuras, la tierra se destina a la extracción de recursos o a la construcción de edificios.

Una investigación llevada a cabo por el MIT, la Universidad de Purdue y la Universidad de Yale calculó estos tres costes para las aplicaciones de streaming y videoconferencia más populares(opens in a new tab) que empleamos para trabajar, estudiar y divertirnos.

Foto que muestra un marco de reconocimiento de imagen sobre dos plátanos, uno en el escritorio y otro en la pantalla del ordenador portátil.

Ceci n'est pas une banane por Max Gruber, licencia CC BY.

Uso de modelos de IA en productos de consumo

La creciente adopción de la IA, especialmente la inteligencia artificial generativa, plantea cuestiones y retos muy interesantes. Por un lado, el entrenamiento de un único modelo de IA puede emitir tanto carbono como cinco coches a lo largo de su vida útil(opens in a new tab). Por otra parte, según indican las primeras investigaciones del MIT, el trabajo mejorado con IA, como la escritura y la ilustración, produce menos emisiones que el trabajo digital efectuado únicamente por humanos(opens in a new tab).

Ten en cuenta cuándo y por qué decides emplear modelos de IA para el diseño o como parte de un servicio digital. Las herramientas de IA generativa, como los chats y los asistentes de IA, pueden contribuir a una redacción, un diseño y unas pruebas más inclusivos y accesibles(opens in a new tab). No obstante, todavía no se han determinado sus costes medioambientales en comparación con otros productos digitales (como los motores de búsqueda). 

Los costes de las criptomonedas

Bitcoin y Ethereum —las dos mayores cadenas de bloques del mundo— requieren la misma cantidad de electricidad que todo el país de Austria.(opens in a new tab)

Dos figuras de juguete de trabajadores sobre una moneda de bitcoin encima de la placa base de un ordenador

Marco Verch@Flickr, CC BY 2.0

El consumo de energía y las emisiones de las criptomonedas son altos fundamentalmente debido a cómo se «minan» y cuánta potencia de procesamiento se necesita para que funcionen. 

Con el auge de la popularidad de los NFT (tokens no fungibles), la criptotecnología está cada vez más relacionada con el diseño, algo que los diseñadores conscientes deberían tener en cuenta.

Como diseñador, ¿cómo podrías aprovechar estos conocimientos y datos para hacer productos y servicios más sostenibles y verdes?

¿Optimizarías tu trabajo para consumir menos energía, o tratarías de influir en tus usuarios/consumidores para que cambien su comportamiento?

Lección 4 de 5 - Optimización del diseño digital para la reducción de emisiones

Por IA Studio

Optimización del diseño digital para la reducción de emisiones

Gracias al Manifiesto de la Web Sostenible(opens in a new tab), ya conoces los siguientes 6 principios para construir un Internet sostenible. Los productos y servicios digitales deben ser:

1 LIMPIOS: Los servicios que brindamos y los servicios que utilizamos estarán alimentados por energías renovables.

2 EFICIENTES: Los productos y servicios que ofrecemos utilizarán la menor cantidad de energía y recursos materiales posible.

3 ABIERTOS: Los productos y servicios que brindamos serán accesibles, permitirán el intercambio abierto de información y permitirán a los usuarios controlar sus datos.

4 HONESTOS: Los productos y servicios que ofrecemos no engañarán ni explotarán a sus usuarios en su diseño o contenido.

5 REGENERADORES: Los productos y servicios que brindamos respaldarán una economía que nutra a las personas y al planeta.

6 RESILIENTES: Los productos y servicios que ofrecemos funcionarán en los momentos y lugares en los que las personas más los necesiten.

Diseño de sitios web eficientes - mejores prácticas

Utiliza un alojamiento verde

Si escoges servidores que empleen fuentes de energía renovables, podrás reducir las emisiones de carbono de tu sitio web en aproximadamente un 10%.

Eliminar y reducir

Elimina todo aquello que no sea esencial, reduciendo así el peso de la página y las visitas innecesarias. 

Revisa el contenido multimedia

Las imágenes, los vídeos y las animaciones suelen contribuir a incrementar el tamaño del archivo de su página sin aportar mucho valor añadido (como los controles deslizantes).

Reduce todo

Minimiza las soluciones personalizadas, desde fuentes hasta scripts. Da a los usuarios la opción de cuándo usar elementos multimedia. Diseña pensando en la accesibilidad y el uso móvil.

Almacena cosas en caché

Implementa el almacenamiento en caché de la base de datos y el navegador. Almacenar un duplicado del contenido original de un sitio web (un recurso estático) en el dispositivo del usuario, permite reducir el consumo de energía del servidor y mejorar los tiempos de carga de las páginas.

Paso 1: Escoge un alojamiento verde

Si escoges servidores que empleen fuentes de energía renovables, podrás reducir las emisiones de carbono de tu sitio web en aproximadamente un 10%.

La Green Web Foundation mantiene una base de datos(opens in a new tab) de empresas de alojamiento que funcionan con fuentes de energía renovables o compensan sus emisiones de manera certificada. Esta base de datos ayuda a las empresas a realizar auditorías de sus servicios.

Paso 2: Realiza una auditoría de tu sitio web antes de introducir cambios

Mide qué optimizar y recopila los datos. 

¿Cuál es el nivel actual de emisiones de carbono de tu sitio web? ¿Qué elementos lo ralentizan o consumen la mayor parte de los datos y la energía?

Auditoría energética automatizada Beacon.

La auditoría automatizada de la calculadora de carbono del sitio web de Beacon(opens in a new tab) señala elementos que pueden mejorarse.

Herramientas para desarrolladores Google Lighthouse.

La herramienta para desarrolladores Google Lighthouse te facilitará los datos precisos y detallados que necesitas para optimizar los diferentes elementos y luego compararlos una vez que hayas implementado los cambios.

Paso 3: Decide qué optimizar - contenido

Haz clic en cada pestaña para obtener más información:

Contenido visual

Colores

Fuente

Almacenamiento

¿Qué puedes eliminar?

¿Cómo puedes escoger el medio de menor impacto para el mensaje?

¿Cómo se optimiza el tamaño de los archivos?

Paso 4: Decide qué optimizar - recorrido del usuario

Haz clic en cada pestaña para obtener más información:

SEO

Redacción de textos publicitarios

Experiencia del usuario

Entrega

¿Cómo puedes ayudar a las personas a encontrar información realizando menos búsquedas?

Paso 5: Implementar cambios - reducir los elementos innecesarios

Aquello que no se considera esencial puede variar según el sitio web. Hay muchos elementos predeterminados de un sitio web que no se emplean en absoluto (por ejemplo, JavaScript de terceros, incrustaciones) y otros que únicamente están ahí por su estética, no por su función (controles deslizantes) o la comodidad de diseñadores y desarrolladores (fuentes web personalizadas, etc.).

Paso 6: Implementar cambios - escoger fuentes

Las fuentes web incrustadas suelen implementarse con un código JavaScript o CSS que usted coloca en el código de su sitio web. Este script envía peticiones a un tercero, a menudo no solamente para el archivo de fuentes, sino también para otras cosas, como comprobar la licencia de la fuente. Estas conexiones y transferencias de datos adicionales no son necesarias cuando aloja el archivo de fuente usted mismo.

Más información: Web fonts: when you need them, when you don’t(opens in a new tab), The performance cost of custom web fonts, and how to solve it(opens in a new tab)

Paso 7: Implementar cambios - visuales

Optimizar y comprimir el contenido visual. Los archivos de imagen pueden representar fácilmente la mayor parte del almacenamiento de archivos en la mayoría de las interfaces web. Optimizar el uso de los medios puede ser una medida muy sencilla y eficaz para reducir el consumo de energía de su sitio web.

Comprimir y dimensionar las imágenes lo más pequeñas posible. Experimente con contenido visual que se parezca, pero que emplee alternativas como los estilos SVG y CSS.

Más información: WebDev: optimize your images & Image file type and format guide(opens in a new tab)

Herramientas: TinyPNG(opens in a new tab) & Squoosh(opens in a new tab)

Squoosh app optimizes images.

Paso 8: Implementar cambios - vídeo

El vídeo y las animaciones se emplean cada vez más en el diseño web, y no es de extrañar que sean los elementos de tu sitio que consuman la mayor cantidad de energía. Además, la reproducción automática aumenta el uso de datos incluso si no se ve el vídeo.

Considera usar formatos más eficientes como .mp4 en lugar de .mov o .avi. Comprime los archivos y escoge plataformas de alojamiento que permitan cambiar la calidad de reproducción de vídeo.

Más información: Optimizing Video for the Web(opens in a new tab)

Herramientas: Handbrake(opens in a new tab)

Herramienta Handbrake para la opimización de vídeo.

Paso 9: Implementar cambios - animación

Las animaciones pueden consumir mucha energía y exigir una mayor capacidad de procesamiento por parte del usuario. El uso excesivo de movimiento para hacer el contenido más interesante también puede hacerlo menos accesible y distraer a los usuarios.

Considera distintos formatos para lograr efectos animados, por ejemplo, archivos SVG o Lottie animados. 

Más información: The ultimate guide to proper use of animation in UX(opens in a new tab), Optimiza tus animaciones y reduce considerablemente su tamaño(opens in a new tab).

Archivos lottie: la animación no optimizada pesa 118 kB como archivo .mp4, 591 kB como archivo JSON personalizado y casi 5 MB como archivo .gif.

Paso 10: Implementar cambios - colores y temas

Las pantallas OLED iluminan cada píxel de forma individual, por lo que se necesita menos energía para iluminar los colores más oscuros en este tipo de pantallas. 

Los modos oscuros son cada vez más populares en los sitios web y en las aplicaciones, y pueden ahorrar algo de energía, pero como diseñador, también deberías tener en cuenta la accesibilidad a la hora de escoger la combinación de colores de tu sitio web. Echa un vistazo a la solución flexible que se incluye a continuación (imagen de los controles de accesibilidad del sitio web Sustainable Web Design).

Más información: The dark side of green web design(opens in a new tab), Dark UI themes are new and cool — but are they accessible?(opens in a new tab)

Ajustes de accesibilidad y color en la página de Sustainable Web Design.

Paso 11: Implementar cambios - almacenamiento y caché

Ofrecer contenidos dinámicos suele significar que todo el sitio web se reconstruye cada vez que un usuario lo visita. Esto requiere mucho procesamiento y energía del servidor.

Si estád usando un CMS (como Wordpress), asegúrate de activar el almacenamiento en caché o implementar un almacenamiento en caché de servidor efectivo mediante plugins o a través de la configuración ofrecida por el host de su sitio web.

Más información: What Is Cache? Learn This Common and Complex Technology(opens in a new tab), GreenFrame: Calculating The Impact of Cache on MediaWiki Carbon Emissions(opens in a new tab).