Diseño Web Sostenible: Una apuesta por y para el planeta

Esto es una guía sobre “diseño web sostenible” y cómo empezar a aplicarlo inmediatamente en nuestros proyectos digitales hechos con WordPress para contribuir con la emergencia climática.

Muchas personas posiblemente no sabían o no se habían enterado que internet hace que se libere dióxido de carbono al aire cada vez que lo utilizamos.

El dispositivo desde el que está visitando Internet, utiliza electricidad que puede provenir del carbón o de fuentes de energía no renovables.

Además, el sitio web que visita requiere electricidad para ejecutar sus servidores e incluso su enrutador y los puntos de acceso del enrutador.

Ahora imagine que más de la mitad de la población de la tierra usa Internet a diario y que hay más de mil millones de sitios web en línea.

Adicional, nuestras velocidades de Internet se vuelven cada vez más rápidas, nuestros dispositivos mejoran y comenzamos a crear sitios web que exigen más potencia.

Cuando nuestros dispositivos mejoran y nuestra velocidad de Internet se vuelve más rápida, creamos sitios web más pesados que al final, causan aún más contaminación.

Este es un problema enorme y solo está empeorando.

El mundo digital está comenzando a ser dañino para el planeta. Ya estamos acercándonos muy rápidamente a un desastre global y no podemos seguir con este egoísta modelo energético de consumo descomunal de recursos.

Es por ello que aparece una posible solución: El Diseño Web Sostenible

Una apuesta por y para el planeta

Cuando diseñamos una página web lo que buscamos es “rendimiento” es decir, que el sitio web le guste a Google, que tenga una velocidad de carga superior a la velocidad de la luz, que se adapte a todos los dispositivos, que tenga un diseño hermoso (pixel perfect), que integre una experiencia de usuario magnífica, etc.

Aunque el “rendimiento” es sinónimo del diseño web sostenible, falta añadirle la simplicidad, eficiencia, accesibilidad y el complemento principal: “dar prioridad a la salud del planeta reduciendo la huella de carbono digital”.

“El diseño web sostenible consiste en crear productos digitales cuyo objetivo principal es reducir las emisiones de carbono y el consumo de energía”
Tom Greenwood

Desde nuestro quehacer diario, como creadores de la web, podemos sumar a esa ecuación, implementando las acciones que les contaré a continuación en esta guía, sobre el diseño web sostenible aplicado a WordPress.

Sostenibilidad aplicada a WordPress

WordPress es el sistema de gestión de contenido más popular del mundo y tiene muchas cualidades excelentes, pero no es muy eficiente en términos de energía.

Esto se debe a que es un CMS dinámico y al enorme ecosistema de temas y plugins que son excelentes para brindar funcionalidad, pero deficientes para proporcionar rendimiento y por tanto, sostenibilidad.

De hecho, se calcula que un solo sitio web promedio produce 1,76 gramos de CO2. Con 10.000 visitantes al mes, ese mismo sitio web supone un incremento de 211 kg de CO2 al año.

Ahora imaginemos esa cantidad multiplicada por los más de 75 millones de sitios web que utilizan WordPress actualmente (más del 40% de todo internet). Eso es una cifra gigantesca.

Es por ello que en esta guía, hemos resumido las acciones principales para lograr que todos los WordPresseros del mundo, tomen decisiones, ejecuten acciones y entiendan que cada byte cuenta.

Medir el impacto digital
Reducir el consumo de energía
Depurar el desperdicio digital
Mitigar las emisiones de carbono
Crear eficiencia y accesibilidad
Manifiesto UX & Web Sostenible

1. Medir el impacto digital

La tecnología digital puede tener el potencial de ayudarnos a resolver algunos problemas pero también, tiene el potencial de crear tantos problemas nuevos si no tenemos cuidado.

Cuando tenemos sitios web ya creados, podemos usar herramientas para realizar auditorías básicas sostenibles y evidenciar por ejemplo, cuánto CO2 desprenden las imágenes que tiene nuestro sitio web, las tipografías, los documentos adjuntos, etc.

“Si no puedes medirlo, no puedes administrarlo o cambiarlo”

Existen muchas herramientas en la nube y extensiones para navegador que pueden usar, con el fin de hacer un escaneo básico de cada uno de sus sitio web para determinar en qué está fallando, qué es lo que más energía consume y sobretodo, alertar sobre qué decisiones importantes se deben tomar para hacer más con menos.

