Lección 14Para profundizar, algunas prácticas de código
- Noción 86 - Introducción a las prácticas de código de diseño web ecológico con el proyecto The Good Manager
- Noción 87 - Código limpio para la eficiencia energética
- Noción 88 - Código asíncrono: hacer más en menos tiempo
- Noción 89 - Servidores más eficaces y con menos recursos
- Noción 90 - Gestión de la carga de trabajo del servidor
- Noción 91 - Uso de bibliotecas externas: el ejemplo de las CDN de Bootstrap
- Noción 92 - Repaso de las prácticas de codificación
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
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á:
- Más información sobre nuestras opciones técnicas en los registros del proyecto: https://thegoodmanager.eu/en/project-logs