Autosustentabilidade

Medição e Monitoramento

Como medir e monitorar impacto ambiental de websites.

Por que Medir Sustentabilidade?

Medir permite:

  • Identificar problemas: Encontrar onde há maior impacto
  • Validar melhorias: Confirmar que otimizações funcionam
  • Tomar decisões: Baseadas em dados reais
  • Comunicar impacto: Mostrar esforços de sustentabilidade

Métricas de Sustentabilidade

Carbon Footprint

Emissões de carbono do site:

  • Energia consumida: Servidor, rede, dispositivos
  • Dados transferidos: Mais dados = mais energia
  • Requisições: Cada requisição consome energia
  • Processamento: CPU e memória consomem energia

Energy Consumption

Consumo de energia:

  • Servidor: Energia do data center
  • Rede: Energia de transmissão
  • Cliente: Energia do dispositivo do usuário
  • Total: Soma de todos os componentes

Data Transfer

Dados transferidos:

  • Tamanho de página: HTML, CSS, JS, imagens
  • Requisições: Número de requisições HTTP
  • Compressão: Eficiência de compressão
  • Cache hit rate: Taxa de cache

Ferramentas de Medição

Website Carbon Calculator

// API do Website Carbon Calculator
// https://www.websitecarbon.com/

async function calculateCarbon(url) {
  const response = await fetch(`https://api.websitecarbon.com/site?url=${url}`);
  const data = await response.json();
  
  return {
    carbon: data.statistics.co2.grams,
    cleanerThan: data.statistics.co2.cleanerThan,
    energy: data.statistics.energy
  };
}

Green Web Foundation API

// Verificar se hosting é verde
async function checkGreenHosting(domain) {
  const response = await fetch(
    `https://api.thegreenwebfoundation.org/greencheck/${domain}`
  );
  const data = await response.json();
  
  return {
    green: data.green,
    hostedBy: data.hostedby,
    url: data.url
  };
}

Ecograder

// Análise completa de sustentabilidade
// https://ecograder.com/

async function analyzeSustainability(url) {
  // Ecograder fornece análise completa
  // Inclui: carbon, energy, performance, etc.
  const analysis = await fetchEcograderData(url);
  
  return {
    score: analysis.score,
    carbon: analysis.carbon,
    energy: analysis.energy,
    recommendations: analysis.recommendations
  };
}

Métricas Customizadas

Calcular Carbon Footprint

function calculateCarbonFootprint(metrics) {
  // Fórmula simplificada
  const energyPerRequest = 0.001; // kWh por requisição
  const energyPerMB = 0.0001; // kWh por MB
  const carbonPerKWh = 0.5; // kg CO2 por kWh
  
  const totalEnergy = 
    (metrics.requests * energyPerRequest) +
    (metrics.dataTransferMB * energyPerMB);
  
  const carbonFootprint = totalEnergy * carbonPerKWh;
  
  return {
    energy: totalEnergy,
    carbon: carbonFootprint,
    unit: 'kg CO2'
  };
}

Monitorar Data Transfer

// Monitorar dados transferidos
class DataTransferMonitor {
  constructor() {
    this.totalBytes = 0;
    this.requests = 0;
    this.init();
  }
  
  init() {
    // Interceptar requisições
    const originalFetch = window.fetch;
    window.fetch = async (...args) => {
      const response = await originalFetch(...args);
      this.recordTransfer(response);
      return response;
    };
    
    // Monitorar recursos
    performance.getEntriesByType('resource').forEach(resource => {
      this.recordResource(resource);
    });
  }
  
  recordTransfer(response) {
    const contentLength = response.headers.get('content-length');
    if (contentLength) {
      this.totalBytes += parseInt(contentLength);
      this.requests++;
    }
  }
  
  recordResource(resource) {
    this.totalBytes += resource.transferSize || 0;
    this.requests++;
  }
  
  getMetrics() {
    return {
      totalBytes: this.totalBytes,
      totalMB: (this.totalBytes / 1024 / 1024).toFixed(2),
      requests: this.requests
    };
  }
}

const monitor = new DataTransferMonitor();

Dashboard de Sustentabilidade

Visualizar Métricas

function createSustainabilityDashboard(metrics) {
  const dashboard = document.createElement('div');
  dashboard.className = 'sustainability-dashboard';
  
  dashboard.innerHTML = `
    <h2>Sustentabilidade</h2>
    <div class="metrics">
      <div class="metric">
        <span class="label">Carbon Footprint:</span>
        <span class="value">${metrics.carbon} kg CO2</span>
      </div>
      <div class="metric">
        <span class="label">Energy:</span>
        <span class="value">${metrics.energy} kWh</span>
      </div>
      <div class="metric">
        <span class="label">Data Transfer:</span>
        <span class="value">${metrics.dataTransfer} MB</span>
      </div>
      <div class="metric">
        <span class="label">Green Hosting:</span>
        <span class="value">${metrics.greenHosting ? '' : ''}</span>
      </div>
    </div>
  `;
  
  return dashboard;
}

Alertas e Thresholds

Configurar Alertas

class SustainabilityAlerts {
  constructor() {
    this.thresholds = {
      carbon: 1.0, // kg CO2
      dataTransfer: 5.0, // MB
      requests: 50
    };
  }
  
  checkMetrics(metrics) {
    const alerts = [];
    
    if (metrics.carbon > this.thresholds.carbon) {
      alerts.push({
        type: 'warning',
        message: `Carbon footprint acima do threshold: ${metrics.carbon} kg CO2`
      });
    }
    
    if (metrics.dataTransfer > this.thresholds.dataTransfer) {
      alerts.push({
        type: 'warning',
        message: `Data transfer acima do threshold: ${metrics.dataTransfer} MB`
      });
    }
    
    return alerts;
  }
}