Algunas de estas herramientas gratuitas son:

Y una vez que tengamos esa huella de carbono digital clara, debemos comenzar a reducir el consumo de energía.

2. Reducir el consumo de energía

Para que internet funcione, se requiere de unos centros de datos, llenos de servidores encendidos las 24 horas del día y varios aires acondicionados funcionando los 365 días del año para mantener refrigerados dichos servidores.

Todo eso necesita y consume muchísima energía.

“Aunque no siempre tenemos el control sobre la procedencia de la electricidad de nuestros sitios web, sí podemos elegir qué proveedor de alojamiento utilizar”

Los diseñadores web, desarrolladores de soluciones y dueños de negocios digitales, debemos comprender qué es el alojamiento web impulsado por energía renovable y cómo el migrarnos para un hosting verde, ecohost, greenhost o servidor amigable con el planeta, es la forma más rápida y eficaz de minimizar el impacto medioambiental de nuestro trabajo diario.

El proceso de consumo de energía Web

La energía usada por el internet (y por lo tanto, un sitio web) apenas llega al 48% de lo utilizado en un centro de datos, un 14% es usado en la red de telecomunicación y un 38% es usado en el dispositivo del usuario.

Si solamente cambiamos de un servidor que utiliza energía fósil para un servidor que utiliza energías renovables, habremos reducido en un 48% las emisiones de carbono de nuestro sitio web. ¡BINGO!

Entonces, la forma más sencilla de hacer que nuestros proyectos sean limpios, desde el punto de vista medioambiental, es eligiendo un proveedor de alojamiento que se haya comprometido públicamente con utilizar energía 100% renovable o que por lo menos, compre créditos de energía renovable (REC) para compensar las emisiones de CO2.

“Tenemos que crear un mundo en el que la sostenibilidad sea la norma, no la excepción”

Directorio de proveedores eco-hosting

Mediante el diseño web sostenible y el uso de energía renovable en el hosting, podemos reducir las emisiones actuales de CO2. Probablemente no podamos eliminarlas por completo, pero podemos reducir el número significativamente.

En el buscador de la Green Web Foundation se puede verificar si su proveedor de hosting actual es un servidor verde. Y a su vez, consultar el directorio de todos los proveedores de Hosting Verde del mundo, para que puedan contratarlos y migrar todo su contenido web.

3. Depurar el desperdicio digital

Diseñar un sitio web es como construir una casa:

Se hacen los planos (trazar objetivos y estrategia web)
Se ponen los cimientos y la loza (arquitectura de la información)
Se tiran los muros y se pone el techo (configuración y desarrollo web)
Se estucan los muros y se pintan las paredes (diseño y UX)
Se sacan escombros y se limpia toda la basura (depuración y limpieza digital)
Se amuebla y se invita a la visita. (montaje de contenido y recibir tráfico)

El depurar y limpiar toda la basura digital es vital para optimizar y reducir la huella de carbono de nuestros proyectos digitales.

Para muchos, el diseño web sostenible se traduce en simplificar procesos, simplificar código, simplificar acciones, simplificar decisiones, simplificar diseño, simplificar contenido y reducir así, lo más que se pueda, las emisiones de CO2

“Debemos justificar la existencia de cada elemento y minimizar. Cambiar el ¿Sería bueno añadir esto? por ¿Podemos vivir sin esto?»

Aparece entonces el minimalismo digital como protagonista, mientras se pone más atención al desperdicio, se adquiere el hábito de eliminar algo cada vez que se agregue algo y evaluar cada detalle de una solución de diseño.

Puede que esto parezca un culto a lo mínimo, pero cuando nos atrevemos a adoptar un enfoque de «menos es más», las recompensas van mucho más allá de la reducción de la huella medioambiental.

4. Mitigar las emisiones de carbono

A menor transferencia de datos mayor eficiencia energética, un factor clave para reducir las emisiones de carbono de los productos. Para reducir dicha transferencia, se hace vital implementar las acciones que “Tom Greenwood” explica en su libro Sustainable Web Design

Diseño y contenido

Cuando hablamos de la eficiencia energética de los sitios web, es fácil asumir que se trata de un tema puramente técnico. Sin embargo, la eficiencia se puede mejorar incluso antes de que creemos un sitio web.

