Pegada Ecológica (CO2) de um WebSite com foco em Green Coding

Até o dia 2 de janeiro de 2021 havia 1,826,089,359 sites disponíveis para acesso. Cada site contém propósitos distintos, entretanto o ponto comum entre eles é entregar algo de valor para o internauta. Essa entrega deve acontecer da melhor forma possível, nos formatos de experiência, entre eles existem vários fatores, como velocidade, usabilidade, facilidade, acessibilidade etc. Logo, se conseguimos um site que tenha um perfil de sustentabilidade também no foco, podemos otimizar vários fatores, gerando a entrega de valores mais eficientes.

Seja você iniciante ou expert no desenvolvimento de um site, saiba que existe um plugin para o navegador Chrome que consegue efetuar uma análise do site, através da verificação de boas práticas na utilização de código. O processo para utilização é bem simples:

  1. Instalar o Plugin: https://chrome.google.com/webstore/detail/greenit-analysis/mofbfhffeklkbebfclfaiifefjflcpad
  1. Carregar o site e abrir o Console DevTools (F12)
  1. Ir até a aba “GreenIT”, marcar a opção “Activate best practices analysis
  2. Clicar no botão “Launch Analysis

Após isto, será apresentada uma lista das verificações e os resultados coletados, além de uma nota geral para o site, que varia de A (mais eficiente) para G (menos eficiente), com base na Tabela de Eficiência Energética.

Add expires or cache-control headers (>= 95%)

Manter recursos (folhas de estilo CSS, scripts JavaScript e imagens) o maior tempo possível, para que o navegador não os solicite novamente do servidor. Economiza solicitações HTTP, largura de banda e potência da CPU no servidor.

Compress ressources (>= 95%)

O conteúdo das páginas HTML deve ser compactado para minimizar o consumo de largura de banda, entre o cliente e o servidor. 

Limit the number of domains (<3)

Limitar um máximo de três domínios para os recursos. Porque recursos hospedados em outro domínio lento, pode aumentar o tempo de renderização da página. A boa prática deve ser agrupar todos os recursos em um único domínio.

Don’t resize image in browser

Redimensionar imagens usando atributos HTML de altura e largura. Envia as imagens em seu tamanho original, desperdiçando largura de banda e energia da CPU. 

Avoid empty src tag

Tag de imagem com um atributo src vazio, gera solicitações HTTP adicionais desnecessárias.

Externalize css

Código CSS deve estar separado do código HTML da página, para evitar o aumento do volume de dados enviados. 

Externalize js

Garanta que o código JavaScript está separado do código HTML da página, para evitar o aumento do volume de dados enviados. 

Avoid HTTP request errors

As solicitações com erros HTTP consomem recursos desnecessariamente.

Limit the number of HTTP requests (<27)

Reduzir o número de solicitações por página é fundamental para diminuir o número de requisições HTTP necessários para executar o site e, consequentemente, o seu impacto ambiental.

Do not download unecessary image

Baixar imagens que não serão exibidas consome recursos desnecessários.

Validate js

Validar o seu código JavaScript com boas práticas garante a utilização eficiente da CPU por um período mais curto. O JSLint é uma ferramenta de qualidade de código JavaScript.

Max cookies length (<512 Bytes)

O comprimento do cookie deve ser pequeno, pois é enviado com cada solicitação.

Minified css (>= 95%)

Comprimir os recursos CSS garante somente itens essenciais para serem transferidos, removendo, por exemplo, espaços desnecessários e quebras de linha.

Minified js (>= 95%)

Comprimir os recursos JavaScript garante somente itens essenciais para serem transferidos, removendo, por exemplo, espaços desnecessários, quebras de linha, ponto e vírgula e encurtar nomes de variáveis locais.

No cookie for static resources

Recursos estáticos não utilizam cookies, logo consome largura de banda sem propósito.

Avoid redirect

Os redirecionamentos devem ser evitados, tanto quanto possível, pois tornam a resposta mais lenta.

Optimize bitmap images

Todas as imagens devem ser otimizadas, pois são os recursos que mais impactam na largura da banda consumida.

Optimize svg images

Imagens Svg também devem ser otimizadas e minimizadas.

Do not use plugins

Evite usar plugins (máquinas virtuais Flash Player, Java e Silverlight etc.) porque eles podem consumir muitos recursos (CPU e RAM). Dê preferência à tecnologia padrão, como HTML5 e ECMAScript

Provide print stylesheet

A folha de estilo deve ser o mais simples possível, e utilizar fontes leves (exemplo: Century Gothic)

Do not use standards social button

Coloque links diretos para as redes sociais, pois os seus plugins, em 99% das vezes, não são utilizados e geram consumo desnecessário.

Limit Stylesheet files (<3)

Minimize o número de arquivos CSS para reduzir o número de solicitações HTTP

Use ETags (>= 95%)

Utilize as ETags (assinatura anexada a uma resposta do servidor), porque elas economizam uma grande quantidade de largura de banda. 

Agora é possível verificar a existência de inúmeras ações simples, e algumas mais complexas, que podem fazer toda diferença no consumo de energia que automaticamente gera emissão de CO2. 

Esse é um dos principais propósitos da iniciativa Green Coding, iniciada pela GFT. Ela fomenta a adoção da sustentabilidade, como parte do processo de desenvolvimento de soluções. É nossa obrigação oferecer métodos mais eficientes para gerar maiores impactos na redução de emissão de CO2, e assim salvar o nosso precioso planeta. 

Você pode encontrar informações mais completas no documento do programa da GFT:

https://www.gft.com/int/en/index/technology-and-innovation/greencoding-tailored-it-solutions-for-banks-insurers-and-industry/

E no atalho abaixo, contribuir para a ferramenta:

https://github.com/cnumr/GreenIT-Analysis

Para mais informações acesse a EcoIndex e confira a sua metodologia: http://www.ecoindex.fr/

Vamos juntos salvar o nosso acolhedor planeta!

Marcelo Goberto Azevedo, Arquiteto Soluções na GFT, Arquiteto Azure, Desenvolvedor, Pai, Sonhador e Idealizador. Mais de 30 anos codificando, analisando e aproveitando cada momento – marcelo.azevedo@gft.com