En este post/boletín ¹, que es un manifiesto por la sostenibilidad web, plasmamos nuestros principios a la hora de desarrollar un sitio web.

Estoy orgulloso de tener un sitio web sostenible, como Blogpocket; y de saber hacerlo. Es mi pequeño grano de arena para cuidar el medio ambiento y mi ínfima aportación para salvar el planeta.

En Blogpocket, reconocemos la sostenibilidad digital como un componente integral de nuestro enfoque general hacia la sostenibilidad, abordándola a través de prácticas como la utilización de energía limpia en el hosting que utilizamos, en la optimización de imágenes y videos para reducir la carga energética, y fomento de un diseño web sostenible. Además, no solo Blogpocket sino todos los sitios sitios web que desarrollamos se adhieren a los principios de diseño web sostenible y están en constante revisión para mejorar su accesibilidad, usabilidad y sostenibilidad ²

El manifiesto por la sostenibilidad web

Los siguientes principios marcan nuestro camino para garantizar que tanto nuestros sitios web como los que desarrollemos para tereceros sean lo más sostenibles, accesibles y fáciles de usar posible. Es nuestro manifiesto por la sostenibilidad web.

Alojamiento ecológico

Nuestros proveedores de alojamiento deben ser ecológicos, lo que significa que la energía que hace funcionar sus centros de datos y aloja nuestros sitios (o los que desarrollemos para otros) se genera a partir de fuentes limpias y sostenibles, como la energía eólica, solar o hidroeléctrica.

Puedes ejecutar el test de Beacon para saber si tu hosting es ecológico. En la imagen anterior, se muestra el mensaje «This website is hosted using renewable energy or carbon offsets.» (Este sitio web está alojado utilizando energía renovable o compensaciones de carbono.)

En Blogpocket utilizamos GreenGeeks y SiteGround. Ambos proveedores están calificados como «verdes».

Lee el apartado «¿Qué significa que el proveedor de hosting sea ecológico?» del post Dónde y cómo alojar un sitio web de WordPress para más información sobre servicios de alojamiento ecológicos, pero un primer paso sería buscar un alojamiento ecológico en el directorio de The Green Web Foundation, que enumera más de 500 proveedores de alojamiento en todo el mundo que tienen un compromiso tangible con el uso de energía verde en sus centros de datos.

Imágenes optimizadas

Se debe reducir la carga de energía de las imágenes guardándolas en formatos energéticamente eficientes como SVG y WebP que no comprometen la calidad de la imagen.

En Blogpocket, todas las imágenes propias se sirven en el formato WebP, lo que redunda tanto en el rendimiento como en la sostenibilidad.

Lee el post Cómo optimizar imágenes para WordPress – Y uso de WebP para más información.

Modo oscuro

Se debe introducir una función de cambio de tema que proporcione a los visitantes la opción de ver el sitio web en «modo oscuro» para ahorrar energía en la pantalla.

En Blogpocket, lo hacemos mediante el plugin One Click Accesibility. Para ello, a nivel de usuario, solo hay que hacer clic en el botón de accesibilidad y luego elegir la opción «Alto contraste» (ver imagen anterior).

Optimizar los vídeos

Se debe agregar un botón de reproducción/pausa a todos los videos. Y siempre que sea posible se debería trabajar para sustituir los vídeos por animaciones, ilustraciones e imágenes estáticas.

En Blogpocket, los vídeos de YouTube y Vimeo, más los que están alojados en nuestro servicio de alojamiento, se pueden pausar. Además, los vídeos de YouTube están bloqueados por defecto (por motivos legales y RGPD).

Priorizar la sostenibilidad en el diseño

Se debe capacitar a los equipos de trabajo y desarrollo, sobre las mejores prácticas de diseño web sostenible para garantizar que diseñadores, desarrolladores y gerentes de productos adopten un pensamiento de diseño que priorice la sostenibilidad.

En Blogpocket, esta es una prioridad innegociable.

Las páginas de un sitio web deben pesar menos de 512KB

Se debe trabajar con un presupuesto objetivo de 512 KB por cada página (o, al menos 1MB) para mejorar el rendimiento WPO y la sostenibilidad y garantizar que cada activo agregue valor a la experiencia de usuario.