SEO: Al optimizar un sitio web para la clasificación de los motores de búsqueda, ayudamos a las personas a encontrar la información que buscan de forma rápida y sencilla. Cuando el SEO tiene éxito, las personas pasan menos tiempo navegando por la web en busca de información

Textos y escritura: la redacción de textos tiene un impacto en la eficiencia del sitio web porque afecta la cantidad de tiempo que las personas pasan navegando por los sitios web. Lo que no queremos es que las personas pierdan el tiempo vagando por contenido que les ofrece poco o ningún valor.

Simplificar la experiencia de usuario UX

Uno de los elementos centrales de una buena experiencia de usuario es reducir la fricción en los viajes de los usuarios. Queremos que las personas puedan encontrar las cosas que desean y realizar las acciones que necesitan realizar de la manera más ágil posible.

Reducir las cargas innecesarias de las páginas, ya que cuantos más datos cargue el usuario, más electricidad se necesitará el servidor para entregar esa info

Minimizar recorridos largos de los usuarios, pues cuanto más tiempo permanezca un usuario en un sitio web, más electricidad consume su dispositivo.

Eliminar los recorridos del usuario en Yoyo, es decir, cuando un usuario entra en una página y vuelve a salir de ella

Racionalizar el contenido, ya que el desperdicio de electricidad en los sitios web es debido al almacenamiento de datos que ya no se necesitan

Evitar la tasa de rebote, cuando la gente llega a un sitio web desde una fuente externa y se va sin visitar ninguna otra página

Imágenes optimizadas para web

Tamaño del archivo: Compresión de imágenes. Shortpixel o TinyPNG minimizan el tamaño de las imágenes sin degradar su calidad.

Formato de imagen: WEBP es el formato más eficiente para las fotografías. AVIF, es un nuevo formato compatible con los navegadores, y puede ser menos de la mitad del tamaño de WEBP

WEBP o AVIF son un 30% más pequeñas que JPEG.

PNG o GIF suelen ser los formatos más adecuados para imágenes sencillas que sólo utilizan unos pocos colores en bloque, como los iconos y los logotipos.

El MP4, en el caso del vídeo, es más eficiente que el GIF animado, y ofrece una mejor accesibilidad en las pistas de descripción de audio y los subtítulos.

Fotografías borrosas: Desenfocar las imágenes reduce la cantidad de variación entre cada píxel y mejora el peso de cada una (agregar blur a los fondos)

Imágenes vectoriales: Uso de CSS y SVG. ImageOptim, puede reducir el tamaño de los archivos vectoriales hasta en un 85% sin que nadie lo note.

El color y la energía de la pantalla

Menos píxeles azules: los píxeles azules consumen un 25% más de energía que los verdes o los rojos. Esto no sólo es bueno para el medio ambiente, sino que también ayuda a maximizar la duración de la batería de los dispositivos portátiles, como teléfonos, tabletas y portátiles.

Imágenes Monocromáticas: las imágenes en escala de grises contienen mucho negro, que es el color que menos energía consume.

Modo oscuro: Activar el modo oscuro en su web para consumir la información con menos gasto de luz, sobretodo en las pantallas OLED que iluminan cada píxel individualmente. Además por temas de accesibilidad es buena idea.

Reducir los efectos de movimiento

Video en la Web: Evita los diseños que impliquen la reproducción automática de vídeos, como los fondos de vídeo.

Animaciones GIF: Los memes son terriblemente ineficientes porque guardan cada fotograma como una imagen GIF separada y luego se fusionan.

Glaseado y Efectos: Evitar las Interacciones animadas, efectos de carga, efectos de desplazamiento, carruseles, mapas, slides, etc. Además que estos elementos en móvil no brindan una buena experiencia de usuario.

Tipografía Web eficiente

Como diseñadores, debemos pensar detenidamente en los tipos de letra que elegimos y en las implicaciones que pueden tener para nuestro presupuesto de peso de la página.

Preferir fuentes preinstaladas: Utilizar las fuentes del sistema que vienen preinstaladas en los dispositivos, como Arial, Georgia, Tahoma o Times New Roman

Evitar las fuentes web autónomas: Evitar suscripción a Adobe Fonts o Fonts.com. Estos servicios de suscripción pueden añadir peso extra a tu sitio web y realizar peticiones adicionales al servidor, aumentando el consumo de energía y ralentizando tu sitio.

