| title | description |
|---|---|
Documentación ecológica |
Aprende cómo Starlight puede ayudarte a construir sitios de documentación más ecológicos y reducir tu huella de carbono. |
Las estimaciones del impacto climático de la industria web oscilan entre el 2% y el 4% de las emisiones globales de carbono, equivalente aproximadamente a las emisiones de la industria de la aviación. Hay muchos factores complejos en el cálculo del impacto ecológico de un sitio web, pero esta guía incluye algunos consejos para reducir la huella ambiental de tu sitio de documentación.
La buena noticia es que elegir Starlight es un excelente comienzo. Según el Website Carbon Calculator, este sitio es más limpio que el 99% de las páginas web analizadas, produciendo 0.01g de CO₂ por visita a la página.
Cuanto más datos transfiera una página web, más recursos energéticos requerirá. En abril de 2023, la mediana de una página web requería que un usuario descargara más de 2.000 KB, según los datos del HTTP Archive.
Starlight construye páginas que son lo más livianas posible. Por ejemplo, en una primera visita, un usuario descargará menos de 50 KB de datos comprimidos, lo que representa solo el 2.5% de la mediana del archivo HTTP. Con una buena estrategia de almacenamiento en caché, las navegaciones posteriores pueden descargar tan solo 10 KB.
Si bien Starlight proporciona una buena base, las imágenes que agregas a tus páginas de documentación pueden aumentar rápidamente el peso de la página. Starlight utiliza el soporte de assets optimizados de Astro para optimizar las imágenes locales en tus archivos Markdown y MDX.
Los componentes construidos con frameworks UI como React o Vue pueden añadir fácilmente grandes cantidades de JavaScript a una página. Sin embargo, debido a que Starlight está construido sobre Astro, los componentes como estos no cargan ningún JavaScript del lado del cliente de forma predeterminada, gracias a las islas de Astro.
La caché se utiliza para controlar cuánto tiempo un navegador almacena y reutiliza los datos que ha estado descargando. Una buena estrategia de caché asegura que un usuario obtenga nuevo contenido tan pronto como sea posible cuando está cambiando, pero también evita descargar innecesariamente el mismo contenido una y otra vez cuando no ha estado cambiando.
La forma más común de configurar la caché es mediante la cabecera HTTP Cache-Control. Al utilizar Starlight, puedes establecer un tiempo de caché prolongado para todo lo que se encuentra en el directorio /_astro/. Este directorio contiene CSS, JavaScript y otros activos empaquetados que se pueden almacenar en caché de forma segura para siempre, reduciendo las descargas innecesarias.
Cache-Control: public, max-age=604800, immutable
Cómo configurar la caché depende de tu proveedor de alojamiento web. Por ejemplo, Vercel aplica automáticamente esta estrategia de caché sin necesidad de configuración, mientras que en Netlify puedes establecer cabeceras personalizadas añadiendo un archivo public/_headers a tu proyecto:
/_astro/*
Cache-Control: public
Cache-Control: max-age=604800
Cache-Control: immutable
La forma en que se construye una página web puede afectar la cantidad de energía necesaria para que funcione en el dispositivo de un usuario. Al utilizar un JavaScript mínimo, Starlight reduce la cantidad de potencia de procesamiento que necesita el teléfono, la tableta o la computadora de un usuario para cargar y renderizar las páginas.
Ten en cuenta que al agregar funciones como scripts de seguimiento de análisis o contenido pesado en JavaScript como incrustaciones de video, esto puede aumentar el consumo de energía de la página. Si necesitas analíticas, considera elegir una opción liviana como Cabin, Fathom o Plausible. Las incrustaciones de videos de servicios como YouTube y Vimeo se pueden mejorar al cargar el video cuando haya interacción del usuario. Paquetes como astro-embed pueden ser útiles para servicios comunes.
:::tip[¿Sabías esto?] El análisis y compilación de JavaScript es una de las tareas más costosas que los navegadores deben realizar. En comparación con el renderizado de una imagen JPEG del mismo tamaño, el procesamiento de JavaScript puede llevar más de 30 veces más tiempo. :::
El lugar donde se hospeda una página web puede tener un gran impacto en la ecología de tu sitio de documentación. Los centros de datos y las granjas de servidores pueden tener un alto consumo de electricidad y un uso intensivo del agua.
Elegir un proveedor de alojamiento que utilice energía renovable significa tener emisiones de carbono más bajas para tu sitio. El Directorio de la Web Ecológica es una herramienta que puede ayudarte a encontrar empresas de alojamiento.
¿Curioso por saber cómo se comparan otros frameworks de documentación? Estas pruebas con el Calculadora de Carbono de Sitios Web comparan páginas similares construidas con diferentes herramientas.
| Framework | CO₂ por visita a la página |
|---|---|
| Starlight | 0.01g |
| VitePress | 0.05g |
| Docus | 0.05g |
| Sphinx | 0.07g |
| MkDocs | 0.10g |
| Nextra | 0.11g |
| docsify | 0.11g |
| Docusaurus | 0.24g |
| Read the Docs | 0.24g |
| GitBook | 0.71g |
Datos recopilados el 14 de mayo de 2023. Haz clic en un enlace para ver cifras actualizadas.
- “Construyendo una web más ecológica”, charla de Michelle Barker
- “Estrategias de desarrollo web sostenible dentro de una organización”, artículo de Michelle Barker
- “Una web sostenible para todos”, charla de Tom Greenwood
- “Cómo el contenido web puede afectar el consumo de energía”, artículo de Benjamin Poulain y Simon Fraser