Tabla de contenidos
¿Cómo tener webs más sostenibles? ¿Qué recetas hay que seguir para que los sitios web contaminen menos? Con motivo del Día Mundial del Medio Ambiente (5 de junio), explicamos las técnicas y pautas que Omatech pone en práctica para que los proyectos digitales que desarrolla sean respetuosos con el medio ambiente. Entre todos, podemos conseguir un internet y un ecosistema de páginas web más sostenibles.
Más digitalización: menos papel, más huella de carbono
La proliferación de webs y la mayor digitalización de las empresas son buenas noticias para la salud de la masa forestal de nuestro planeta. La razón es que todo lo que pasa a un plano digital, ya no requiere (tanto) consumo de papel. Sin embargo, las webs consumen mucha electricidad, de manera que aumentan la huella de carbono. De hecho, existe el concepto de huella de carbono digital. Las webs y todo lo que está en la nube aumentan la huella de carbono digital.
Webs sostenibles para mejorar el planeta y la UX
¿Por qué necesitamos sitios web con más eficiencia energética?
- Menos contaminación. El primer beneficio tangible es una reducción de la contaminación del planeta. Cada vez hay más sitios web que, sumados, contaminan mucho. Si todas estas webs se optimizan con una visión sostenible, el impacto medioambiental disminuye.
- Mejora de SEO y experiencia de usuario. Desde una perspectiva de negocio, la sostenibilidad de una web es todo un activo. El motivo es que muchas de las características o pautas que hacen que un website sea verde, mejoran al mismo tiempo el SEO (Search Engine Optimization) y la experiencia de usuario. La user experience (UX) es una de las bases de una web de éxito, y es un principio que Omatech sabe elevar a las mayores cotas. Para nuestro equipo de diseño y de desarrolladores, la experiencia de usuario es la prioridad.
- Mejora de la reputación de la marca. Todavía hay poca conciencia sobre el valor intrínseco de la sostenibilidad en una web. Sin embargo, el público lo tiene cada vez más en cuenta. Por este motivo, las empresas que tienen la sostenibilidad en su ADN promueven webs y proyectos digitales que reflejan ese genoma. ¿Cómo puede una empresa comercializar productos y servicios sostenibles si su sitio web es poco sostenible?
¿Consume energía internet?
Cuando pensamos en internet y la nube, nos pueden parecer conceptos virtuales. De hecho, los usuarios solo ven interfaces y páginas web, sin atisbo de lo que hay entre bambalinas.
Pero la verdad es que estamos enviando y recibiendo datos en todo momento. Y todos estos datos se guardan, se procesan, se almacenan y se intercambian en gigantescos centros de datos repartidos por todo el mundo. Detrás de toda esta infraestructura hay superordenadores, que funcionan sin descanso y a toda marcha. Para evitar el sobrecalentamiento, hay sistemas de refrigeración de centros de datos, que también consumen mucha energía.
Con datos de 2019, todas las webs sumaban el 2% de las emisiones de gases de efecto invernadero. Toda esta contaminación se puede comparar a la que genera la industria aeronáutica mundial. Y es similar a la cantidad de emisiones que causa Alemania, el sexto país más contaminante del mundo.
¿Cuánto contamina una página web?
Según Website Carbon, web para calcular la contaminación digital de un sitio web, la media de emisiones por visita es de 0,54 gramos de CO2.
«Para una web con 10.000 visitas al mes, esto supone 65 kilogramos de CO2 por año»
Tendencia a webs más pesadas y más contaminantes
Las webs pesan cada vez más, tendencia que hace crecer la huella de carbono digital. Según datos de HTTP Archive, «el sitio web de escritorio promedio» pesaba 2038,4 kb en 2021. Es decir, poco más de dos megabytes (MB). En 2010, este dato era más de cuatro veces inferior: 467,7 kb.
En los años 90, los websites era muy rudimentarios, con archivos HTML muy sencillos e imágenes pequeñas. ¡Entonces había muchos GIFs de En construcción!
Han pasado más de 20 años, y cualquier web incluye varios archivos HTML, CSS y JavaScript. Además, incorporan muchas imágenes y vídeos. Y no nos olvidemos de las fuentes, que habría que limitar a un par o poco más, aunque muchos sitios web se prodigan con una excesiva variedad. A todo esto hay que sumar todo tipo de archivos.
Por tanto, el objetivo debería ser optimizar el peso de una web. No hace falta ser tan austeros como la web de la fundación de Elon Musk, que solo consta de 33 palabras sobre un fondo blanco. La idea, en cambio, es partir de una economía de recursos para lograr la mejor experiencia de usuario y la mayor eficacia comunicativa.
Objetivo: webs ligeras con el mejor diseño
Un sitio web sostenible no va nunca reñido con un diseño web atractivo y comprometido con la experiencia de usuario. Como hemos dicho, la sostenibilidad en el diseño de páginas web guarda relación con una óptima experiencia de usuario. Así, menores tiempos de carga y una buena usabilidad web son algunas de las características que definen a una web respetuosa con el medio ambiente.
Omatech, desarrollo web con criterios sostenibles
La agencia de proyectos digitales Omatech utiliza herramientas y sigue unas reglas de desarrollo web que facilitan la creación de webs y apps sostenibles.
Pautas para la sostenibilidad de las web en el desarrollo y en el mantenimiento:
- Imágenes más ligeras para una web sostenible
- Optimización de imágenes y vídeos
- Imaginator, para optimizar imágenes
- Uso estratégico del vídeo
- Gestión de la caché del navegador
- Carga diferida de la web
- Código optimizado para reducir el consumo energético
- La sostenibilidad de una buena experiencia de usuario
- Pocas tipografías para un sitio web sostenible
- Hosting de energía renovable
- Revisiones periódicas para ‘limpiar’ la web
Imágenes más ligeras para una web sostenible
Las imágenes con mucho peso son kriptonita para la sostenibilidad y para el SEO. Unas imágenes con mucho tamaño consumen más energía y tardan mucho en cargar. Se trata de un factor muy relevante, ya que buena parte del peso de una web son fotos y vídeos.
Por este motivo, podemos considerar que reducir las imágenes —tanto en peso como en número— es una de las formas más eficientes de hacer una web más ecológica.
Una vez la web está en marcha, se irán incorporando nuevas imágenes a través del gestor de contenidos. Utilicemos siempre imágenes que tengan un propósito
Optimización de imágenes y vídeos
Omatech optimiza imágenes y vídeos. Así, utiliza imágenes en next-gen formats, cuyas medidas se adaptan a cada resolución.
¿Qué son los formatos de imagen next-gen (nueva generación)? Son formatos ideales para webs. La razón es que tienen más compresión que formatos tradicionales como JPEG, PNG y GIF, y ofrecen una calidad de imagen similar
Imaginator, para optimizar imágenes
Omatech utiliza un herramienta propia, Imaginator, que facilita la optimización de cada nueva imagen que se publica en la web. Así, cuando el usuario sube una imagen al gestor de contenidos de la web, esta se guarda de forma automática en formato WebP. Además, se redimensiona según las medidas preestablecidas para cada dispositivo.
Uso estratégico del vídeo
El uso del vídeo en los proyectos web ha crecido de forma exponencial. Gracias al vídeo, podemos atraer la atención del usuario con más efectividad, cosa de mucha ayuda ahora que cuesta tanto tener atentos a los usuarios de las páginas web.
Ahora bien, los vídeos pesan mucho. Por eso es bueno reflexionar sobre el propósito exacto de un vídeo. En caso de que sea necesario recurrir a archivos de vídeo, hay que utilizar una resolución óptima. Además, no se debería recurrir al autoplay (el vídeo se reproduce solo).
Gestión de la caché del navegador
Todas las imágenes, vídeos y archivos de todo tipo están en caché durante un año en el navegador. Asimismo, en la mayoría de proyectos de Omatech también están en caché durante un año los archivos JavaScript y CSS, y las tipografías.
Si se hacen cambios, los ficheros se renombran de forma automática para que el usuario siempre reciba la versión correcta de todos los archivos.
Carga diferida de la web
La carga diferida, o lazy loading, significa un ahorro energético al limitar la carga de la página a todo aquello que es visible en la pantalla. En inglés, para hablar de esa área se utiliza el término above the fold.
Si haces scroll y vas hacia abajo, irás cargando más imágenes.
Código optimizado para reducir el consumo energético
Omatech escribe un código lo más limpio posible. Así, se minimizan hojas de estilo (stylesheets) y scripts. JavaScript y CSS tienen la menor presencia posible. Además, no se recurre a plugins, si no hacen falta.
De esta manera no solo se reduce el peso de la web, sino que también se reduce el número de peticiones HTTP necesarias para cargar una página
La sostenibilidad de una buena experiencia de usuario
Un sitio web con una buena usabilidad y experiencia de usuario permite que la persona que navega por la web encuentre lo que busca de la forma más eficiente posible. Esta eficiencia aumenta la satisfacción del usuario y reduce el tiempo de estancia en la web al estrictamente necesario, con el consiguiente ahorro energético.
Un usuario que está más tiempo en la web no siempre es algo positivo para esta. Cuando el usuario está desorientado y no da con lo que necesita, se trata de una mala noticia para la empresa propietaria del sitio web.
Pocas tipografías para un sitio web sostenible
La tipografía es cada vez más importante en el diseño web. Además de trasladar identidad corporativa, los tipos de letra influyen de forma determinante en la legibilidad y en la usabilidad.
El gran poder de la tipografía no debe llevarnos a utilizar un gran número de tipos de letra diferentes. La explicación es que, cuanta más variedad, habrá un mayor esfuerzo de carga de la web.
Otra pauta interesante es evitar las tipografías personalizadas, y recurrir a las estándar que están preinstaladas en la mayoría de dispositivos.
Hosting de energía renovable
Un hosting sostenible funciona con energías renovables. La elección de hosting se debe tomar a partir de varios criterios. Si deseamos crear un proyecto web decididamente sostenible, uno de los criterios debería ser también el tipo de energía que alimenta el hosting.
Revisiones periódicas para ‘limpiar’ la web
Una buena rutina es hacer limpiezas periódicas del sitio web para quitar todo aquello que no se esté utilizando. Hay que deshacerse de plugins o temas que no hagan falta, vídeos en desuso, posts descartados, hipervínculos rotos, comentarios de spam, categorías y tags, etc.
Cuanto más estilizada sea una página web, menos energía va a consumir
Un sitio web por la sostenibilidad
Una página web claramente sostenible debería presentar estas características:
- Fondo monocolor, sobre blanco o un color claro
- Uso de fuentes contrastadas y que los usuarios ya tienen cargadas, como Arial o Times New Roman
- Imágenes poco pesadas (los usuarios podrían tener la opción de hacerlas más grandes)
- Utilización de vídeos solo si aportan valor
- Opción de navegación con modo oscuro, para reducir el brillo de la pantalla y el consumo eléctrico
