DEV Community

Yel SEO Dev profile image Yel Martínez
Yel Martínez for Yel SEO Dev

Posted on

Calculé la huella de carbono real de mi propio portfolio, paso a paso

#sostenibilidad #webperf #greentech #opensource

El resultado antes que el proceso: 0,014 g CO₂eq por visita

Mi portfolio (yel-martinez-portfolio.com) emite 0,014 gramos de CO₂ equivalente por visita. La mediana de la web según HTTP Archive 2024 es 0,50 g/visita. Eso significa que mi sitio pesa, en términos de carbono, unas 35 veces menos que una página web mediana.

No es una cifra de marketing. Es el resultado real de aplicar mi propia herramienta — Carbon Calculator, un cálculo de huella de carbono web open source que desarrollé — contra mi propio sitio, midiendo cada byte real con las herramientas del propio navegador, no con una estimación de cabecera.

Este artículo no es una página de producto. Es el "cómo" completo: la metodología, el código exacto, y por qué el resultado es el que es — incluyendo un matiz sobre hosting verde que la mayoría de calculadoras de carbono web no explican.

El modelo: Sustainable Web Design v3

Mi calculadora implementa el modelo SWD v3 (metodología pública, implementación propia — sin llamar a ninguna API de terceros desde la versión 3.2.0). El modelo reparte el consumo energético de una página en cuatro segmentos:

var SWD = {
    KWH_PER_GB:  0.81,   // kWh consumidos por GB transferido
    DATACENTER:  0.15,   // 15% del consumo: servidor/CDN
    NETWORK:     0.14,   // 14%: redes de transporte
    DEVICE:      0.52,   // 52%: el dispositivo de quien visita
    PRODUCTION:  0.19,   // 19%: fabricación del hardware, amortizada
    RENEWABLES:  50,     // gCO2/kWh — factor residual si el hosting es 100% verde certificado
};
Enter fullscreen mode Exit fullscreen mode

El dato que sorprende a casi todo el mundo la primera vez que lo ve: el datacenter es solo el 15% del consumo total. El dispositivo de quien navega (tu móvil, tu portátil) pesa más del triple. Esto tiene una consecuencia directa que explico más abajo.

La intensidad de carbono de la red eléctrica se cita país por país, cada una a su fuente oficial individual — no a un dataset agregado de terceros:

var INTENSITY = {
    ESP: { v:129,   year:2024, source:'European Environment Agency (EEA)' },
    DEU: { v:298,   year:2024, source:'European Environment Agency (EEA)' },
    FRA: { v:43,    year:2024, source:'European Environment Agency (EEA)' },
    USA: { v:367.4, year:2023, source:'U.S. Energy Information Administration (EIA)' },
    WORLD: { v:445, year:2024, source:'International Energy Agency (IEA), Electricity 2025' },
};
Enter fullscreen mode Exit fullscreen mode

Paso 1 — Medir el peso real de la página (no un número inventado)

La mayoría de calculadoras de carbono web piden que pegues una URL y confían en un crawler externo. Yo quería el dato real de mi propio navegador, así que usé la Performance API directamente:

const entries = performance.getEntriesByType('resource');
const nav = performance.getEntriesByType('navigation')[0];
let totalEncoded = nav.encodedBodySize;
for (const e of entries) totalEncoded += e.encodedBodySize || 0;
Enter fullscreen mode Exit fullscreen mode

Resultado, con la página completamente cargada (incluido scroll hasta el final, por si algo cargaba en diferido):

Recurso Peso
Documento HTML 10,4 KB
CSS (bundle único de Astro) 34,5 KB
CSS de Google Fonts 0,3 KB
Total 45,2 KB — 4 peticiones

Cero imágenes. No es que las comprimiera mucho — es que no hay ninguna petición de imagen en la carga de la home. El sitio usa SVG inline en cada icono y cada pieza gráfica (lo vengo haciendo en todas las herramientas de la suite, no solo aquí), así que no hay ni una sola petición de red para gráficos. Esa decisión de diseño, tomada meses antes de pensar en calcular nada, es la que más pesa en el resultado final — más que cualquier optimización de hosting.

Paso 2 — Verificar el hosting, no asumirlo

Mi sitio está detrás de Cloudflare. Antes de asumir que eso cuenta como "verde", lo comprobé contra la API pública de Green Web Foundation:

