3 consejos para hacer tu web más sostenible

¿Sabes cuánto contamina tu web?

Aporta un granito de arena extra aplicando estos trucos básicos para hacer que tu web sea más sostenible.

Este artículo está extraído de la ponencia que presenté desde mi salón de casa durante la pasada WordCamp España Online 2020.

Así que, si quieres reírte un rato con los imprevistos del directo, échale una «oreja». Y si es más grande que la mía, mejor (entenderás la broma cuando veas el vídeo): 😉

¿Prefieres leer? Aquí tienes:

Sostenibilidad web, vamos por partes

La sostenibilidad es un concepto amplio que se apoya en 3 pilares:

• El aspecto social
• La parte económica
• El impacto ambiental

Y aunque debes tener en cuenta estos 3 aspectos para tener una web realmente sostenible, en este artículo voy a centrarme en el que afecta al medio ambiente.

Aunque ya verás como esto repercute también en las otras dos caras del prisma.

Cuánto CO₂ generas navegando por internet

Internet no se alimenta por arte de magia, sino a base de fábricas que liberan CO₂ a la atmósfera, mucho más del que imaginas.

Por ejemplo, ¿sabías que si internet fuera un país, sería el 6º en gasto energético del mundo? Esto lo equipararía con el gasto de países como Turquía o Polonia.

Pero aún más impactante es que emite más gases invernadero que la industria aeronáutica. En concreto, el 2% de las emisiones de CO₂ global se deben al uso y mantenimiento de internet, lo cual se traduce en 800 millones de toneladas de CO₂.

Y estos números prometen ser muy superiores dentro de unos años.

El factor más determinante

¿Cuál es la razón principal de que internet se haya convertido en una máquina de contaminación?

Hay 2 causas predominantes:

1. Aproximadamente solo un 3-15% de las webs usan un hosting con energía renovable.
2. El peso de carga de las webs cada vez es mayor. Piensa que, de media, se consumen de 1.2g a 3.6g de CO₂ por página visitada.

Ahora la pregunta es, ¿cómo darle una solución? ¿Dejamos de crear webs y ya está?

De eso nada. Nadie dice que tengas que ir hacia atrás, lo que debes hacer es avanzar en la dirección correcta. 😉

Qué es una web sostenible

Si construyes una web más ligera, accesible y que además utilice energía renovable, las personas que busquen un contenido como el tuyo visitarán tu web en lugar de otra menos optimizada que malgaste energía.

Ofreces una alternativa más sostenible y por eso generas un impacto positivo.

Por supuesto, la sostenibilidad es un camino, un gradiente. Siempre hay posibilidad de mejora, así que recuerda: lo importante es dar pasos en esa dirección.

3 factores claves en una web sostenible (+ extras)

1. Fuente de energía

Respecto a la fuente de energía, la parte que puedes controlar es la del servidor.

De hecho, el punto con mayor impacto medioambiental de todos los factores que vas a leer en este artículo es elegir un hosting que use energía renovable:

• Hostings con servidores en Google Cloud, OVH… (como Siteground o Webempresa).
• Hostings especializados (Greenhosting)

En el último apartado te dejo enlaces donde puedes ver todos los hostings que usan energía renovable a día de hoy.

2. Cantidad de información

¡El tamaño sí importa! El peso medio de una web está sufriendo un incremento anual del 10-15%.

¿Por qué? Por tenemos la falsa sensación de que podemos aumentarlo sin que pase nada.

Tenemos conexiones más rápidas, dispositivos más potentes… Pero esto ni siquiera es cierto para todos. Ya sabes que no todo el mundo tiene ese tipo de acceso «premium» a internet. 

Y, sin embargo, seguimos generando cantidades de información cada vez mayores que viajan a través de la web, aumentando así la huella de carbono que dejamos a nuestro paso.

Solo tienes que echar un ojo a este gráfico extraído de httparchive.org para ver cómo ha crecido el peso de las webs según la resolución de pantalla en tan solo 10 años:

¿En resumen? El peso medio por página actualmente es de 2MB.

• 335% de aumento en pantallas de escritorio.
• 1190% más en dispositivos móviles.

Y de este espacio, aproximadamente la mitad se debe a la carga de imágenes, mientras que la otra mitad se reparte entre vídeos y código, css, scripts…

Así que la solución en este punto consta de varias vertientes:

Imágenes para una web más sostenible

• No siempre necesitas una imagen, piénsalo. Introduce solo las necesarias para que el contenido tenga sentido.
• Optimiza todas las fotografías de tu web: redimensiona, comprime, carga el tamaño que toca en cada momento o usa el formato WebP. 
• Utiliza «Lazy-loading» para que tus fotografías no se carguen hasta que no deban visualizarse.

Aquí te dejo una guía para optimizar fotografías te vendrá bien para poner en práctica este punto:

Vídeos para una web más sostenible

• De nuevo, no siempre necesitas un vídeo. Así que piénsatelo dos veces antes de añadirlo.
• Casi nunca necesitas un vídeo como «background» o fondo, a no ser que te dediques a crear vídeos.
• Elimina el auto-play. Esto, además de consumir energía, resulta muy molesto para gran parte de tu audiencia (entre la que me incluyo). Solo con esto puedes reducir a la mitad el peso de la página.
• Y, por supuesto, optimiza tus vídeos a nivel de resolución y códec.

