Diseño web sostenible y práctico

Laurent Devernay

Foto: Una mano extendida esperando que una pluma caiga

Foto por Javardh[A] en Unsplash

La web es actualmente insostenible, pero tenemos muchas maneras de mejorar la forma de crear servicios digitales. Todas las personas que trabajan en tecnología pueden hacer algo - y tenemos que hacerlo. También podría cuestionar nuestra forma de pensar sobre la accesibilidad, los datos personales y los modelos de negocio.

La huella medioambiental del mundo digital parece intangible para la mayoría. Sin embargo, nuestros sistemas digitales generan más emisiones que la industria de la aviación.

Según un estudio del grupo GreenIT(1), esta huella anual actual se traduce en:

6.800 TWh de energía primaria (EP)
1.400 millones de toneladas de gases de efecto invernadero (GEI)
7,8 millones de m3 de agua dulce (agua)
22 millones de toneladas de antimonio (ADP)

Según estas cifras la contribución del mundo digital a la huella de la humanidad representa el:

4,2% del consumo de energía primaria
3,8% de las emisiones de gases de efecto
invernadero
0,2% del consumo de agua

Búscalo, es realmente mucho. ¿Quién tiene la culpa de eso? Veamos.

El peso insoportable de la web

Cada minuto se envían millones de clics y contenidos en internet. El 80% del ancho de banda mundial se utiliza para el streaming (bajo demanda, Youtube y la pornografía son los 3 principales contribuyentes).

Gráfico mostrando lo que sucede en internet cada 60 segundos

Gráfico por @LoriLewis[B] y @OfficiallyChadd[C]

Sin embargo, el principal impacto no proviene de nuestro uso de la web ni está en los centros de datos. Los principales responsables son los dispositivos que utilizamos. En cada uno de ellos hay una gran cantidad de recursos no renovables. La mayoría de las veces se construyen y se desechan en condiciones inaceptables. Además, poseemos demasiados dispositivos, los cambiamos con demasiada frecuencia y la mayoría de las veces no los reciclamos. A decir verdad, a menudo nos fallan inesperadamente. Por culpa de la obsolescencia programada, dirán algunos. Claro, hay gente que quiere el último smartphone. ¿Qué otra cosa puedes hacer cuando el fabricante deja de mantener el que ya tienes?

La mayoría de las veces cambiamos nuestros dispositivos no porque estén rotos sino porque se quedan atrás.

Nuestros dispositivos se quedan rezagados sobre todo porque los sitios web y las aplicaciones se han descontrolado: los sitios web son demasiado pesados[D], están sobrecargados y se llenan hasta el tope de patrones oscuros, imágenes y vídeos.

Como usuaries debemos cuidar nuestros dispositivos y mantenerlos el mayor tiempo posible. Reducir el número de dispositivos conectados también ayuda mucho, al igual que reducir el número de pantallas planas.

Pero las personas que producen nuestros servicios digitales deben actuar para reducir la carga de estos dispositivos. El ecodiseño, como veremos, es un buen punto de partida. Sin embargo, podría implicar un replanteamiento de la web y de cómo percibimos a sus usuaries. Empecemos por analizar la responsabilidad de les desarrolladores web.

El estado de la web (insostenible)

Para reducir la huella medioambiental de nuestros sitios web tenemos que hacerlos más ligeros y mantener la UX (Experiencia de Usuarie) lo más fluida posible. Le usuarie debe encontrar el sitio web fácilmente[E], y llegar al servicio o la información que ha venido a buscar. Esto implica trabajar en la usabilidad y alejarse de los patrones oscuros.

Una forma práctica de reducir la huella es asegurarse de que las páginas sean lo más ligeras posible. Cuanto más pesadas sean menos probable será que les usuaries vean su sitio web.

