The Good Manager  >  Módulos formativos

100 puntos a saber sobre...
Desarrollo de una web de diseño eco

100
puntos a saber sobre...
Volver al resumen del módulo

Noción 86

Introducción a las prácticas de código de diseño web ecológico con el proyecto The Good Manager

Competencias objetivo

Obtener una visión general de las prácticas de código usadas en el proyecto The Good Manager.

El sitio web de The Good Manager se ha diseñado y desarrollado siguiendo los principios del ecodiseño web. Las opciones de diseño e implementación están documentadas en el registro del proyecto (accesible a través del menú). En esta lección nos gustaría mostrar algunas buenas prácticas de desarrollo usadas para esta plataforma que podrían ser útiles para el ecodiseño web.

Seguimiento de usuarios

La privacidad es una preocupación importante, y el seguimiento de usuarios consume recursos, ya sea a través de la recopilación, almacenamiento y análisis de datos.

The Good Manager no rastrea a los usuarios, por lo que simplifica nuestro trabajo en relación con las obligaciones GDPR, además de mantener la plataforma libre de scripts de terceros que la harían más pesada.

Sitio web estático

El sitio web de The Good Manager se compone principalmente de contenido estático, lo que significa que no necesita un servidor web para generar páginas cada vez que un visitante las solicita. Las páginas se generan de antemano para reducir la carga del servidor, gracias a Gatsby ( https://www.gatsbyjs.com/ ). Por lo tanto, sólo necesitamos las características básicas de alojamiento para las páginas estáticas con un enfoque de baja tecnología, reduciendo nuestra huella.

Imágenes

Hemos usado imágenes svg para reducir su tamaño y optimizar su visualización. El peso total de las imágenes es actualmente de 26kb, que es realmente bajo.

De acuerdo con la documentación de Gatsby, aquí hay una lista de cómo Gatsby puede optimizar las imágenes:

  • Carga el tamaño óptimo de una imagen para cada tamaño de dispositivo y resolución de pantalla
  • Mantiene la posición de la imagen mientras se carga para que tu página no salte mientras se cargan las imágenes.
  • Usa el efecto "blur-up", es decir, carga una versión reducida de la imagen para mostrarla mientras se carga la imagen completa.
  • Carga las imágenes de forma diferida, lo que reduce la banda ancha y acelera el tiempo de carga inicial.
  • Usa imágenes WebP, si el navegador admite el formato.

Alojamiento

Este sitio web está alojado en Infomaniak (https://www.infomaniak.com/en), que tiene una política pública de energía sostenible. Al elegir una solución de alojamiento comercial en lugar del autoalojamiento, tratamos de aprovechar las economías de escala para reducir nuestra huella. Al estar alojados en un centro de datos ecológico, esperamos reducir nuestro consumo individual y beneficiarnos de la optimización y la gestión del hardware por parte de profesionales.

Para ir un poco más allá: