El Manifiesto de Bajo Impacto: Las 10 Directrices de Organic Basics para Crear Sitios Web Más Ecológicos

Reglas simples con posibilidades infinitas

Primero, leímos mucho sobre cómo construir realmente un sitio web sostenible y nos inundaron con consejos y trucos. Pronto nos dimos cuenta de que no podíamos hacerlo todo y que necesitábamos reducir las opciones. 

Inspirados por el manifiesto Dogme 95 y sus votos de castidad, redactamos un manifiesto con 10 reglas para construir un sitio web de bajo impacto. Al igual que los votos de castidad, están entre ser hiperespecíficos y abiertos a interpretación. 

Esto permite a diseñadores y desarrolladores el espacio para encontrar las soluciones que mejor se adapten a su configuración técnica, sin comprometer la sostenibilidad. Las reglas no especifican el uso de ninguna tecnología en particular, y por lo tanto pueden evolucionar junto con el desarrollo tecnológico.

Voy a repasar las 10 reglas a continuación y a dar algunas ideas sobre cómo puedes implementarlas en tu propio sitio. 

1. No cargar ninguna imagen antes de que sea solicitada activamente por el usuario

Las imágenes son un gran factor en el uso de datos de cualquier sitio web, y esto aplica especialmente en las tiendas de comercio electrónico. Necesitamos mostrar nuestros productos visualmente, y muchas veces desde varios ángulos o en diferentes modelos. 

Lo importante aquí es que solo carguemos las imágenes que los usuarios realmente necesiten ver. Esto puede significar cargar imágenes únicamente a medida que el usuario se desplaza por la página, cuando hace clic en una galería, o incluso ocultarlas hasta que el usuario pulse “mostrar imagen”. 

Esta regla es algo complicada porque las ilustraciones en forma de gráficos vectoriales escalables (SVG) aún están permitidas, pero el tamaño de un SVG es increíblemente pequeño comparado con la mayoría de las imágenes. Hemos usado esto en nuestro sitio mostrando ilustraciones en nuestra cuadrícula de colección (ver abajo), y solo mostramos imágenes en la página de producto cuando el usuario decide activamente cargar la galería.

2. Minimizar el consumo de energía en el dispositivo del usuario

Esto puede ser difícil de medir, pero no deja de ser importante. La razón principal para incluirlo es asegurar que el foco no esté solo en lo que ocurre durante la transferencia de archivos, sino también en lo que esos archivos hacen una vez llegan al dispositivo del usuario.

Actualmente, las dos cosas principales en las que nos centramos aquí son el uso de animaciones y la cantidad de scripts que se ejecutan activamente en tu sitio web. Cualquier uso de 3D también puede afectar bastante la batería del dispositivo. 

Algunas de las preguntas que puedes hacerte para aplicar esta regla son:

• ¿Esta animación / 3D / script aporta a la experiencia del usuario, o es solo un relleno?
• ¿Podemos limitar la cantidad de veces que usamos esta animación / 3D / script en el sitio?
• ¿Podemos simplificar esta animación / 3D / script, para que solo haga exactamente lo que necesita?

Lectura relacionada: Tomando decisiones más responsables en el diseño de la experiencia de usuario

3. Adaptarse para reflejar la cantidad de energía renovable con la que funciona tu sitio

Con la forma en que funcionan actualmente las redes eléctricas y el internet, ningún sitio web puede operar al 100% con energía renovable. Incluso Google, que cada vez se enfoca más en la energía renovable para operar sus centros de datos, no lo logra. 
Lo que podemos hacer en su lugar es hacer que nuestros sitios web se adapten a la cantidad de energías renovables presentes en la red eléctrica. Muchas compañías eléctricas, como Barry, ya hacen algo similar al ofrecer a sus clientes una aplicación que muestra cuándo la electricidad es menos intensiva en carbono (ver abajo).

En el sitio web de bajo impacto de Organic Basics, utilizamos la API de carbonintensity.org.uk para obtener datos. La API permite el acceso gratuito y sencillo a la intensidad de carbono de varias regiones del Reino Unido. Una alternativa sería la API de Electricity Map, que es bastante costosa pero dispone de datos de muchas más regiones del mundo. El inconveniente de esa API es el precio de entrada. 

Tuvimos que elegir el centro de datos de Londres ya que nuestro sitio está alojado en Google Cloud y es la única opción en el Reino Unido. Irónicamente, este centro de datos se encuentra en una de las regiones más intensivas en carbono dentro de la oferta de alojamiento en la nube de Google. 

Dependiendo de la intensidad de carbono, cambiamos la calidad de las imágenes que se sirven, así como restringimos el número de animaciones. Si la electricidad es realmente intensiva en carbono, incluso apagamos el sitio web por completo.

En su lugar, mostramos una página simplificada donde informamos a nuestros clientes que el sitio está inaccesible. Incluso ofrece una estimación de cuándo podrán volver a acceder al sitio, según los datos de predicción de la API de carbonintensity.org.uk. Desde que lanzamos el sitio, ha estado indisponible aproximadamente 12,5 horas.

4. Informa al usuario sobre el impacto de su comportamiento de navegación

Cuando compro en línea, espero poder ver cuánto cuestan los productos en mi carrito. Esto me permite saber si todavía tengo dinero para gastar o si tengo que buscar algún descuento. De manera similar, deberíamos informar a nuestros clientes del impacto que su comportamiento de navegación tiene en el clima.