Hay que tener en cuenta dos cosas. En primer lugar, la mayoría de la gente no tiene el último teléfono inteligente o incluso una conexión a internet decente y asequible(2)(3)(4). En segundo lugar está el tema de la accesibilidad. Su sitio web tiene que ser fácil de usar en la medida en que sea posible(5)(6).

Peso de la página

Las páginas web son pesadas[F] y cada vez lo son más.

El tamaño medio de una página web ronda los 1900Kb y contiene 74 peticiones. Desde 2018 el tamaño ha aumentado en 434 Kb en escritorio y 179Kb en móvil. Tanto para el ancho de banda como el rendimiento general. Tenga en cuenta que no todas las personas tienen datos móviles ilimitados o incluso una conexión a internet fiable.

Sin duda, las imágenes y los medios de comunicación tienen la culpa. Pero Javascript (JS) también tiene su parte de responsabilidad. El CSS también. Profundicemos en ello.

Caricatura: Primer cuadro: Dos personas conversan en un antiguo laboratorio de cómputo. Primera persona pregunta - ¿Que estas haciendo con 2KB de RAM? Segunda persona contesta - ¡Estoy enviando a gente a la luna! Segundo cuadro: Dos personas conversan en una casa. Primera persona: ¿Qué estas haciendo con 1.5GB de RAM? Segunda persona contesta - Corriendo Slack.

Caricatura por @bruised_blood [G] and @iamdevloper [H]

Lo que hace que los sitios web sean más pesados

Si observamos las estadísticas de los sitios web podemos explicar fácilmente el peso de las páginas web. Aquí descubrimos un montón de malas prácticas cuyo remedio veremos en el diseño ecológico.

En la mitad de los sitios web de Internet:

Se utilizan más de 373Kb de JS. Bibliotecas frontales como React y otras seguramente tienen un papel en eso. jQuery también. Existen alternativas más ligeras [I]. Como desarrolladore pregúntate si realmente lo necesitas. Puede que necesites cierta funcionalidad pero probablemente no toda la caja de herramientas.
En promedio toma casi 2.5s para cargar el JS solo. Sí, has leído bien. Teniendo en cuenta que la mayoría de la gente abandonará un sitio web para móviles si tarda más de 3s en cargar[J], es un problema.
Se necesitan más de 18 peticiones sólo para cargar los scripts JS.
Se utilizan más de 6 hojas de estilo.
Las imágenes pesan en total más de 1Mb.

Aquí hay otras estadísticas alarmantes:

Más del 83% de los sitios web utilizan jQuery. ¿Realmente necesitan una caja de herramientas tan completa? Algunos propietarios de sitios web probablemente ni siquiera saben que utilizan jQuery, ya que se incluye en Bootstrap (pero no por mucho tiempo[K]) y en algunos plugins y temas de WordPress, entre otras cosas. Sí, que Bootstrap se deshaga de jQuery podría ser un gran paso adelante hacia una web más sostenible. Esto será así a partir de Bootstrap 5.
Hablando de Bootstrap, sigue siendo utilizado por casi una cuarta parte de los sitios web. ¿Utilizan realmente todas sus funciones?
Menos de la mitad de los sitios web utilizan una hoja de estilo de impresión. Se suponía que la web iba a imprimir menos cosas. Pero si tenemos que imprimir, siempre es bueno tener una hoja de estilos dedicada para eliminar la mayor parte de los cosméticos. Alerta de spoiler: imprimimos mucho más desde la llegada de la web, algo que ilustra bien la paradoja de Jevons.
La mayoría de las imágenes son redimensionadas por los navegadores[L], lo que significa que enviamos más datos de los que necesita el dispositivo.
En cuanto a la optimización de las imágenes, sólo el 4,2% de los sitios web utilizan WebP[M].
El número de elementos del DOM sigue aumentando, y su distribución es bastante alarmante. Más elementos significa más complejidad, lo que significa menos rendimiento y una mayor huella ambiental.
Y la cosa se agrava cuando se observan los elementos más utilizados[N]. Esto en cuanto a la accesibilidad y el HTML semántico. Por no hablar de todos esos iframes. En general no son muy buenos por muchas razones (accesibilidad, seguridad, rendimiento) pero los iframes siguen siendo muy utilizados, por ejemplo, al incrustar un vídeo de Youtube o un feed de medios sociales en tu sitio web.

