Etiquetasostenibilidad

1
Como hacer tu web más sostenible

Como hacer tu web más sostenible

¿Sabías que las webs contaminan?

Hoy por hoy, según la BBC, el tráfico digital supone el 3% o 4% de todas las emisiones de CO2 del planeta. No es mucho, pero si pensamos que es algo que no deja de crecer y que estamos en la era de la información y la digitalización puede ser algo que empiece a preocupar.

¿Qué puedes hacer tu?

Primeramente, debemos tener en cuenta estos 3 aspectos antes de profundizar:

  • Social
  • Económica
  • Sostenibilidad Ambiental

Vamos a enfocarnos en el tercer punto, la Sostenibilidad de la que tanto venimos hablando en el sector Mediador gracias a asociaciones que le dan visibilidad como FECOR:

¿Cuánto CO2 generamos al navegar por la red?

Hemos de pensar que internet no se alimenta sólo ni del aire sino de fabricas que generan electricidad y por ende, CO2.

De hecho, si comparáramos «el Internet» con algunos países este sería como 6to país en gasto energético, equiparándolo con otros países como Turquía o Polonia.

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

Y esto por supuesto seguirá en aumento.

¿Cuál sería el factor clave?
  1. El hosting donde se aloja la web, ya que solo un 3-15% de las webs usan un hosting con energía renovable.
  2. El peso de la página web. De media, se consumen de 1.2g a 3.6g de CO2 por página visitada.

Pues dejamos de hacer webs e ya, ¿No?

Para nada, no hemos de retroceder sino buscar el enfoque correcto y avanzar hacía el.

Creemos webs sostenibles

Una web ligera, accesible y que utilice energías renovables. Esto sería lo ideal. Quien busque algo bajo estos conceptos encontrará tu web, y no otra que pese más.

Ofrecer una alternativa sostenible genera un impacto positivo.

Hemos de pensar en la sostenibilidad como una escalera, siempre hay posibilidad de mejorar y seguir subiendo y mejorando cosas, así que lo importante es avanzar en esa dirección.

Factores claves en webs sostenibles:

Desde el servidor podemos controlar la fuente de energía.

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)
Cantidad de información

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

¿Quieres saber por que? Por que tenemos la falsa sensación de que podemos aumentarlo sin que pase nada y esto lo vemos por ejemplo en el tamaño de las pantallas de los dispositivos móviles.

También tenemos conexiones más rápidas, dispositivos más potentes… Pero esto ni siquiera es cierto para todos. Ya que no todo el mundo tiene ese tipo de acceso «premium» / 1er mundista a internet. 

Sin embargo, seguimos generando cantidades de información cada vez mayores y vamos aumentando la huella de carbono.

Echa un vistazo a este gráfico que hemos 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 1 década:

Fuente: httparchive.org

¿En conclusión? 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 todo esto, aproximadamente la mitad de a la carga se debe a las imágenes, mientras que la otra mitad se reparte entre multimedia, código, css, scripts etc…

Así que la solución, llegados a este punto consta de diferentes opciones:

Imágenes en formato sostenible (webp)
  • Utiliza imágenes cuando sea necesario e indispensable, reflexiona sobre ello. Utiliza solo las necesarias para que el contenido cobre sentido.
  • Optimiza las fotografías de tu web: redimensiona, comprime, usa el tamaño que toca en cada espacio y aprende a implementar el formato WebP. 
  • Utiliza el «Lazy-loading» para que tus fotografías no se carguen hasta que no deban visualizarse siempre que puedas (sino sabes como, no dudes en contactarnos para que podamos guiarte a hacer tu web más sostenible).
Vídeos para una web sostenible
  • Como en el punto anterior, no siempre se necesita un vídeo. Piénsalo dos veces antes de insertarlo.
  • Sabemos que poner vídeos de fondo es tentador, a no ser que te dediques a crear vídeos o seas diseñador etc… no hacen falta.
  • No hagas auto-play en tus vídeos. Esto, además de consumir energía, puede resultar molesto para una parte de tu audiencia. Solo con esto podrás reducir a la mitad el peso de la página.
  • Y, sin dudarlo, optimiza tus vídeos a nivel de resolución y códec cuando los edites.
Código para una web sostenible
  • Código > plugin, sobre todo si solo deseas usar una pequeña parte de sus funcionalidades.
  • 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 hacer una caché del contenido en el dispositivo de tu audiencia. De esta manera no tendrán que cargar la web cada vez que accedan a ella.
Fuentes para una web sostenible
  • Se pueden usar fuentes del sistema que ya están en los dispositivos de los usuarios, esto normalmente va en contra de tu branding. ¿Existe alguna alternativa? Si y las veremos en el siguiente punto.
  • Reduce las variaciones de fuente que cargas en tu web. Por ejemplo, si no vas a usar las cursivas de la tipografía que usas en los encabezados, Podemos desactivarlas.
  • Carga solo un subset o pack de fuente y elige el formato WOFF2 ya que es el más moderno, más ligero y soportado por el 94% de navegadores web.
Accesibilidad, accesibilidad y accesibilidad

Si se lo ponemos fácil al navegante encontrará la información mucho antes:

  • Crea solo el contenido esencial ¡Fuera todo lo que sobre! No caigas en el pensamiento de a más contenido mejor, puesto que esto no funciona así.
  • Haz que el contenido de tu web sea fácil de encontrar; cuida el SEO y el copywriting de los textos que vayas a escribir.
  • Haz un buen uso del diseño y la jerarquía para que el contenido sea escaneable.
  • Reducir el número de clics es importante, ya que hará que tu visitante web llegue a lo que está buscando, más rápido y eso mejorará su experiencia como usuario.
Bonus: Tech

Para poner la guinda del pastel, debes hacer una especial atención a las herramientas que distribuye 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).

Todo esto puede sonarte a chino mandarín, por eso, si tienes dudas, contáctarnos y te ayudaremos a mejorar tu gestión web y la sostenibilidad de esta.

The end:

Después de lo leído, ahora que ya sabes como funciona una web sostenible ¿Te vas a animar a contribuir? Nosotros ya lo hemos hecho.

Notarás un impacto positivo en el posicionamiento SEO, el rendimiento de la web, la experiencia del usuario…

Ahora ya no tienes excusa, te hemos explicado todos los secretos, 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.

Contáctanos a través de nuestras RRSS, página web, teléfono o correo y estaremos encantados de ayudarte.