Diseño Web

Diseño web sostenible

Diseño web sostenible

Un gran número de sectores están tratando de reducir, o al menos, limitar, sus huellas de carbono y uso de energía. Los estándares de emisiones han sido establecidos para las industrias de telecomunicaciones, construcción y automóviles. Sin embargo, las huellas de carbono del internet está creciendo y saliéndose de control: 830 millones de toneladas de CO2 al año, que es más grande que toda la industria de la aviación. Dicho monto de incrementará al doble para el 2020.

Es tiempo que los diseñadores se unan a la causa.

Ahora mismo, el menos 32 millones de toneladas de Co2 —40% del total de las huellas de carbono del internet— caben bajo la responsabilidad de las personas que crean la Web. Esta cantidad no tendría que ser tan grande, pero con nuestros carruseles rodantes, las imágenes de alta resolución, y más, por años, hemos estado diseñando páginas web que demandan mucha energía, creando páginas web monstruosas donde podemos ser servidos por un finos híbridos o, mejor, bicicletas.

La buena noticia es que contamos con diversos métodos para arreglar esas obesas páginas web y, a la vez, atacar las huellas de carbono de nuestra industria —métodos que encajan oportunamente con buenas prácticas empresariales: el diseño que se adapta a los móviles demanda un enfoque razonado y eficiente para el diseño de páginas web, y métricas ROI cada vez más sofisticadas que ya estén llevando a las empresas al buscar páginas web más rápidas y livianas.

Antes de entrar al meollo del asunto, veamos cómo calcular una huella de carbono de una página web.

¿Qué es la huella de carbono de una página web?

Al igual que nos referimos a uso de energía de un auto en términos de kilómetros por galón, podemos pensar en el uso de energía web en términos de datos descargados. Esto, en su parte, nos brinda un marco de trabajo para calcular la relación entre el tamaño de una página web y la huella de carbono.

Desafortunadamente, trabajar en la huela de carbono de una página web es. en los mejores de los días, difícil e impreciso. Aquí están mis cálculos:

  • Un estudio del Lawrence Berkely National Laboratory sugiere que toma 13kWh transmitir 1GB.
  • De acuerdo con EPA, Agencia de Protección Ambiental de los Estados Unidos, la planta de energía promedio de los EE. UU. emite 1.2 libras de dióxido de carbono equivalente (CO2e) por kWh producido (otros países tienen mayores o menores promedios, dependiendo de su política de energía).
  • Si multiplicamos 13kWh por 1.2 libras, tenemos 15.6 libras de CO2e —eso es solo para transferir 1GB de datos.
  • Si un millón de usuarios descargan una página web que ahora borda 1.4 MB, es un total de 1367GB de datos.
  • Al menos 15.6 libras por gigabyte, eso es más de diez toneladas de CO2e.
  • Los datos móviles, con su dependencia en redes 3G/4G, es más de cinco veces más contaminante —77 libras de CO2 por gigabyte, que genera un total de 52 toneladas d CO2.

Basado en estas cifras, podemos estimar que una página web del tamaño de Tumblr, con 183 millones de vistas al día, de los cuales, 10% de estas se realizan desde móviles, tiene el potencial de ser el responsable de unas impactantes 2600 toneladas de CO2 al día.

Eso no toma en cuenta factores importantes como cuánta electricidad de los centros de datos viene de combustibles fósiles renovables o de uso de electricidad por parte del usuario. Pero estas cifras nos dan luces para ver la relación entre el tamaño de una página y la huella de carbono —y hacer claro que acortar gigabytes ahorra CO2.

¿El primer donde debemos empezar a recortar? Nuestros diseños.

Reduciendo el CO2 limitando la inflación de páginas

Con 1.4MB, el promedio de una página web es 15 veces más grande de lo que era hace diez años. Esto se debe, principalmente, a las imágenes (881kB) y el script (24kB). El viejo y sencillo HTML solo pesa 54kB, pero ¿cuándo fue la última vez que viste una página web con solo HTML?  Esta página promedio también realiza más de 100 solicitudes. Ya sea que extraiga un objeto grande o pequeño, estas añaden más demora y desperdicio de energía.

Presupuesto para una página web reducida, sencilla y verde.

Nadie se propone, intencionalmente, construir una página web de 1.4MB, pero, con frecuencia, los clientes piden imágenes llamativas, funciones de medios sociales avanzadas y muchos elementos extra de diseño. Eso es, más o menos, lo que hace una página de tal  tamaño. La mejor forma de prevenir este tipo de obesidad es establecer un presupuesto para el tamaño de una página: empieza con tamaño meta y mantente firme.

Pegarse al presupuesto de página significa considerar el peso de datos en cada etapa de diseño.

Estrategia de contenidos: Si estás readaptando una página para reducir su peso, un truco puede ser cambiar contenido de alto peso por alternativas menos pesadas, como imágenes en vez de videos o texto en vez de imágenes —siempre y cuando se logren los objetivos del usuario y la empresa. Mejor aun, si tienes un enfoque contente first (primero el contenido), puedes incluir tus consideraciones de tamaño en tu estrategia de contenidos para hacer apropiadas las opciones de contenidos para la audiencia y el presupuesto de datos.