La optimización del rendimiento debe estar orientada a mejorar lo máximo posible la velocidad de carga de las páginas. Dentro de ese enfoque, es fundamental conseguir páginas que pesen menos de 512KB o, al menos, 1MB.

Lee WPO en un hosting de élite: cómo optimizar un sitio web de WordPress, para más información.

Podemos decir con orgullo y satisfacción que Blogpocket pertenece al club 512KB, como puedes observar en la imagen del primer apartado «Alojamiento ecológico», dentro de este artículo.

Documentos oficiales

Queremos que nuestros sitios web, y los que desarrollamos para terceros, cumplan con las Pautas de accesibilidad al contenido web (WCAG) Versión 2.1 Nivel AA y que sean probados usando la metodología reconocida internacionalmente para calcular las emisiones digitales de carbono.

Cómo medir el nivel de sostenibilidad de tu sitio web rápidamente

Puedes usar los dos servicios siguientes para examinar los niveles de cumplimiento de la sostenibilidad de tu sitio web, de manera fácil, sencilla y rápida:

• ¿Qué cantidad de CO2 emite tu sitio web? La página home de Blogpocket emite tan solo 0.02g of CO2. Esas emisiones equivalen a la cantidad de carbono que absorbe 1 árbol en un año.
• ¿Cuántos KB pesan las páginas de tu sitio web? Como se dijo antes, las páginas de Blogpocket pesan menos de 512KB. Por ejemplo, la página home tiene 105,31 KB (según Ecograder) y 102.85 KB (en primera visita, según Digital Beacon). En el test de Digital Beacon, además, se arroja un resultado de 44,29 KB en una visita recurrente). Lo cual son valores excepcionales. Lee Cómo hemos creado una versión 512K del sitio web de Blogpocket para tener una idea general de cómo optimizar un sitio web para reducir el peso de sus páginas.
• ¿Cúantos segundos tarda en cargar tu sitio web? Lee ¿Qué son Core Web Vitals o métricas web principales? Y cómo optimizarlas. Una forma rápida para dar idea de la velocidad de carga de una página de tu sitio web es usar la consola de javascript de Google Chrome. Lee la información oficial sobre Core Web Vitals. También puedes medir con la herramienta clásica Pingdom, aunque esta no es muy precisa. Según el test PageSpeed Insights, Blogpocket tiene en ordenador un First Contentful Paint y un Renderizado del mayor elemento con contenido de 0,8 segs., con un Speed Index también de 0,8 segs.; lo cual entra dentro de los márgenes óptimos.

¿Y qué hay de GTMetrix? GTMetrix ha pasado a ser una herramienta de pago por lo que -aunque era ideal para medir la velocidad y el rendimiento- ahora es más ingrata de usar.

Conclusiones

En Blogpcket, estamos comprometidos con el diseño y desarrollo web sostenible. Hemos visto los principios en los que nos basamos, en una especie de manifiesto por la sostenibilidad web, pero te recomendamos:

• Optimizar el contenido web para minimizar la huella de carbono digital.
• Ampliar el uso de energías renovables para todos los procesos digitales.
• Fomentar entre los usuarios el uso de opciones de bajo consumo como el «modo oscuro».
• Implementar iniciativas de formación sobre sostenibilidad digital para diseñadores y desarrolladores.
• Mejorar el SEO de los contenidos para facilitar su localización con menor consumo energético.

¿Estás de acuerdo con este manifiesto? ¿Qué medidas aplicas en tus sitios web para que sea sostenible?

Relacionado

• WP al día nº 318 – La importancia del diseño web sostenible
• WP al día nº 313: Como construir un sitio web de WordPress 100% sostenible y rápido

Las imágenes de esta publicación han sido generadas en Bing Copilot con el prompt: «Foto hiperrealista en la que se inspire la idea de desarrollo web sostenible y cuidadoso con el medio ambiente.»

1. Esta publicación es transversal, puedes leerla directamente en el blog, recibirlo en la bandeja de entrada de tu cliente de correo electrónico o leerlo también en el fediverso. Suscríbete. ↩︎
2. ¡Y también legalidad y seguridad! ↩︎