Sustentabilidade Digital: Como medir e reduzir a Pegada de Carbono de Websites
- #HTML
- #CSS
- #UI/UX
Olá👋🏻 eu sou Estênio Vasconcelos e desenvolvi este artigo como parte dos meus estudos como estudante de Análise e Desenvolvimento de Sistemas juntamente com o objetivo de seguir uma carreira na área de desenvolvimento front-end focando nas melhores práticas de UX/UI.
Um pouco sobre sustentabilidade
Antes de iniciarmos o assunto técnico, é importante contextualizar alguns conceitos que estarão cada vez mais presentes no nosso cotidiano.
Provavelmente você já se deparou com alguma notícia sobre preocupações climáticas e ambientais, mas de onde surgiu essa preocupação e quais conceitos estão envolvidos?
O nosso padrão de vida, ao longo dos últimos anos, vem exigindo cada vez mais uma grande extração e manipulação de recursos naturais, essa demanda acaba impactando na emissão de mais Gases de Efeito Estufa (GEE).
Esses gases, atualmente, são comumente associados ao conceito de Pegada de Carbono, esse conceito refere-se à quantidade total de emissões de GEE, especialmente o dióxido de carbono (CO2), que são gerados direta ou indiretamente por atividades humanas.
Os nossos dispositivos eletrônicos também causam impacto no planeta, esse impacto é mensurado analisando vários aspectos, tais como: a extração de materiais, tal como o lítio para a produção de baterias; o consumo de energia no processo de produção bem como se é energia renovável ou não; consumo (datacenters, tráfego de rede, uso de dispositivos e sua eficiência); e resíduos pós-consumo.
Em 2020 a Internet era responsável por 3,7%¹ das emissões de CO2e globais, e a projeção é de que essas emissões dobrem até 2025 e continuem a aumentar cada vez mais. Essa medição também leva em consideração o processo de desenvolvimento, a hospedagem dos serviços digitais, o nosso consumo pessoal e outros fatores derivados.
Para exemplificar mais de onde vem esse consumo, imagine que, neste exato momento, para que você faça a leitura deste artigo, é necessário que um servidor esteja ligado 24/7 necessitando de energia e refrigeração. Considere também o uso do seu dispositivo eletrônico (redes móveis, brilho alto, consumo de bateria), e então multiplique isso pela quantidade de usuários ativos que a internet tem diariamente, só a partir dessa inferência já temos um grande consumo que antes não era comum.
Já que não podemos impedir a transformação digital, dado seus variados benefícios, é necessário aderir aos conceitos de desenvolvimento sustentável. Aqui vai uma ressalva de que o termo desenvolvimento sustentável não está ligado à, de fato, práticas sustentáveis de programação, mas sim aos meios como a sociedade pode se desenvolver equilibrando o consumo de recursos naturais com o impacto que é causado na habitação natural do planeta.
Porque você deveria se preocupar com o tema:
Acordos globais como a Conferência das Partes (COP) e os Objetivos de Desenvolvimento Sustentável (ODS) da ONU têm incentivado empresas a implementarem práticas de ESG (Environmental, Social, and Governance) com o intuito de contribuir para a mitigação do aquecimento global. As técnicas de desenvolvimento web sustentáveis, certamente lhe trarão um diferencial antecipado para o seu currículo.
Aqui é onde vemos a importância de utilizar a metodologia de aprendizado contínuo, Lifelong Learning, para que possamos estar constantemente atualizados com os assuntos tanto da área quanto das partes interessadas, a fim de manter a competitividade no mercado de trabalho.
Gostaria de deixar um apelo para que vocês busquem conhecimento não só para se manterem atualizados, mas para que busquem a verdade e mantenham uma rotina de estudos com assuntos além do seu plano de carreira.
Agora vamos para a parte prática:
Aqui será abordado o caso do website da Fundação Cultural Francisco Fonseca Lopes (acervofcofonsecalopes.com), uma Organização da Sociedade Civil (OSC) localizada no munícipio de Caridade-CE, onde eu atuo como Web Designer Multimídia.
O site foi criado no WIX dado sua maior facilidade e velocidade ne criação de páginas Web. O hotsite em questão foi analisado em outros sites que geram uma nota com base na estimativa de CO2 gerado por cada acesso.
Na primeira versão que já estava no ar, disponível para o público em geral, o site obteve as piores notas em ferramentas como Website Carbon Calculator e Ecograder. A maior causa dessa nota foi atribuída a arquivos de mídia que eram baixados por cada acesso, o pior caso foi um vídeo de plano de fundo que possuía 7 megabytes.
Confira alguns dos relatórios:
Relatório no Website Carbon Calculator
Relatório no Ecograder
Agora é sua vez!
Acesse uma das ferramentas abaixo e analise um site que você desenvolveu ou que costuma acessar com maior frequência.
- Website Carbon Calculator https://www.websitecarbon.com/
- Ecograder https://ecograder.com/
- Beacon https://digitalbeacon.co/
Dentre as opções, o meu favorito é o Ecograder, pois além de gerar uma nota com as estimativas de CO2, ele dá ótimas sugestões do que deve ser melhorado no site de acordo com os aspectos sobre o tamanho da página e UX Design.
Meu site não obteve uma boa nota, e agora?
Agora que temos um relatório, podemos atuar nos aspectos que mais geram consumo, seguindo um conjunto de boas práticas que são recomendadas para tornar o desenvolvimento web mais sustentável.
Algumas práticas recomendadas:
- Utilize HTML semântico para ganhar pontos com acessibilidade e SEO, além de melhorar a manutenção futura do seu código;
- Técnica Mobile-First: este método visa desenvolver todo o seu site pensando primeiramente na experiencia para dispositivos móveis, e só em seguida adaptar para telas maiores. A principal motivação é que ao desenvolver pensando primeiro em telas menores, o designer é forçado a tornar a jornada do usuário mais objetiva, além do fato de que os smartphones são o maior meio de acesso a internet atualmente, também entra a questão de que o acesso pode estar sendo realizado por dados móveis, seguindo as orientações dessa técnica você tornará seu projeto mais otimizado, acessível e sustentável;
- Reduzir e comprimir arquivos de mídia: se há imagens ou vídeos que possam ser removidos, faça isso, do contrário, realize uma compressão nas mídias para que os usuários utilizem menos banda;
- Utilizar formatos para imagens mais compactos, como SVG e WebP;
- Lazy Loading: utilize esta técnica para que os conteúdos de mídia sejam requisitados somente quando o usuário estiver prestes a vê-lo;
- Cache eficiente: fazendo um bom uso do cache os usuários realizarão menos solicitações a servidores;
- SEO: o Search Engine Optmization é um conjunto de estratégias para melhorar a indexação e posicionamento de páginas nos motores de busca (Google, Bing, DuckDuckGo...). Aplicando estas práticas, seu site irá aparecer mais no topo das pesquisas, reduzindo o tempo para o usuário encontrar informações;
- UX/UI: não negligencie a interface e a experiência do usuário no desenvolvimento do seu site, análise o contexto e priorize o que realmente é importante. Evite padrões obscuros que tentam manipular o usuário ou dificultar a saída de um serviço;
- Cuidados com scripts: garanta que os recursos de suas páginas sejam utilizados mesmo quando o navegador estiver com o JavaScript desabilitado, caso contrário algum usuário poderá ficar de fora. Tenha cuidado também com a quantidade de scripts que monitoram a atividade do usuário, isso pode gerar um encargo não necessário para o objetivo e propósito do seu site.
Este foi um apurado de algumas das variadas técnicas que tornarão o desenvolvimento do seu site tanto sustentável como também acessível. A seguir, confira alguns sites que tratam exclusivamente do assunto.
Sites dedicados ao desenvolvimento web sustentável:
- Sustainable Web Design - https://sustainablewebdesign.org/
- Sustainable Web Manifesto - https://www.sustainablewebmanifesto.com/
- Green Web Foundation - https://www.thegreenwebfoundation.org/
E a nota F no site da Fundação?
Voltando ao caso do portal da Fundação Cultural Francisco Fonseca Lopes, como o vídeo era o que mais consumia dados por acesso e como também não era essencial para o objetivo do site, decidi removê-lo a fim de tornar o carregamento da página menos custoso.
Também apliquei outras técnicas como alterar arquivos PNG por SVG, adicionar legendas alternativas para os elementos visuais, além de otimizar algumas configurações de SEO. Aqui vai um ponto positivo para o uso da plataforma WIX que já compactou automaticamente os arquivos de mídia entregues ao usuário final após a publicação do site.
Somente essas práticas foram capazes de reduzir em mais de 70% a quantidade de CO2 por acesso.
Relatório da versão atual do website da Fundação no Website Carbon Calculator
Relatório da versão atual do website da Fundação no Website Carbon Calculator
Mesmo com essas melhorias, ainda há muito o que otimizar a página na questão dos scripts, no entanto, não encontrei configurações no painel de ajustes do WIX que me permitissem remover ou reduzir a quantidade de scripts da página. Como a plataforma abstrai ao máximo a codificação do site, dei início a uma versão realizada somente com HTML, CSS e JavaScript.
Nesta nova versão (https://website-fcffl.vercel.app), somente a página inicial foi desenvolvida e ainda há alguns pontos para melhorar. Esta versão serviu mais como um teste para ver na prática o impacto real que estas boas práticas podem causar, e os resultados foram excelentes, conforme os relatórios abaixo:
Relatório da versão de testes no Website Carbon Calculator
Relatório da versão de testes no Ecograder
Aqui vai uma ressalva, essa versão de teste só não obteve notas melhores porque estas ferramentas analisam também se o serviço de hospedagem é alimentado por fontes renováveis, o que aparentemente não é o caso do Vercel.
Essas técnicas são voltadas somente para a parte de Design e Front-End?
Não! Profissionais de back-end, infraestrutura e dados também têm um papel importante na adoção de práticas sustentáveis. As técnicas aplicáveis a essas áreas buscam, principalmente, melhorar a performance e otimizar o uso dos recursos disponíveis. Por exemplo, ao realizar uma consulta SQL, é possível obter o mesmo resultado com consultas que podem ser mais ou menos eficientes. Em um sistema escalável e amplamente utilizado, essas otimizações têm um impacto ainda mais significativo.
A melhor parte de aplicar essas práticas sustentáveis é que você pode reduzir custos operacionais, especialmente em serviços de nuvem. Alguns modelos de faturamento consideram a quantidade de entradas e saídas realizadas pelos usuários, o que significa que, quanto mais otimizado o serviço, menor o custo final — beneficiando tanto o usuário quanto a empresa.
Antes de finalizar, vamos refletir...
O objetivo desse artigo é introduzir o assunto de desenvolvimento web sustentável. Talvez alguns leitores possam começar a criar algumas neuroses durante o uso de suas aplicações diárias, com pensamentos como “estou destruindo o planeta por estar usando o ChatGPT 😱”, e sim, a Inteligência Artificial tem um consumo absurdo de recursos computacionais, mas lembrem-se que de toda a pegada global da internet, o seu uso individual é muito menor que a ponta do iceberg.
Ainda há outro adendo, as empresas podem pagar outras empresas para atuarem na neutralização da quantidade de CO2 gerado, isto é, equilibrando as emissões de CO2 removendo-o da atmosfera ou eliminando as emissões, é isso que faz com que alguns produtos obtenham o selo de "Carbon Neutral".
Você pode fazer sua parte ficando um pouco mais longe das telas e desenvolvendo sites mais sustentáveis 😁
O que aprendemos até aqui?
- Conceito de pegada de carbono e como a tecnologia gera impacto ambiental
- Como medir o CO2 por acesso de websites
- Principais técnicas para tornar um projeto web mais sustentável
Agora, se você tem um site ou participa de um projeto que possa realizar mudanças significativas, tire um tempo para se aprofundar no assunto e trabalhar na melhoria contínua da sua aplicação.
Até breve! 👋🏻
