¿Cómo hacer mi web más sostenible a nivel ambiental?

Hoy abro un melón que lleva tiempo rondándome.

Y es que vivimos la era de la sobreinformación, hay muuuucho contenido en internet y cualquiera puede crearlo gracias a la democratización de las herramientas digitales.

Y eso está bien, peeero ¿Y si te dijera que si internet fuera un país sería el 6º que más contamina del mundo?

*Según un informe firmado por Greenpeace, ya que tiene en cuenta que el tráfico digital consume el 7% de la electricidad mundial.

¿Podemos tener una web más sostenible?

¿Es posible que nuestro contenido sea inclusivo y responsable con las personas? ¿Cómo podemos reducir el consumo energético de nuestra web mientras le gustamos a google?

De esta y otras preguntas surge este artículo que he decidido dividir en dos partes.

Seguro que te suena que la sostenibilidad se sustenta en 3 patas: la ambiental, la económica y la social.

Para que un diseño sea sostenible debe abordar los retos de cada uno de estos tres pilares. Pero como no quería hacer un artículo inmenso, me voy a centrar en crear una web medio ambientalmente responsable. Y en una segunda parte hablaré de ¿Cómo hacer una web más inclusiva?

Los datos para concienciarnos del impacto ambiental de internet

• Se calcula que la industria de las telecomunicaciones podría usar el 20% de la electricidad mundial en 2025.
• Un sitio web promedio produce 1,76gr de CO2 por cada visita. Suponiendo que tiene 10.000 visitas mensuales, equivale a 211kg de CO2 emitidos al año.
• Un email de 1MB emite 19gr de CO2. Desde que lo se me borro sin piedad de las newsletter que no estoy leyendo y me pienso muy bien el contenido que lo que envío.

Lo que quiero decir, es que tendemos a pensar que lo digital no contamina.

Pero en realidad todo lo que hacemos a nivel online genera un consumo eléctrico y tecnológico, ya que está alojado en unos servidores que hacen posible que accedamos a la información.

Si, todo. Desde una web a una cuenta en una red social o tus archivos en la nube.

En este artículo quiero centrarme en cómo reducir el impato ambiental de una web. Así que vamos allá.

Las propuestas para reducir el impacto ambiental de tu webs

Lo ideal es tener una web ligera, accesible y alimentada por energías renovables. Vamos a ver el que aspectos podemos centrarnos para conseguirla:

Alojamiento

Esto es algo que podemos escoger y controlar. Y es también un punto vital a la hora de reducir el impacto ambiental de nuestra web.

Si vives en España, y la mayor parte de tu tráfico procede de aquí, te recomiendo mucho webempresa, que es dónde tengo alojada mi web desde que este universo meraki nació.

No sólo porque el servicio es maravilloso, si no porque trabajan con energías renovables.

Si no, puedes acceder al directorio de Green Foundation y bucear entre los servidores que están dados de alta como opciones responsables

Cantidad de información a nivel diseño

Cada vez incrementamos el peso promedio de las webs, creemos que podemos hacerlo porque tenemos conexiones más rápidas y ordenadores o móviles más potentes que nos permiten verlo como si no pesasen.

¿Qué tal si hacemos un Marie Kondo digital y eliminamos todo aquello que no es esencial? ¿Qué no nos convence o que no usamos? Recuerda que todo ocupa un espacio precioso en el servidor que viaja a través de la web y aumenta la huella de carbono.

Imágenes

• Optimízalas: puedes hacerlo ajustando su tamaño y resolución al máximo que va a ser visualizado
• Puedes comprimir las imágenes antes de subirlas con compressor.io
• Utilizar el formato WebP, siempre que sea posible
• Recuerda que no siempre necesitas una imagen, y menos si es de banco de imágenes y no está aportando nada diferente a lo que vemos en otros sitios webs.
• O hacer que tu web cargue con “Lazy-loading” es decir, que no se cargue hasta que se vayan a visualizar. Piensa que muchas personas no llegan al final de la página.

Videos

• Los videos como fondo de pantalla quedan muy cool, estoy de acuerdo. Pero ¿es sostenible que se reproduzca de forma automática cada vez que una persona llega a tu web? Y lo más importante ¿Aporta algo?
• Si quieres meter un video, te recomiendo eliminar la opción de autorreproducción para que sea el usuario quien le de al play si le interesa.

Otros elementos