Integração com Analytics

Enviar para Analytics

function sendSustainabilityMetrics(metrics) {
  // Google Analytics
  gtag('event', 'sustainability', {
    carbon_footprint: metrics.carbon,
    energy_consumption: metrics.energy,
    data_transfer: metrics.dataTransfer,
    green_hosting: metrics.greenHosting
  });
  
  // Custom analytics
  fetch('/api/sustainability', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      ...metrics,
      timestamp: Date.now(),
      url: window.location.href
    })
  });
}

Monitoramento Contínuo

Coletar Métricas Regularmente

class SustainabilityMonitor {
  constructor() {
    this.metrics = {};
    this.collect();
  }
  
  async collect() {
    // Coletar métricas
    this.metrics.dataTransfer = this.getDataTransfer();
    this.metrics.requests = this.getRequests();
    
    // Calcular carbon footprint
    this.metrics.carbon = this.calculateCarbon(this.metrics);
    
    // Verificar green hosting
    this.metrics.greenHosting = await this.checkGreenHosting();
    
    // Enviar métricas
    this.sendMetrics();
  }
  
  getDataTransfer() {
    const resources = performance.getEntriesByType('resource');
    return resources.reduce((sum, r) => sum + (r.transferSize || 0), 0);
  }
  
  getRequests() {
    return performance.getEntriesByType('resource').length;
  }
  
  calculateCarbon(metrics) {
    // Fórmula simplificada
    const energyPerMB = 0.0001; // kWh
    const carbonPerKWh = 0.5; // kg CO2
    
    const energy = (metrics.dataTransfer / 1024 / 1024) * energyPerMB;
    return energy * carbonPerKWh;
  }
  
  async checkGreenHosting() {
    const domain = window.location.hostname;
    const response = await fetch(
      `https://api.thegreenwebfoundation.org/greencheck/${domain}`
    );
    const data = await response.json();
    return data.green;
  }
  
  sendMetrics() {
    // Enviar quando página fechar
    window.addEventListener('beforeunload', () => {
      navigator.sendBeacon(
        '/api/sustainability',
        JSON.stringify(this.metrics)
      );
    });
  }
}

new SustainabilityMonitor();

Relatórios

Gerar Relatório

function generateSustainabilityReport(metrics) {
  return {
    summary: {
      carbonFootprint: `${metrics.carbon} kg CO2`,
      energyConsumption: `${metrics.energy} kWh`,
      dataTransfer: `${metrics.dataTransfer} MB`,
      greenHosting: metrics.greenHosting ? 'Sim' : 'Não'
    },
    recommendations: [
      'Otimizar imagens',
      'Habilitar compressão',
      'Implementar cache',
      'Usar hosting verde'
    ],
    comparison: {
      cleanerThan: `${metrics.cleanerThan}% dos sites`
    }
  };
}

Checklist de Monitoramento

  • Carbon footprint calculado
  • Energy consumption monitorado
  • Data transfer medido
  • Green hosting verificado
  • Dashboard de métricas
  • Alertas configurados
  • Relatórios gerados
  • Integração com analytics
  • Monitoramento contínuo

Exemplo Completo

// Sistema completo de monitoramento de sustentabilidade
class SustainabilitySystem {
  constructor() {
    this.metrics = {};
    this.init();
  }
  
  async init() {
    // Coletar métricas iniciais
    await this.collectMetrics();
    
    // Configurar monitoramento contínuo
    this.setupContinuousMonitoring();
    
    // Criar dashboard
    this.createDashboard();
  }
  
  async collectMetrics() {
    // Data transfer
    const resources = performance.getEntriesByType('resource');
    const dataTransfer = resources.reduce(
      (sum, r) => sum + (r.transferSize || 0), 
      0
    );
    
    // Requests
    const requests = resources.length;
    
    // Carbon footprint
    const carbon = this.calculateCarbon(dataTransfer);
    
    // Green hosting
    const greenHosting = await this.checkGreenHosting();
    
    this.metrics = {
      dataTransfer: dataTransfer / 1024 / 1024, // MB
      requests,
      carbon,
      greenHosting,
      timestamp: Date.now()
    };
  }
  
  calculateCarbon(dataTransferBytes) {
    const dataTransferMB = dataTransferBytes / 1024 / 1024;
    const energyPerMB = 0.0001; // kWh
    const carbonPerKWh = 0.5; // kg CO2
    
    const energy = dataTransferMB * energyPerMB;
    return energy * carbonPerKWh;
  }
  
  async checkGreenHosting() {
    try {
      const domain = window.location.hostname;
      const response = await fetch(
        `https://api.thegreenwebfoundation.org/greencheck/${domain}`
      );
      const data = await response.json();
      return data.green;
    } catch (error) {
      return false;
    }
  }
  
  setupContinuousMonitoring() {
    // Coletar métricas periodicamente
    setInterval(() => {
      this.collectMetrics();
    }, 60000); // A cada minuto
    
    // Enviar quando página fechar
    window.addEventListener('beforeunload', () => {
      this.sendMetrics();
    });
  }
  
  createDashboard() {
    const dashboard = createSustainabilityDashboard(this.metrics);
    document.body.appendChild(dashboard);
  }
  
  sendMetrics() {
    navigator.sendBeacon(
      '/api/sustainability',
      JSON.stringify(this.metrics)
    );
  }
}

// Inicializar
new SustainabilitySystem();
Medir sustentabilidade é o primeiro passo. Use as métricas para identificar oportunidades de melhoria e validar que suas otimizações estão funcionando.