Optimizaciones técnicas

Por último, hablemos de algunas optimizaciones técnicas que pueden ayudar a tus usuaries a conseguir sitios web más rápidos (y ligeros).

Green-IT Analysis es un complemento ("addon") del navegador que mejorará las DevTools de tu navegador midiendo el impacto medioambiental de los sitios web y comprobando las buenas prácticas. Está disponible en Firefox[O] y Chrome[P].

Si aún no lo has hecho, optimizar las imágenes es un buen punto de partida. Llaman la atención pero no tienen por qué ralentizar al usuario. ¡Por suerte, web.dev proporciona toda la información necesaria para ello![Q] Quizá también puedas probar con los CSS Sprites.[R] Y ten en cuenta un viejo dicho: si estás optimizando imágenes manualmente lo estás haciendo mal. Si quieres hacerlo lo más fácil posible inclúyelo en tu flujo de trabajo.
La mayoría de los sitios web no utilizan compresión de texto. La mayoría de los elementos que utilizas en tus sitios web son básicamente texto (HTML, hojas de estilo y scripts). Las ganancias de la compresión de texto pueden ser enormes7. Minificarlos hace que las cosas mejoren aún más.
Todavía queda mucho por hacer en cuanto al almacenamiento en caché. Les usuaries no deberían tener que recargar todo cada vez que vuelven a su sitio web8. La CDN (red de distribución de contenidos) también puede ser una buena forma de reducir la huella ambiental[S] al acortar la distancia entre tus usuaries y lo que cargan desde tu sitio web9.
Tal vez no necesite jQuery[T] o tus elegantes bibliotecas JS. Claro, son útiles. Pero también son masivas y están llenas de algunas funcionalidades que no necesitas. Si crees que realmente las necesitas busca alternativas más ligeras.[U]

Al final los beneficios de estas optimizaciones pueden ser enormes. La mayoría de estas optimizaciones están bien documentadas porque están relacionadas con la optimización del rendimiento web. Puede que haya que investigar un poco en el primer intento pero realmente vale la pena.

Sin embargo, el impacto ambiental de tu sitio web no se limita a la posibilidad de optimizaciones técnicas. ¿Qué pasa con todo el desorden? ¿Necesitamos todas esas imágenes, videos, feeds de redes sociales y botones para compartir? ¿Y todas esas funcionalidades que la mayoría de les usuaries nunca utilizarán?

Ahora culpemos a les diseñadores.

Sobriedad funcional

Incluso antes de la optimización técnica hay enormes potenciales ganancias si se opta por no incluir algunas cosas. He aquí algunas recomendaciones para les diseñadores:

Menos imágenes, menos videos, fuentes de medios sociales y botones para compartir[V].
¿Realmente necesitas comentarios en tus artículos?
Elige tus fuentes con cuidado y optimízalas[X].
Al igual que un tercio de los sitios web es posible que utilices WordPress. Seguro que hace todo lo que quieres, pero ¿necesitas todas estas funcionalidades? Optimízalo o busca el JAMStack[Y].
¿Necesitas una aplicación móvil nativa cuando los beneficios de una Aplicación Web Progresiva (AWP)[Z] podrían ser enormes? Echa un vistazo a la AWP ya que podría mejorar la experiencia de usuarie de tu sitio web.
¿Les usuaries realmente necesitan Google Maps incrustado en su sitio web para encontrarte? Openstreetmap[AA] hace lo mismo sin todos los rastreadores (más adelante) y, la mayoría de las veces, una simple imagen (optimizada) de un mapa hace el trabajo.
¿Realmente necesitas un carrusel[AB]? Creo firmemente que tus usuaries no lo necesitan.
Hace mucho tiempo todo el mundo quería un foro. Mira lo que queda de eso.