• Si vas a utilizar ilustraciones o iconos vectoriales y tu sitio lo permite puedes utilizar el formato SVG. Es un formato vectorial que ocupa menos que un PNG o un JPG y te permitirá hacer ajustes básicos y usarlo en grandes tamaños sin incrementar su peso.

Plugins

• Hay plugins que nos facilitan mucho la vida y nos ahorran meter código, pero hay otras funcionalidades que se pueden hacer con una simple linea, evitando incrementar el peso de nuestra web.
• Borra todos aquellos que no estés utilizando.
• Trata de mantenerlos actualizados, no por tener todas las funcionalidades (que también), si no también por seguridad.
• Si no quieres complicarte la vida utilizar un pluging que te ayude a optimizar tus fotos, la carga y la caché puede ser una buena solución. WP- Optimize – Clean, Compress, Caché puede ser una buena solución si tu sitio está hecho en wordpress.

Tipografías

• No todos los proyectos lo permiten pero, si usas fuentes de sistema ahorrarás que cada dispositivo tenga qhacer una petición para verla. Ya que están instaladas en mismo.
• Trata de dar prioridad al formato WOFF2 ya que es un formato mucho más ligero.
• Apuesta por fuentes variables para que no tengan que cargar todos los estilos que vayas a utilizar.
• Si no puedes hacer ninguna de estas cosas, carga sólo los estilos que vayas a usar en tu web. Es decir, si por ejemplo vas a usar la Montserrat en su versión regular e italic. ¿Para qué vas a cargar la bold / semibold y demás familia?

Accesibilidad

Esta es una pata muy importante que va a permitir que la información de tu sitio web llegue al máximo número de personas posibles. Pero no me voy a enrollar más porque tengo un artículo dedicado al diseño web inclusivo, que puedes leer desde aquí.

Las herramientas para medir y compensar el impacto ambiental de una web

Websitecarbón, o cómo calcular la huella de carbono de una página web

Me gusta por el diseño majo. Y porque además de calcular los gramos de CO2 que emite una web cada vez que alguien la visita, te informa si el servidor en el que está alojada funciona con energías renovables.

También te equipara datos aburridos en otros fáciles de compartir. Por ejemplo, suponiendo que mi web tenga 10.000 visitas mensuales emitiría 32,48 kg de CO2. Lo que equivale a hervir agua para 4,4 tazas de té o la cantidad de carbono que absorben 2 árboles en un año.

The green web foundation, o cómo saber si tu hosting trabaja con energías fósiles o renovables

Pues eso, metes la dirección y te lo chiva. Además, en caso de que tu hosting utilice energía verde, puedes incrustar una imagen en tu web a modo de acreditación.

Aquí tienes un directorio de 430 empresas en 31 países que ofrecen un alojamiento responsable.

Creadoras de bosques, o cómo compensar la huella de carbono de tu web que no puedes reducir

Creadoras de bosques es una comunidad de mujeres que buscan crear un mundo más verde recuperando el contacto con la naturaleza.

Es también la comunidad con la que compenso mi huella de carbono (como puedes ver al final de esta página).

Las escogí a ellas porque actúan a nivel nacional y porque con su sello compensa, plantan y cuidan hasta 18 árboles, realizando un seguimiento de supervivencia. Es cierto, me han mandado una fotiño.

Y como decía un poco más arriba, calculo que mi web necesita 2 árboles anuales para compensar sus emisiones, así que voy sobrada :).

Otros links de interés

• Ecograder: otra buena herramienta para medir cuán verde es un sitio web.
• Sustainablewebmanifesto: como su nombre indica, un manifiesto de webs sostenibles basado en 6 principios. Limpieza, eficiencia, código abierto, honestidad, regenerador y resiliencia.
• Sustainableux.com: un evento en linea para diseñadores y desarrolladores que buscan generar un impacto positivo
• El boletín de Wholegraindigital.com: una newsletter colaborativa de curiosidades sobre webs ecológicas y sostenibles.
• La charla de Roberto Vazquez sobre desarrollo sostenible: Es de una wordcamp de 2019 pero vale mucho la pena.
• Siteimprove.com: un sitio donde encontrar herramientas de desarrollo accesible

Y hasta aquí lo que sé sobre crear sitios webs ambientalmente responsables. Sigo aprendiendo cada día así que si quieres compartirme información, soy toda ojos!

Te recuerdo que puedes descargarte mi guía gratuita para comunicar como piensas un pelín más abajo.

Y que si quieres que te ayude a construir una web estratégica, sostenible e inclusiva. Puedes echarle un ojo a mi servicio de diseño web y valorar si es para ti.