A Organic Basics dedica-se à produção e venda de roupa sustentável online desde 2014. Estamos constantemente a tentar perceber como podemos ser ainda melhores no que diz respeito à sustentabilidade e, no ano passado, isso levou-nos a criar uma versão de baixo impacto da nossa loja online.
A versão de baixo impacto do nosso site reduz as emissões de carbono até 70%, utilizando algumas das técnicas descritas abaixo. Mais importante ainda, o site conta a história de como a sustentabilidade não é apenas importante para os produtos que vendemos, mas também para a forma como os vendemos.
Tínhamos vindo a ler cada vez mais sobre sites sustentáveis em toda a internet. O site solar da Low Tech Magazine e a Calculadora de Carbono de Sites da Wholegrain Digital apareciam como inspiração em vários canais do Slack, por isso decidimos começar a fazer experiências por nossa conta.
Regras simples com possibilidades infinitas
Primeiro, informámo-nos sobre como criar efetivamente um site sustentável e fomos inundados com dicas e truques. Rapidamente percebemos que não podíamos fazer tudo e que precisávamos de reduzir as opções.
Inspirados pelo manifesto Dogme 95 e pelos seus Votos de Castidade, escrevemos um manifesto com 10 regras para criar um site de baixo impacto. Tal como os Votos de Castidade, estas regras situam-se entre a especificidade extrema e a abertura à interpretação.
Isto dá aos designers e programadores espaço para encontrarem as soluções que melhor funcionam com a sua configuração técnica, sem comprometer a sustentabilidade. As regras não especificam a utilização de tecnologias concretas, pelo que estas podem evoluir em paralelo com o desenvolvimento tecnológico.
Vou abordar abaixo as 10 regras e apresentar algumas ideias sobre como pode implementá-las no seu próprio site.
1. Não carregue imagens antes de estas serem expressamente solicitadas pelo utilizador
As imagens contribuem significativamente para o consumo de dados de qualquer site, e isto aplica-se especialmente às lojas de comércio eletrónico. Precisamos de mostrar os nossos produtos visualmente, muitas vezes a partir de vários ângulos ou em modelos diferentes.
O importante aqui é carregarmos apenas as imagens que os utilizadores realmente precisam de ver. Isto pode significar carregar imagens apenas à medida que o utilizador percorre uma página, quando clica numa apresentação de diapositivos ou até ocultá-las até que o utilizador clique em “mostrar imagem”.
Esta regra é um pouco complexa, porque as ilustrações sob a forma de gráficos vetoriais escaláveis (SVGs) continuam a ser permitidas, mas o tamanho de um SVG é incrivelmente reduzido em comparação com o da maioria das imagens. Utilizámos esta possibilidade no nosso site, mostrando ilustrações na grelha de coleções (ver abaixo) e apresentando imagens na página do produto apenas quando o utilizador decide ativamente carregar uma apresentação de diapositivos.
Have an account? Log In
2. Minimize o consumo de energia no dispositivo do utilizador
Esta questão pode ser difícil de medir, mas é igualmente importante. A principal razão para a incluir é garantir que o foco não está exclusivamente no que acontece durante a transferência de ficheiros, mas também no que esses ficheiros fazem quando chegam ao dispositivo do utilizador.
Atualmente, os dois principais aspetos em que nos concentramos aqui são a utilização de animações e a quantidade de scripts em execução no seu site. Qualquer utilização de 3D também pode afetar significativamente a bateria de um dispositivo.
Algumas das perguntas que pode fazer a si próprio para ajudar a aplicar esta regra são:
- Esta animação / 3D / script contribui para a experiência do utilizador ou é apenas um elemento desnecessário?
- Podemos limitar a utilização desta animação / 3D / script no site?
- Podemos simplificar esta animação / 3D / script para que faça apenas exatamente aquilo de que necessita?
Leitura relacionada: Tomar decisões mais responsáveis na conceção da experiência do utilizador
3. Adapte-se de modo a refletir a quantidade de energia renovável com que o seu site funciona
Da forma como as redes elétricas e a Internet funcionam atualmente, nenhum site pode funcionar 100% com energia renovável. Nem mesmo a Google, que está cada vez mais focada na utilização de energia renovável para operar os seus centros de dados, consegue fazê-lo.
Em vez disso, podemos fazer com que os nossos sites se adaptem à quantidade de energia renovável existente na rede elétrica. Muitas empresas de energia, como a Barry, já fazem algo semelhante, disponibilizando aos seus clientes uma aplicação que indica quando a eletricidade tem uma menor intensidade carbónica (ver abaixo).
No site de baixo impacto da Organic Basics, utilizamos a API do carbonintensity.org.uk para nos fornecer dados. A API permite aceder de forma gratuita e simples a dados sobre a intensidade carbónica de várias regiões do Reino Unido. Uma alternativa seria a API do Electricity Map, que é bastante dispendiosa, mas dispõe de dados de muitas mais regiões em todo o mundo. A desvantagem da sua API é o preço de acesso.
Tivemos de escolher o centro de dados de Londres, uma vez que o nosso site está alojado na Google Cloud e esta é a única opção no Reino Unido. Ironicamente, este centro de dados está localizado numa das regiões com maior intensidade carbónica da oferta de alojamento na nuvem da Google.
Consoante a intensidade carbónica, alteramos a qualidade das imagens apresentadas e limitamos o número de animações. Se a eletricidade tiver uma intensidade carbónica muito elevada, desligamos mesmo o site por completo.
Em vez disso, apresentamos uma página simples que informa os nossos clientes de que o site está inacessível. A página também fornece uma estimativa de quando poderão voltar a aceder ao site, com base nos dados de previsão da API do carbonintensity.org.uk. Desde que lançámos o site, este esteve indisponível durante aproximadamente 12,5 horas.
4. Informe o utilizador sobre o impacto do seu comportamento de navegação
Quando faço compras online, espero poder ver quanto custam os artigos que tenho no carrinho. Isto permite-me perceber se ainda tenho dinheiro para gastar ou se preciso de procurar alguns descontos. Da mesma forma, devemos informar os nossos clientes sobre o impacto que o seu comportamento de navegação tem no clima.
No nosso site, calculamos continuamente as emissões que um utilizador acumula enquanto navega. Desta forma, pode familiarizar-se com o que são as emissões de carbono e com a forma como se relacionam com a utilização de sites. Se possível, também deve acompanhar estas emissões, porque, em última análise, é responsabilidade do proprietário do site reduzi-las.
5. Não utilize vídeos
Na Organic Basics adoramos vídeos, mas estes podem prejudicar seriamente o orçamento carbónico de um site. Esta regra é, de longe, a mais rigorosa das 10, mas existe uma razão muito válida para isso.
A Internet tornou-se cada vez mais dominada pelo vídeo e, em vez de seguir essa tendência, decidimos contrariá-la. Para combater verdadeiramente a crise climática, não precisamos apenas de otimizar e minimizar; precisamos de decrescimento.
Com esta regra, obrigamo-lo a pensar para além do leitor de vídeo e a considerar como adicionar movimento e dinamismo sem depender do carregamento de MB após MB de conteúdos de vídeo. Como alternativa, considere utilizar animações CSS ou SVG. Ah, e isto aplica-se ainda mais aos GIF. Não. Utilize. GIF.
6. Armazene os dados localmente no dispositivo do utilizador para minimizar a transferência de dados
Todo o conteúdo apresentado no seu site pode potencialmente ser guardado localmente no dispositivo do utilizador. Não faz sentido descarregar algo duas vezes se for improvável que sofra alterações.
A maioria dos programadores já reconhecerá a importância desta regra. Ela otimizará o desempenho do seu site e, simultaneamente, reduzirá o seu impacto ambiental.
Para conseguir isto, pode considerar criar o seu site como uma aplicação Web progressiva e permitir o acesso offline.
7. Comprima todos os dados tanto quanto possível
Assim que os seus ficheiros chegam ao dispositivo do utilizador, deve garantir que permanecem lá até serem atualizados. A isto chama-se armazenamento em cache. Mas, antes sequer de chegarem ao dispositivo, precisa de garantir que esses ficheiros são tão pequenos quanto possível.
Minimize o seu CSS e JavaScript e comprima as suas imagens. Muitos frameworks modernos, como o Nuxt.js ou o Next.js, fazem este trabalho por si para muitos tipos de ficheiros.
Isto é realmente uma decisão óbvia e, tal como o armazenamento em cache, também faz sentido do ponto de vista do desempenho.
8. Carregue apenas os scripts de programação, frameworks e cookies mais importantes
Cada vez que adiciona uma biblioteca ou um script externo ao seu código, aumenta o tamanho da página. Mesmo que a biblioteca tenha apenas 1kb, isto rapidamente se transforma em 1MB se 1000 utilizadores carregarem a página.
Esta regra serve para lembrar que deve considerar cada script, estrutura e cookie que adiciona. A palavra “crucial” é aquela em que se deve concentrar aqui. O acompanhamento de conversões e a análise são cruciais em todas as lojas de comércio eletrónico, mas será mesmo necessário em todas as páginas?
Estas considerações combinam muito bem com um pouco de atenção à privacidade, uma vez que o GDPR e regulamentos semelhantes exigem consentimento antes do carregamento de scripts.
9. Limite a quantidade de luz emitida pelo ecrã
Desde que anunciámos o manifesto, recebemos comentários que sugerem que esta regra não faz realmente diferença, porque a utilização do modo escuro apenas reduz o consumo de energia em ecrãs OLED.
Bem, nós dizemos: isso é bom para os utilizadores com ecrãs OLED! No site de baixo impacto da Organic Basics, continuamos a utilizar algumas cores brancas aqui e ali, porque são uma parte importante da experiência da nossa marca. No entanto, como demonstra o exemplo abaixo, também introduzimos uma tonalidade amarela, bem como uma nuance cinzenta, para limitar a quantidade de luz emitida pelo ecrã.
More Articles
10. Otimize e limite a utilização de tipos de letra personalizados
Por fim, chegamos à utilização de tipos de letra personalizados. Os tipos de letra não representam realmente uma parte significativa das emissões relacionadas com os sites, mas a situação pode facilmente fugir ao controlo.
Por esse motivo, utilizámos apenas um único tipo de letra personalizado no site de baixo impacto. Fomos ainda mais longe e removemos determinados carateres do conjunto de carateres. Não há realmente necessidade de utilizar o cirílico numa página em inglês.
O próximo passo
Se seguir estas 10 regras, estará definitivamente no bom caminho para transformar o seu site de comércio eletrónico numa versão de baixo impacto. Mais importante ainda, terá percorrido o caminho de observar o seu site de uma perspetiva de sustentabilidade e como uma peça importante do puzzle da sustentabilidade.
Ao considerar estas regras, é importante encontrar aquilo que funciona melhor para a sua marca. Nem todas as regras são igualmente rigorosas, e deve utilizar isso a seu favor. O seu site de baixo impacto não é igual ao meu, nem deveria ser.
Uma internet sustentável, contudo, não se limita à eletricidade e à eficiência energética, que são o foco destas 10 regras. Se alargarmos a perspetiva, também precisamos de começar a considerar os materiais de que são feitos os nossos dispositivos, centros de dados e redes.
A internet é construída com memes (hilariantes) de gatos e blogues, mas também é construída com minerais de terras raras muito reais, frequentemente extraídos por pessoas em condições de trabalho precárias e com um elevado custo ambiental.
Nos últimos dois anos, a Fairphone deu-nos um smartphone mais sustentável, mas a conversa sobre a internet como um todo ainda nem sequer começou. Por outras palavras, precisamos de uma Fairphone para a infraestrutura de servidores.
Leitura relacionada: Desafiar e motivar a sua equipa para fazer do planeta uma parte interessada no seu site
Mais sobre sustentabilidade: O manual do comércio eletrónico sustentável