Cuando se hace ecodiseño para la web hay que centrarse en un servicio digital. Puedes analizar un sitio web o una aplicación, pero el verdadero objetivo es la experiencia de le usuarie. ¿Cuál es el objetivo de tu usuarie? ¿Qué le proporcionas? Puede ser reservar un billete de tren, leer las últimas noticias o incluso chatear con otres jugadores. Al final esto es en lo que trabajarás para mejorar la experiencia de le usuarie y, por tanto, reducir la huella medioambiental. Al centrarte en el propósito de les usuaries puedes tener en cuenta lo que es esencial para tu usuarie y eliminar lo que parece superfluo.

También hay que tener en cuenta que todos los sitios web no deben permanecer en línea para siempre.

Si tienes algunas estadísticas de tu sitio web utilízalas para buscar funcionalidades y páginas que no se utilicen. Hablando de estadísticas, hablemos de la analítica y los anuncios.

Foto por Chris Yang[AC]

Capitalismo de vigilancia

Ya en 2015 los anuncios se llevaban el 39% de los datos móviles[AD]. No creo que haya mejorado desde entonces.

La mayoría de las cosas que usas en la web son gratuitas - sobre todo "gracias" a los anuncios. Eso significa un montón de imágenes, videos e información por todas partes en la web que te distraen de lo que quieres. Pero la cosa se pone peor: esos anuncios no se eligen al azar. Así entra la era del capitalismo de vigilancia[AE] y el microtargeting ("microfocalización")[AF].

Hace unos veinte años ibas a Tripod y veías anuncios, cuidadosamente colocados en las páginas. Hasta que algunos se dieron cuenta de que era mejor elegir el anuncio adecuado para cada página. Que quieras aprender a hacer un sándwich de huevo no significa necesariamente que quieras comprar un coche nuevo. Así comenzó la era de los anuncios contextualizados. Eso significa elegir qué anuncio mostrar en función del contenido de cada página. Cada vez que une usuarie hacía clic en un anuncio el propietario de la página ganaba un poco de dinero. Era otra buena razón para producir contenidos de calidad.

Unos años más tarde Google y otras empresas tecnológicas decidieron redoblar sus esfuerzos centrando la elección de los anuncios en le usuarie. En el año 2000 la burbuja de las empresas tecnológicas de Silicon Valley les amenazaba y la situación era más bien de "evolucionar o morir". A través de los rastreadores y las cookies se puede saber mucho sobre lo que has hecho, quién eres y qué te gusta. A través de algoritmos de predicción por fin es posible ofrecerte EL anuncio que, sin saberlo, quieres. Navegando por Facebook ves ese producto en Amazon que estabas mirando el otro día. Viendo vídeos en Youtube te aparecen sugerencias relacionadas con esa otra afición tuya (sí, corgis, todos hemos pasado por eso). "Permítenos conocer tu ubicación y tu historial de navegación. No es para nosotros sino para ti".

Por supuesto, estos algoritmos de predicción necesitan ser alimentados, de ahí la multiplicación de rastreadores y cookies.

El seguimiento ("tracking") de anuncios es una enorme invasión de la privacidad y pesa mucho en tus páginas web[AG]. Desde la llegada del Reglamento General de Protección de Datos (RGPD) en 2018 algunas empresas tuvieron que aprender a trabajar sin cookies. Al tener la opción de permitir las cookies o no algunos usuaries las rechazaban por completo. En algunos sitios web podría ser tanto como el 90% de les usuarios optando por no permitir las cookies. Algunos periódicos tuvieron que de repente aprender a ganarse la vida sin el microtargeting y volvieron a los anuncios contextuales. ¿Adivinen qué? Aumentaron sus ingresos[AH]. Hay un aumento (todavía lento) de la conciencia en torno a los anuncios[AI]. También hay que tener en cuenta que el microtargeting ayuda mucho a la proliferación de noticias falsas, desinformación y extremismo[AJ].