Código para una web más sostenible

• No siempre necesitas un plugin, sobre todo si solo deseas usar una pequeña parte de sus funcionalidades. ¿Y si tuvieras bastante con un sencillo snippet? Echa un ojo mi biblioteca en Código Genesis y, si no encuentras lo que buscas, puedes suscribirte y pedírmelo. ¡Así de fácil!
• Minimiza el contenido en CSS y JS. Y, sobre todo, usa el mínimo Javascript posible, ya que es un lenguaje que consume bastante energía.
• Contempla crear una web con tecnología PWA (Progressive Web App) que permite cachear el contenido en el dispositivo de tu audiencia. No es para todos lo proyectos, pero merece la pena tener en cuenta esta posibilidad.

Fuentes para una web más sostenible

• Puedes usar fuentes del sistema que ya están en los dispositivos de los usuarios, aunque esto normalmente va en contra de tu branding. ¿Alternativa?
• Reduce las variaciones que cargas en tu web. Por ejemplo, si no vas a usar las cursivas de la tipografía que usas en los encabezados, ¿para qué cargarla?
• Carga solo un subset y elige el formato actualizado WOFF2, mucho más ligero y soportado por más del 94% de navegadores.
• Empieza a utilizar fuentes variables. Si no sabes lo que son pásate por WordPress.tv y busca algunas ponencias de Ana Cirujano, entre otros.

3. Accesibilidad de la información

Si se lo pones fácil al usuario encontrará la información mucho antes:

• Crea solo contenidos y apartados esenciales. O lo que es lo mismo, ¡fuera todo lo que sobre!
• Asegúrate de que tu contenido resulte fácil de encontrar; es decir, cuida el SEO y el copywriting de tus textos.
• Usa bien el diseño y la jerarquía para conseguir que el contenido sea escaneable.
• Reduce el número de clics que debe hacer tu lector para llegar a lo que está buscando cuidando la experiencia de usuario.

Extra. Tecnología

Y como guinda final, pon atención a las herramientas que distribuyen tu web:

• Asegúrate de que tu hosting usa:
  • La última versión PHP y MySQL/MariaDB.
  • Compresión GZIP.
  • Caché de servidor.
• Si tu hosting no tiene caché de servidor, instala un plugin de caché.
• Utiliza una CDN (Content Delivery Network).

3 ejemplos prácticos de sostenibilidad en la red

Smush

Este plugin de optimización de imágenes ahorra una cantidad de emisiones anuales de CO₂ equivalente a 4.400 coches de gasolina gracias a su funcionalidad disminuyendo el peso de miles de páginas web.

Mailchimp for WordPress

Danny Van Kooten calculó que eliminando una dependencia de 20kB de JS en este plugin reducía 59 toneladas de CO₂ al mes.

¿Cómo pueden afectar tanto solo 20kB? Pues porque Mailchimp for WordPress está instalado en 2 millones de sitios web. 

Esto significa que, dependiendo de dónde se use tu código o cuántas personas visiten tu web, cuidar estos pequeños detalles puede tener más impacto en el planeta que tu forma de viajar, comer o consumir.

NBadiola.com

¿Quieres un ejemplo más de andar por casa?

Muy fácil. Cuando descubrí la sostenibilidad web decidí analizar y optimizar mi propia web (esta en la que estás ahora mismo).

En concreto, reduje la home de 798kB a 326kB.

¿Cuánta reducción de CO₂ crees que supuso esa disminución de 350kB?

Estos fueron los cálculos:

350kB * 22.000 páginas visitadas al mes * 12 meses = 92.400MB

Y esto supone:

50 Kg de CO₂ = 500 Km en coche de combustión = 1 vuelo Barcelona-Bilbao

Como ves, en este caso el impacto no es tan impresionante como en los ejemplos anteriores, ya que la cantidad de visitas que recibe mi web no tiene comparación con el uso generalizado de esos plugins.

Pero, en mi opinión, todo suma. La pregunta es, ¿quieres sumar tú también?

Conclusión

¿Sabes qué ocurre cuando trabajas por una web más sostenible?

Que también notas un impacto positivo en otras áreas, como en el posicionamiento SEO, el rendimiento de la web, la experiencia de usuario…

Ahora ya no tienes excusa, así que recuerda:

• Usa un hosting alimentado por energía renovable.
• Asigna un presupuesto máximo por página (500kB – 1MB).
• Cuida la experiencia de usuario y la accesibilidad.

¿Qué dices? ¿A ti también te apetece empezar a poner tu grano de arena en un mundo mejor creando webs más sostenibles?

Te escucho en los comentarios. 🙂

Links relacionados

• PDF de la presentación
• https://www.websitecarbon.com
• https://ecograder.com
• https://www.sustainablewebmanifesto.com/
• https://www.thegreenwebfoundation.org/green-web-check/
• https://httparchive.org/reports/page-weight/
• https://sustainableux.com
• https://www.wholegraindigital.com/curiously-green/issue-1/
• youmightnotneedjquery.com
• https://wordpress.tv/2019/09/22/roberto-vazquez-desarrollo-sostenible/
• https://wordpress.tv/2020/03/03/david-vina-desarrollo-sostenible-o-como-ayudar-a-salvar-el-mundo-gustandole-mas-a-google/