Diseño de interacción: La fase de definición de experiencia del diseño es el momento perfecto para interceptar las características hambrientas de datos que amenaza el presupuesto de datos. El siempre presente carrusel es una de estas amenazas. Un típico carrusel tiene de tres a sis imágenes grandes, además del JavaScript que se necesita para que se mueva, y que, por lo general, añade cientos de kilobytes. El valor de los carruseles es debatible. Otros candidatos que puedes reconsiderar son los botones para compartir, mapas, videos con autoreproducción,, Flash, publicidad servicios de contenidos de terceras partes —todos estas características vienen con un un considerable tamaño de datos.

Diseño visual: Para la mayoría de páginas web, las imágenes son parte más grande de un huella de carbono (un promedio de 60%), y son oportunas para la reducción de datos. Para empezar, ¿puedes vivir con menos imágenes? Muchas imágenes en la web también son almacenadas en el formato incorrecto y mal optimizadas. Servicios gratuitos como smush.it puedes optimizar tus imágenes  mejor que tu herramienta de edición regular, y también mejorar el procesamiento.

Consolidar todas las imágenes pequeñas de tu página web usando CSS srpites o web ico fonts te ahorrará datos y solicitudes HTTP: los íconos CSS puros son la opción de menos peso cuando el soporte del navegador las alcanza. Asimismo, debido a que los datos móviles son muchos más contaminantes que los datos regulares, asegúrate que las páginas web responsive usen una solución de imágenes responsive. Una buena optimización puede ahorrar 72& de peso móvil de imágenes.

Diseño de código: La optimización front-end está floreciendo y dando frutos: los scripts encogidos, las descargas comprimidas, y la combinación de archivos pueden ayudar a reducir los datos elevados y las solicitudes de HTTP. Para una prueba, coloca el Google Page Speed en tu página web y este identificará qué técnicas se pueden aplicar para hacerla más rápida.

Hosting verde: Incluso antes de minimizar la huela de carbono de tu página web a través del diseño y la optimización. podrías considerar un servicio de hosting verde. La mayoría de estos utilizan energía renovable, en especial en Islandia, donde los centros de datos toman ventaja de la energía geotermal barata. Un hosting verde tal vez no se para todos (puede ser más caro, e Islandia puede estar lejos de tus clientes), pero ya están empezando a emerger más servicios de hosting verde. Algunos servicios basados en la nube también están empezando a ser más amigables con el medio ambiente: Google, Apple y Rackspace obtienen parte de su energía de fuentes renovables, de acuerdo con Greenpace.

Compensa el resto: Incluso después de aplicar un diseño reducido, optimizar y haber movido una página web a un host verde, tu página aún tiene una huella de carbono. Para representar eso, puedes comprar un compensador, que por lo general cuesta $19 por tonalada, dependiendo de proyecto. La compensación, en realidad, no quita el CO2 de la atmósfera, y es una sustituto pobre para reducir las emisiones. Sin embargo, muchos programas tienen beneficios adicionales, como patrocinar  la educación en países en vía de desarrollo o proteger los hábitats frágiles.

Animando a las personas

Optimizar las páginas web para tener menos emisiones es equivalente a optimizarla para obtener un buen rendimiento general, así que las empresas que no son verdes tienen muchas razones para poner sus páginas web a dieta, especialmente las móviles. Además, tienen mejore conversiones o favorecen el SEO.

Añadir el beneficio del clima a la lista crea un abrumante caso para reducir el tamaño y los datos de las páginas web, en especial para empresas que tienen simpatía por la causa climática (como aquellas que han firmado la Declaración del clima.

El Internet como el héroe del clima

Pese a su gran huella de carbono, el internet también puede ser un salvador del clima. La transición de las antiguas industrias y servicios al internet tiene el potencial de ahorra ocho mil millones de CO2 para el 2020, más que contrabalancear el proyectado 1.4 mil millones de toneladas de huellas de carbono para el 2020.

Por ejemplo:

  • La teleconferencia ha ahorrado los viajes de negocios en un 30%.
  • El compartir casas (como AirBnB) es 66% más eficiente que hospedarse en un hotel.
  • Los servicios para compartir autos están quitando autos de las pistas —hasta 20 carro regulares por uno compartido, de acuerdo con ZipCar.

Aunque seguimos con estos cambios hacia una economía online creciente, pronto estaremos dando la bienvenida a cinco mil millones de usuarios de internet. Mientras que el compartimiento general de contaminación mundial del internet sigue en aumento, los responsables por los cambios climáticos son aquellos que lo crean. Pero al seguir reduciendo y reduciendo, podemos reducir el daño, y crear clientes felices y mejora las empresas.

Tal vez estamos condicionados a optar por opciones amigables con el medio ambiente como sacrificios, pero de eso no se trata la Web. Podemos tener páginas web más limpias y verdes mientras hacemos felices a los clientes y mejoramos los resultados. Y mientras al problema es grande, como cualquier dietista te diría, poco a poco se ven los resultados. ¿Por qué no empezar ahora?

En Staff Digital tenemos en cuenta nuestro medio ambiente, por eso trabajamos con las mejores tecnologías que nos ayudan que tu página web pese menos, pero que conserve la calidad. Haciendo esto, ¡todos salimos ganando! Sé parte del cambio web y ¡contáctanos!

Luiggi Santa María

Luiggi Santa María

CEO de Staff Digital. Experto en Diseño Web Gráfico y Publicitario.

Deja una respuesta