Menos peso de letra: Cada peso o variación de la tipografía, se presenta como un tipo de letra independiente, lo que añade volumen a la página. Usar máximo 3 pesos: regular, bold y light.

Optimización de archivos fuente: Convertir fuentes de formato TTF, OTF o WOFF a un formato WOFF2, ya que viene con una reducción del 30% del tamaño del archivo, compresión de código abierto mejorada para disminuir el uso del ancho de banda de la red y aumentar la velocidad de la navegación web en Chrome, Edge, Firefox, Safari y Opera.

Usar menos tipografías: Reducir el número de fuentes utilizadas hace que las páginas sean más rápidas y limpias, y ayuda a que los diseños sean más coherentes.

Desarrollo, Librerías y Scripts de seguimiento

Escribe un código limpio: Mantenga el código limpio y simple. Evite la duplicación y escriba consultas eficientes. Tenga en cuenta que esto no solo se aplica al código que escribe, sino también al código que toma prestado.

Comprimir el código: Minificar o convertir el código de desarrollo que leemos y escribimos como humanos en una versión optimizada para las máquinas.

Usar lenguajes energéticamente eficientes: ¿Nuestro sitio web necesita realmente JS o jQuery para ofrecer la funcionalidad especificada, y es apropiado utilizar un marco de trabajo frontal como React, Vue o Angular?

Utilice menos JavaScript: Busque formas de lograr interacciones, funcionalidad y animaciones de front-end utilizando tecnologías más eficientes como CSS, o al menos use JS de manera eficiente.

Scripts de Seguimiento: El script estándar de Google Analytics ocupa 17 KB. El de Tag Manager ocupa 75 KB. Además de causar importantes problemas de rendimiento, estos scripts acaban costando a los usuarios de móviles una gran parte de sus asignaciones mensuales de datos, ralentizan los sitios web e invaden su privacidad.. Y eso, sin contar con los de Facebook Píxel, Hotjar, etc.

Bloquear los Robots: Los usuarios humanos no son los únicos que visitan nuestros sitios web. «los bots suelen utilizar el 50% de los recursos.

Mantener la estática en el código

Almacenamiento en caché de páginas: Evitar tiempos de carga lentos para el primer visitante de cada página recién editada, y mejor rankings en los buscadores. Un plugin como WP Rocket o WP Optimizer es la forma más sencilla de implementar el almacenamiento en caché en un CMS como WordPress.

Utilice páginas móviles aceleradas: AMP está diseñado para hacer que el contenido se cargue más rápido en dispositivos móviles eliminando el código innecesario. Una versión más ligera y energéticamente eficiente para usuarios móviles.

Cree páginas web estáticas: Escribiendo las páginas web como archivos estáticos en HTML, CSS y JS, o utilizando un servidor de páginas web estáticas sin ninguna base de datos.

JAMstack: JavaScript, API y Markup es una forma de desacoplar el CMS de la experiencia del usuario del front-end. (Jekyll, Netlify, Gatsby)

PWA: Son aplicaciones web progresivas que tienen la capacidad de almacenar archivos en caché en el dispositivo del usuario, lo que significa que el contenido y los activos no necesitan recargarse en visitas repetidas. Se pueden instalar en cualquier sistema operativo, a través del navegador web y permiten consumir la información incluso cuando no hay conexión a internet. Twitter, Alibaba, Forbes, Starbucks, Pinterest son algunos ejemplos de ello

Alojamiento web

Utilice un centro de datos cerca de sus usuarios: cuanto más lejos tiene que viajar la información, más energía utiliza en su viaje. Por lo tanto, seleccionar un centro de datos cerca de su público objetivo ayudará a reducir el consumo de energía y será bueno para la experiencia del usuario y para el planeta.

Utilice un CDN: en los casos en los que su audiencia está distribuida por todo el mundo, las redes de entrega de contenido (CDN) proporcionan una gran solución para esto, sirviendo activos como archivos de imagen de una red de centros de datos en todo el mundo.

Reducir fragmentos de código

Eliminar el plugin de Gutenberg del front-end
Eliminar emojis – Twitter Emoji (Twemoji)
Impedir los comentarios en las entradas y páginas
Eliminar tamaño de las imágenes (grandes y thumbnails)
Activar la carga diferida imágenes (Lazyload)