En nuestro sitio web, calculamos continuamente las emisiones que un usuario acumula mientras navega. Así, pueden familiarizarse con qué son las emisiones de carbono y cómo se relacionan con el uso del sitio web. Si es posible, también deberías hacer un seguimiento de estas emisiones, ya que en última instancia es responsabilidad del propietario del sitio web reducirlas. 

5. No utilices videos

Nos encantan los videos en Organic Basics, pero realmente pueden arruinar el presupuesto de carbono de un sitio web. Esta es, de lejos, la regla más estricta de las 10, pero existe una muy buena razón. 

Internet está cada vez más dominado por el video y, en vez de seguir la tendencia, decidimos ir en la dirección contraria. Para realmente combatir la crisis climática, no solo necesitamos optimizar y minimizar; necesitamos decrecimiento. 

Con esta regla, te obligamos a pensar fuera del reproductor de video y considerar cómo añadir movimiento y dinamismo sin depender de cargar MB y MB de contenido en video. Como alternativa, considera utilizar animaciones CSS o SVG. Ah, y esto va doble para los GIFs. No. Uses. GIFs.

6. Almacena los datos localmente en el dispositivo del usuario para minimizar la transferencia de datos

Todo el contenido que muestras en tu sitio web puede potencialmente guardarse localmente en el dispositivo del usuario. No tiene sentido descargar algo dos veces si es poco probable que cambie. 

La mayoría de los desarrolladores ya reconocerán que esta regla es importante. Optimizará el rendimiento de tu sitio web y al mismo tiempo reducirá su impacto ambiental.

Para lograr esto, puedes considerar construir tu sitio web como una aplicación web progresiva y permitir el acceso sin conexión. 

7. Comprime todos los datos tanto como sea posible

Una vez que tus archivos llegan al dispositivo del usuario, debes asegurarte de que permanezcan allí hasta que sean actualizados. Eso se llama caché. Pero, antes de que siquiera lleguen allí, tienes que asegurarte de que esos archivos sean lo más pequeños posible. 

Minimiza tu CSS y JavaScript y comprime tus imágenes. Muchos de los frameworks modernos, como Nuxt.js o Next.js, hacen este trabajo por ti para muchos tipos de archivos. 

Esto realmente es de sentido común y, al igual que el uso de caché, tiene sentido también desde la perspectiva del rendimiento.

8. Carga solo los scripts de programación, frameworks y cookies más esenciales

Cada vez que añades una biblioteca o un script externo a tu código, aumentas el tamaño de la página. Incluso si la biblioteca solo pesa 1kb, esto rápidamente se convierte en 1MB si 1000 usuarios cargan la página.

Esta regla está aquí para recordarte que consideres cada script, framework y cookie que agregas. La palabra “crucial” es en la que debes enfocarte aquí. El seguimiento de conversiones y la analítica son cruciales en todas las tiendas online, pero, ¿realmente es necesario en cada página?

Estas consideraciones van muy bien con reflexionar sobre la privacidad, ya que el RGPD y normativas similares requieren consentimiento antes de cargar scripts. 

9. Limita la cantidad de luz emitida por la pantalla

Desde que anunciamos el manifiesto, hemos recibido comentarios sugiriendo que esta regla en realidad no marca la diferencia porque usar el modo oscuro solo reduce el consumo energético en pantallas OLED. 

Bueno, ¡eso es bueno para los usuarios con pantallas OLED! En el sitio web de bajo impacto de Organic Basics, aún usamos algunos colores blancos aquí y allá porque es una parte importante de nuestra experiencia de marca. Sin embargo, como se muestra en el ejemplo a continuación, también introducimos un tinte amarillo, así como un matiz gris, para limitar la cantidad de luz emitida por la pantalla.

10. Optimiza y limita el uso de fuentes personalizadas

Por último, llegamos al uso de fuentes personalizadas. Las fuentes realmente no representan mucho en el panorama general de las emisiones asociadas a los sitios web, pero esto puede salirse fácilmente de control. 

Por esta razón, nos limitamos a una sola fuente personalizada en la web de bajo impacto. Además, incluso eliminamos ciertos caracteres del conjunto. Realmente no hace falta el cirílico en una página en inglés.

El siguiente paso

Si sigues estas 10 reglas, sin duda estarás en camino de transformar tu sitio de ecommerce en una versión de bajo impacto. Más importante aún, habrás recorrido el proceso de ver tu web desde una perspectiva sostenible y como una pieza importante en el rompecabezas de la sostenibilidad. 

Al considerar estas reglas, es importante que encuentres lo que mejor funciona para tu marca. No todas las reglas son igual de estrictas, y deberías aprovechar esto a tu favor. Tu web de bajo impacto no es igual que la mía, ni tampoco debe serlo. 

Sin embargo, una internet sostenible no termina solo con electricidad y eficiencia energética, que es el foco de estas 10 reglas. Si ampliamos la perspectiva, también debemos empezar a considerar los materiales que componen nuestros dispositivos, centros de datos y redes.

Internet se construye sobre memes (divertidísimos) de gatos y blogs, pero también está construido con minerales de tierras raras muy reales que a menudo son extraídos por personas en condiciones laborales precarias y a un gran costo ambiental. 

En los últimos años, Fairphone nos ha dado un smartphone más sostenible, pero la conversación en absoluto ha empezado sobre internet como un todo. Es decir, necesitamos un Fairphone para la infraestructura de servidores.

Lectura relacionada: Desafiar y motivar a tu equipo para hacer del planeta un stakeholder de tu sitio

Más sobre todo lo sostenible: El Manual de Ecommerce Sostenible