curl https://api.thegreenwebfoundation.org/greencheck/yel-martinez-portfolio.com
Enter fullscreen mode Exit fullscreen mode 
{
  "hosted_by": "Cloudflare",
  "green": true,
  "supporting_documents": [
    {"title": "Cloudflare 2023 Emissions Inventory", "link": "..."}
  ]
}
Enter fullscreen mode Exit fullscreen mode

Confirmado con documentación de respaldo real, no solo una etiqueta. Esto activa el factor RENEWABLES (50 gCO₂/kWh) en vez de la intensidad de red del país — pero solo para el segmento de datacenter, ese 15% del total. Es el matiz que casi nadie explica: contratar hosting verde no "limpia" el 85% restante del consumo (red, dispositivo, fabricación), que sigue calculándose con la media mundial de la red eléctrica porque no depende de dónde esté el servidor.

Paso 3 — Aplicar la fórmula 

function swdPerByte(bytes, isGreen, gridIntensity) {
    var gb = bytes / 1e9;
    var kwh = gb * SWD.KWH_PER_GB;

    var dcEnergy  = kwh * SWD.DATACENTER;
    var netEnergy = kwh * SWD.NETWORK;
    var devEnergy = kwh * SWD.DEVICE;
    var proEnergy = kwh * SWD.PRODUCTION;

    var gridDC  = isGreen ? SWD.RENEWABLES : gridIntensity;
    var gridNet = INTENSITY.WORLD.v;
    var gridDev = INTENSITY.WORLD.v;

    return dcEnergy*gridDC + netEnergy*gridNet + devEnergy*gridDev + proEnergy*INTENSITY.WORLD.v;
}
Enter fullscreen mode Exit fullscreen mode

Con mis 45.196 bytes reales y hosting verde confirmado:

GB transferidos:     0,000045196
kWh consumidos:      0,0000366
gCO2eq por visita:   0,0141
Rating SWD v3:       A
Enter fullscreen mode Exit fullscreen mode

Dato curioso al comprobarlo: si mi hosting no fuera verde y estuviera en un datacenter en España (129 gCO₂/kWh, uno de los mixes eléctricos más limpios de Europa gracias a la eólica y la solar), el resultado apenas cambia — 0,0146 g/visita, sigue siendo rating A. La razón es la misma de antes: el datacenter es solo el 15% del pastel. Cuando la página ya pesa 45 KB, no hay mucho margen para que el hosting mueva la aguja.

La comparación que importa

Mi propia herramienta cita HTTP Archive 2024 como referencia sectorial: la mediana de la web es 0,50 g CO₂eq por visita. Mi portfolio está en 0,014 g — 35 veces menos.

Proyectado a tráfico real:

Visitas/mes CO₂eq/mes CO₂eq/año
1.000 14 mg 0,17 g
5.000 71 mg 0,85 g
10.000 141 mg 1,69 g

Para contexto: un sitio en la mediana del sector, con el mismo tráfico de 10.000 visitas/mes, emitiría del orden de 60 g CO₂eq/año — 35 veces más que el mío con el mismo volumen de visitas.

Lo que se puede replicar (sin depender de mi herramienta)

  1. Mide de verdad, no estimes. performance.getEntriesByType('resource') en la consola de cualquier navegador te da el peso real de tu página en segundos, gratis, sin instalar nada.
  2. Verifica el hosting verde en vez de confiar en el marketing del proveedor. La API de Green Web Foundation es pública y gratuita: api.thegreenwebfoundation.org/greencheck/tudominio.com.
  3. El diseño pesa más que el hosting. Si tu página tiene fotos de stock de 2 MB, ningún certificado de hosting verde va a compensar eso — el dispositivo de quien te visita (52% del consumo en el modelo SWD) va a quemar esa energía sí o sí.
  4. SVG inline en vez de imágenes elimina peticiones de red por completo para iconografía y gráficos simples — es la palanca individual más grande que usé aquí, y no tiene nada que ver con "sostenibilidad" en el sentido tradicional, es simplemente buena ingeniería frontend.

Código y herramienta

Yel Martínez — Digital Strategist & Technologist. Desarrollo herramientas ESG open source (Carbon Calculator, YM Analytics Intelligence, Greenwashing Audit Toolkit, entre otras) sin dependencias de terceros y con la metodología siempre citada a su fuente original.

Top comments (0)