5. Crear eficiencia y accesibilidad

Nuestras conexiones a Internet son cada vez más rápidas y baratas, lo que agrava el problema a medida que los diseñadores web nos volvemos más complacientes a la hora de considerar la eficiencia.

Es como hacer la maleta para las vacaciones; cuando se viaja en avión, uno siempre está atento a cada cosa que debe llevar por que hay un límite de peso y maletas en bodega. Pero cuando se viaja en el jeep de la casa, se mete de todo; no porque se necesite, sino porque es fácil ser complaciente.

Hoy en día, hemos estado diseñando sitios web con la mentalidad de alguien que hace la maleta para un viaje por carretera en el todoterreno de la familia y no, para un viaje de mochilero en avión.

Debemos cambiar nuestra perspectiva para centrarnos en la eficiencia si queremos diseñar una web sostenible.

la accesibilidad a veces la entendemos como crear sitios web para que personas con algún tipo de discapacidad, puedan hacer uso de ellas.

Sin embargo, la accesibilidad digital tiene como objetivo lograr que las páginas web sean utilizables por el máximo número de personas, independientemente de sus conocimientos, capacidades personales o características técnicas del equipo utilizado para acceder a la Web.

Eficiencia = Sostenibilidad

Si miramos 5 años atrás, los sitios web serían más simples y con menos animaciones, pero hoy necesitamos más.

Lo crea o no, todavía hay muchos lugares en el mundo con solo 3G y cuando hacemos que los sitios web sean más pesados, se les hace más difícil acceder a Internet.

Si, en lugar de construir sitios web más pesados y exigentes, comenzamos a crear sitios web más livianos y sostenibles, no solo reduciremos las emisiones, sino que también haremos que Internet sea más accesible para las personas en áreas con poco ancho de banda.

La web y lo digital contaminan, pero su impacto puede ser optimizado

Un ejemplo de esto es que cuando el huracán Irma se acercó a los Estados Unidos en 2017, CNN anunció que habían lanzado una versión de solo texto de su sitio web para garantizar que las personas pudieran acceder a las noticias críticas que les afectaron durante el huracán con solo una conexión de datos mínima requerida.

La página de inicio del sitio de solo texto es un 97,5% más pequeña que el sitio web principal de CNN, lo que lo hace no solo bajo en carbono, sino mucho más accesible.

Manifiesto UX y Web Sostenible

Todos compartimos y usamos la web, al igual que todos compartimos y vivimos en este planeta. Si adoptamos la sostenibilidad en nuestro trabajo, podemos crear una red que sea buena para las personas y el planeta.

“la mayor amenaza para nuestro planeta es creer que otro lo salvará”
Robert Swam

Al firmar el Manifiesto de la Web Sostenible creado por Wholegrain Digital declaras tu compromiso de crear una web más limpia, eficiente, abierta, honesta, regenerativa y resistente.

Adicionalmente, el Manifiesto de la UX Sostenible hace que nos comprometamos no sólo a poner al usuario en el centro de nuestro trabajo sino también, responsabilizarnos del efecto del mismo en otras personas, en la sociedad y en el medio ambiente.

Nuestro papel en la web sostenible

Todos tenemos un papel que desempeñar y juntos, podemos crear una red que sirva a las necesidades de la sociedad para las generaciones venideras.

Nada de lo que hagamos será perfecto. El reto es que todos nosotros veamos cómo podemos acercarnos.

Nuestro futuro es lo que nosotros hagamos, así que hagamos que sea bueno
Doc Brown

Si juntos reconocemos la sostenibilidad digital como una acción sistémica en donde todo está interconectado, donde todo influye, donde simplificar es la clave, dónde reducir es importante, donde cada micro decisión es vital y donde cada uno puede sumar para hacer parte de la ecuación, pues seguramente lograremos entender que al crear una web mejor para planeta crearemos también una web mejor para las personas.

Y si queremos crear servicios web que sean buenos para las personas y el planeta, debemos responsabilizarnos del impacto medioambiental del trabajo que hacemos.

Charla WordCamp Cochabamba

Aquí puedes ver la charla completa compartida durante la WordCamp Cochabamba Online 2021

Video-Diseño-Web-Sostenible--Una-apuesta-por-y-para-el-planeta-Catalina-Zapata