Si realmente quieres implementar anuncios en tu sitio web al menos hazlo bien[AK]. Y si necesitas analíticas (que son estupendas para saber qué quiere el público de tu sitio web) busca alternativas a Google Analytics10. Por último, la privacidad por diseño[AL] podría ser un buen ángulo para replantear el modelo de negocio de su sitio web.

Otros beneficios

Acabamos de leer muchas buenas razones para crear una web más sostenible y actuar en favor del planeta. Pero a veces esto no es suficiente. He aquí algunos beneficios para las empresas.

El ecodiseño de los servicios digitales se traduce en una mejor experiencia de usuarie: mayor rendimiento[AM], accesibilidad más fácil de implementar y también mejor seguridad al reducir la superficie de ataque eliminando herramientas y funcionalidades superfluas. Todo esto puede mejorar en gran medida tu posicionamiento en buscadores ("SEO"). Además, recuerde que una mejor experiencia de usuarie suele ser mejor para tu negocio.

Hoy en día, con toda la preocupación por el cambio climático, comunicar que se contribuye a una web sostenible puede ser muy beneficioso para la imagen de tu marca.

También puedes dejar de usar Patrones Oscuros ("Dark Patterns")[AN] y poner tu granito de arena en la lucha contra la economía de la atención[AO].

Consejos y recursos finales

He aquí algunas pautas a tener en cuenta:

Al igual que con el rendimiento y la accesibilidad, utilice un enfoque holístico. Mantenga sólo las funcionalidades realmente útiles para tu usuarie
Optimice la UX/UI para ayudar a le usuarie a alcanzar su objetivo más rápidamente
Elige tu pila técnica con mucho cuidado teniendo en cuenta lo que quieres conseguir. Cuando elijas una librería o marco de trabajo, busca una alternativa más ligera. Cuando utilices un marco de trabajo o una "CMDB" busca formas de optimizarlo
Cuando codifiques, utiliza la lista de comprobación de ecodiseño web (PDF)[AQ]. Aquí tus primeros pasos deberían ser hacia la optimización de las imágenes, el uso de la caché, la CDN, la minificación de los recursos de texto y la compresión
Encuentra un alojamiento web ecológico[AR]
Ten en cuenta que el contenido publicado también debe estar optimizado
Sigue aplicando las buenas prácticas mientras actualizas tu sitio web. Puede ser útil supervisar tu sitio web. Con cada actualización debería realizarse una rápida auditoría. Cuando tu sitio web deje de ser útil, desconéctalo.

Y otros recursos para profundizar:

web sostenible

virtual sostenible

encantan los enlaces, ¿te has dado cuenta?

Notas a pie de página

1. https://www.greenit.fr/wp-content/uploads/2019/11/GREENIT_EENM_summary_EN.pdf

2. Aprenda más sobre la brecha digital

3. Usando la web con un presupuesto de 50 Mb

4. Ver la sección de rendimiento del Almanaque Web 2019

5. Ver la sección de accesibilidad del Almanaque Web 2019

6. Ver WebAIM Million

7. Ver la sección de compresión del Almanaque Web 2019

8. Ver la sección de caché del Almanaque Web 2019

9. Ver la sección de CDN del Almanaque Web 2019

10. Alternativas a Google Analytics

https://www.offen.dev/

https://volument.com/

https://matomo.org/

https://goaccess.io/

Sobre el autor

Laurent Devernay[AS] es un defensor de las tecnologías sostenibles en Francia y celebra regularmente charlas y eventos sobre el tema, colaborando con GreenIT[AT] y el Institut du Numérique Responsable[AU].

Volver al índice

Enlaces: