¿Cómo hacer un sitio web amigo del ambiente?
Hace unos meses te preguntábamos ¿cuánto le cuesta al planeta tu sitio web?. Espero que ya tengas, al menos algunos, indicadores que te permitan evaluar la huella ecológica que deja tu sitio web en el planeta.
Hoy seguimos hablando de medio ambiente y sitios web, rendimiento y algunas soluciones técnicas que te permiten crear o hacer que tu sitio web sea un sitio web amigo del ambiente.
¿Cuál es el problema?
El problema es que la red, por su naturaleza en 2020, además de estar obesa, es negativa para el medio ambiente, como ya comentamos en diferentes ocasiones. La red crece exponencialmente, y a una escala probablemente inconcebible para el planeta.
El cambio siempre es una posibilidad, diría alguno, pero en estos momentos consumimos más que hace cinco años y gastamos más energía. Además, utilizamos medios digitales para ello, y por caprichos personales e intereses sectoriales seguimos apostando por tecnologías digitales con poca utilidad hasta la fecha y que consumen bastante.
¿Cúal es una de las soluciones?
En medio de todo esto, como programador o desarrollador, ¿cómo podrías reducir los daños existentes, ¿cómo podrías desarrollar o hacer que tu sitio web o tu aplicación web no sean tan malas para el ambiente? Lo podrías hacer teniendo entre otras cosas, las que te comento abajo.
¿El modo oscuro es realmente positivo?
La próxima vez que tu cliente o usuarios pidan “modo oscuro” para tu aplicación, piensa en lo siguiente: negro no significa que la pantalla esté apagada y estés gastando menos energía de forma absoluta.
Resulta que las pantallas LED pueden hacer este efecto, que tanto nos gusta - por lo menos a mi - pero estas pantallas siguen usando luz para mostrar el color negro, ¿ no es cierto?
Además, la mayoría de los temas de modo oscuro no son de color negro puro. Se tratan de combinaciones de grises más oscuros que permiten reducir la fatiga visual.
Por tanto, como diseñador y/o desarrollador, creo que tienes la responsabilidad de paliar el problema desde tu contexto inicial antes que llegue al usuario final. ¡Estarás desarrollando una web mejor, más rápida, más confiable, más robusta y con una gran experiencia digital para tu usuario final!
¿Qué más puedo hacer para ayudar el medio ambiente?
Obviamente que, tener que decidir si usar o no el modo oscuro, es solamente una parte moderna del problema. También puedes tener en cuenta las siguientes acciones:
Audita la huella de carbono de tu sitio web
En el artículo en el que reflexionábamos si esta, la actual, es realmente la WWW que queremos, hicimos referencia a un sitio web que permite calcular de forma estimada la huella de carbono de tu sitio web. Usa este sitio web para entender si lo estás haciendo bien. :)
Cuida los servidores y trabaja con ellos
Los servidores modernos están muy bien optimizados y diseñados para enviar marcado a los dispositivos de tus usuarios. Esto significa que sabrán - o deberían saber - procesar tu lógica de negocio y mostrar los resultados a los usuarios.
Tus proveedores de servidores quieren darte un servicio eficiente - con ahorro de energía -, por eso debes cuidarlos y trabajar con ellos, o dejar que trabajen para tí.
También debes invertir tiempo en soluciones que eviten que el dispositivo de tu usuario haga el trabajo. Seguro que hay alguna forma en la que el servidor haga el trabajo.
Una forma de saberlo y asegurarlo es haciendo tests y pruebas de usuario para optimizar, programar lo necesario y descartar lo que no tiene sentido. El principio universal de diseño 80/20 o el MVP te pueden ayudar en este proceso, y recuerda que cuanto menor es el procesamiento, menor es el impacto ambiental.
Utiliza sitios web estáticos “de verdad” siempre que posible
¿Por qué escoger sitio web estático y no un CMS?. Lee el artículo de Sergio y después sigue leyendo este.
La cuestión es que no todos los productos o servicios necesitan un CMS para informar a sus clientes o potenciales clientes. Lo mismo se aplica a las Aplicaciones de Página Única (SPA); en algunos contextos un CMS puede ser útil y suficiente para el proyecto, o incluso una simple página web estática “de toda la vida”.
Por tanto, si tu sitio web es de una fundación o un restaurante que simplemente tiene que informar a sus usuarios o clientes sobre sus horarios, número de teléfono y direcciones o Menú, es muy probable que no necesites de una Aplicación de Página Única con todo un sistema de módulos, plugins y estados detrás.
Gracias a estos enfoques, paradigmas, y frameworks modernos es muy fácil no querer quedarse fuera de la moda. Pero, si lo que quieres es respetar el medio ambiente, un sitio web estático, desarrollado profesionalmente, es mucho más fácil de renderizar para el dispositivo, luego mucho más amigable.
Tanto el servidor como los dispositivos tendrán que hacer menos trabajo y, naturalmente, utilizar menos energía para mostrar tu sitio web.
Si no lo ves claro, teniendote a ti como usuario, piensa en el número de veces que accedes durante un día a un sitio web que consume muchos datos, extiende este pensamiento a todos los otros usuarios que hacen lo mismo. ¿Cómo crees que es la infraestructura configurada para soportar este trabajo? ¿Gastará energía?
Simplifica tu JavaScript
Algunos sitios web pueden sobrevivir - incluso los negocios que representan - utilizando Javascript puro. Sin embargo, una vez más, los frameworks modernos llaman demasiado la atención para ser ignorados, y es muy fácil empezar a desarrollar aplicaciones web con ellos.
El Javascript puro te permite controlar, desde el inicio, la cantidad de código necesaria para una funcionalidad. Pero si estás creando sitios web estáticos es muy importante tener en cuenta lo que estás escribiendo, desde el inicio, y cómo se comporta en el navegador de tus usuarios.
Además, es cierto que JavaScript minificado (comprimido) ayuda en los tiempos de carga, pero el navegador debe descomprimir para procesarlo, y en algunos casos puede tener efectos secundarios desde un punto de vista computacional y ambiental, ya que más procesamiento significa más gasto de energía.
Quita las dependencias
¿Cuántas veces has hecho “yarn add” o “npm install” y te has olvidado de qué paquete has instalado. Estas acciones también generan CO₂.
Si realmente quieres hacer un sitio web amigo del ambiente, te recomiendo reservar un tiempo en tu listado de tareas, o incluso un presupuesto para hacer limpieza de paquetes y dependencias.
Incluso scripts de análitca que has utilizando en una campaña de marketing, pero nunca más los has utilizado. Esto se aplica también a tus tests A/B, tu contenido alimentado por cookies o aquellas fuentes bonitas de la web, que han venido con la plantilla y ya no utilizas, porque el cliente quiere utilizar las suyas.
Indaga también si la dependencia que quieres instalar no es ya una funcionalidad nativa en todos los navegadores modernos. Como vimos la semana pasada, CSS por ejemplo, ha crecido mucho este año de 2020 y te permite programar con menos verbosidad después de integrar nuevas funcionalidades y propiedades que antes solo podías usar mediante bibliotecas, o plugins.
Utiliza CDNs cerca de tus usuarios
Hemos comentado diferentes veces en este blog que “cuanto más lejos tengan que viajar tus datos, más energía utilizarán”. Con CDNs puedes enviar datos de forma eficiente a tus usuarios utilizando la ruta más corta posible, si estos tienen servidores cerca. Esto mejora la latencia, el rendimiento, y gracias edge computing puedes ir un paso más allá.
Conclusión
Estas son solamente algunas formas que puedes utilizar para hacer que tu sitio web sea amigo del ambiente. Las puedes implementar de cara al 2021, o puedes hacer muchas otras cosas, cómo eliminar tu sitio web personal si ya no lo utilizas, y nadie lo visita. Si necesitas uno para hacer pruebas, puedes tener un servidor local muy económico. :)
Si tienes otras fórmulas para ayudar a paliar un problema global como es la huella ecológica que dejan los sitios web en nuestro planeta, ¡no dudes en comentar abajo!
¿Crees que tu sitio web tiene alguna responsabilidad en el cambio climático?
¡Feliz Navidad y felices fiestas!
Foto: Lichtmagnet de Pixabay
Fuentes: