Como melhorar o desempenho do site pode ajudar a salvar o planeta

Você pode não pensar nisso com frequência, mas a Internet usa uma quantidade colossal de eletricidade. Essa eletricidade precisa ser produzida em algum lugar. Na maioria dos países, isso significa a queima de combustíveis fósseis. Isso, por sua vez, significa que a pegada de carbono da Internet cresceu a ponto de eclipsar as viagens aéreas globais, e isso torna a Internet a maior máquina a carvão da Terra.

O Mozilla Internet Health Report 2018 afirma que – especialmente à medida que a Internet se expande para um novo território – “a sustentabilidade deve ser uma prioridade maior”. Mas do jeito que está, os sites estão ficando cada vez mais obesos, o que significa que a demanda de energia da Internet continua a crescer exponencialmente.

Ao mesmo tempo, os impactos das mudanças climáticas se tornam piores e mais numerosos a cada ano que passa. A grande maioria dos cientistas climáticos atribui a crescente ferocidade e frequência de eventos climáticos extremos em todo o mundo às mudanças climáticas, que eles atribuem em grande parte à atividade humana. Enquanto alguns questionam a ciência, até mesmo as maiores empresas de petróleo do mundo agora a aceitam e admitem que seus modelos de negócios precisam mudar.

Todos os países da Terra (com exceção dos EUA) assinaram o Acordo Climático de Paris. Embora os EUA tenham se retirado de forma controversa, muitos dos indivíduos, cidades, estados e empresas mais influentes da América – representando mais da metade da população e da economia dos EUA – mantiveram seu compromisso com o acordo por meio da iniciativa America's Pledge.

Como desenvolvedores web, é compreensível sentir que este não é um assunto sobre o qual temos qualquer influência, mas isso não é verdade. Muitos esforços estão em andamento para melhorar a situação na web. A Green Web Foundation mantém um banco de dados cada vez maior de hosts da web que são totalmente alimentados por energia renovável ou pelo menos comprometidos em ser neutros em carbono. Em 2013, A List Apart publicou Sustainable Web Design por James Christie. Nos últimos três anos, a conferência SustainableUX viu especialistas em sustentabilidade na web compartilharem seus conhecimentos em uma variedade de disciplinas baseadas na web.

Desde 2009, o Greenpeace vem pressionando grandes empresas de Internet para limpar seu mix de energia por meio de sua campanha Clicking Clean. Em parte como resultado dessa campanha, o Google anunciou no ano passado que, pela primeira vez, comprou energia renovável suficiente para corresponder a 100% de seu consumo global para operações.

Então, além de alimentar servidores com energia renovável, o que mais os desenvolvedores da web podem fazer sobre as mudanças climáticas?

“Você não pode gerenciar o que não pode medir”

Talvez a maior vitória quando se trata de tornar os sites mais sustentáveis ​​é que o desempenho, a experiência do usuário e a sustentabilidade estão perfeitamente interligados. A principal métrica para medir a sustentabilidade de um produto digital é o uso de energia. Isso inclui o trabalho feito pelo servidor, o cliente e as redes de comunicação intermediárias que transmitem dados entre os dois.

Com isso em mente, talvez a primeira coisa a considerar seja como medimos o uso de energia do nosso site? Este é realmente um empreendimento mais complicado do que você imagina, e é difícil obter dados precisos aqui. Existem, no entanto, algumas boas alternativas que podemos usar para demonstrar o uso de energia. Isso inclui transferência de dados (ou seja, quantos dados o navegador precisa baixar para exibir seu site) e uso de recursos do hardware que atende e recebe o site. Uma métrica óbvia aqui é o uso da CPU, mas o uso da memória e outras formas de armazenamento de dados também desempenham seu papel.

A transferência de dados é uma coisa que podemos medir com bastante facilidade. Todos os principais navegadores fornecem ferramentas de desenvolvedor que nos permitem medir a atividade da rede. Nesta captura de tela abaixo, por exemplo, podemos ver que carregar o site da Smashing Magazine pela primeira vez incorre em pouco menos de um megabyte de transferência de dados. As ferramentas de desenvolvedor do Firefox realmente nos fornecem dois números: o primeiro é o tamanho descompactado dos arquivos que foram transferidos e o último é o tamanho compactado.

A ferramenta mais comum para compactar ativos à medida que viajam pela rede é o gzip, portanto, a diferença entre esses dois números geralmente é resultado do trabalho do gzip. Este último número representa quantos dados foram realmente transmitidos e é o único a ficar de olho.

Nota : Existem muitas outras ferramentas que nos fornecem uma métrica para transferência de dados, incluindo o muito reverenciado WebPagetest.

Para medir o uso da CPU, o Chrome nos fornece um Gerenciador de Tarefas granular que mostra o consumo de memória, o uso da CPU e a atividade de rede de guias individuais. Para os mais aventureiros/técnicos, o comando top (tabela de processos) fornece métricas semelhantes na maioria dos sistemas operacionais do tipo Unix, como macOS e Ubuntu. De um modo geral, também podemos executar o comando top em qualquer servidor ao qual tenhamos acesso ao shell.

Felizmente, existem esforços como WebsiteCarbon e Ecograder que buscam traduzir essas métricas em um valor específico de CO2 (no caso do WebsiteCarbon) ou uma pontuação (no caso do Ecograder).

Web design sustentável

Agora que sabemos como medir o impacto do nosso site, é hora de pensar em como podemos otimizar as coisas para torná-lo mais sustentável, com melhor desempenho e, geralmente, uma experiência melhor de usar.

Existem alguns trabalhos existentes nos quais podemos recorrer para nos ajudar aqui. Em 2016, O'Reilly publicou “Designing For Sustainability” de Tim Frick. Neste livro, Tim nos leva a um tour pelos porquês e comos do design sustentável. Mas também podemos recorrer a uma riqueza de ideias existentes, conferências e artigos que – embora não tenham um foco explícito na sustentabilidade – têm uma grande sobreposição com a filosofia do web design sustentável. Exemplos particularmente bons aqui são o projeto paralelo de Brad Frost, “Death To Bullshit”, os artigos e palestras de Heydon Pickering sobre escrever menos código, e a postagem no blog de Adam Silver, “Designing For Actual Performance”.

Se estivermos fazendo uma reformulação completa de um site ou começando um novo do zero, podemos começar com algumas perguntas de alto nível aqui. Por exemplo, o que realmente merece ou precisa estar em uma página inicial? E mais especificamente, que valor cada elemento em uma página inicial traz? Como Heydon Pickering coloca:

“O recurso mais eficiente, acessível e de fácil manutenção de um site é aquele que você não faz em primeiro lugar.”

Eu trabalho na equipe VIP do WordPress.com, então, nesse sentido, decidi me desafiar montando um tema WordPress minimalista para ver até onde eu poderia levar as técnicas de web design sustentável. O resultado é um tema chamado Susty, e pode ser visto em ação no site que montei: sustywp.com. Nesse exemplo específico, o site é entregue em pouco mais de 6 KB de transferência de dados, o que é bom, já que o site médio tem cerca de 1,5 MB.

Então, o que eu fiz? Bem, eu vou te dizer.

Reduzir solicitações de rede

Como descrevi acima, as solicitações de rede são algo que podemos medir facilmente, então elas são um bom ponto de partida. Ao montar o Susty, notei que havia várias solicitações HTTP em andamento que não pareciam ser necessárias. Por exemplo, o WordPress agrupa alguns CSS e JavaScript que detectam o uso de emojis e garantem que eles não apareçam como caracteres ilegais. Não há nada inerentemente errado com isso, mas se você não planeja usar emojis ou está feliz e confiante de que os vários padrões do sistema o protegerão, você pode impedir que eles sejam carregados.

Isso representa uma economia relativamente escassa, mas ao estabelecer uma filosofia de remoção de códigos e solicitações indesejados de nossas páginas, podemos fazer melhorias de desempenho muito mais significativas. Por exemplo:

• Estamos carregando todo o jQuery para algumas operações básicas do DOM?
  Poderíamos alcançar os mesmos fins com JavaScript puro? Você pode ler sobre eliminação de código morto mais avançado (também conhecido como trepidação de árvore) neste post para o Google de Jeremy Wagner.
• Temos um carrossel de imagens?
  Nós realmente precisamos de todas essas imagens? Eles estão melhorando significativamente a experiência do usuário? Ou poderíamos reduzi-lo a apenas uma imagem forte? Ou até mesmo mostrar aleatoriamente uma de uma seleção de imagens, para dar uma sensação de dinamismo aos usuários que retornam? A propósito, a pesquisa feita aqui mostra que a maioria dos usuários não gosta nem se envolve com carrosséis.
• Se estivermos usando muitas imagens, nos beneficiaríamos ao fornecer nossas imagens usando o formato WebP para os navegadores que o suportam?
  Por muito tempo, o suporte do WebP foi frustrantemente limitado. Mas com o Firefox a iniciar o suporte para ele na versão 65 (com vencimento em janeiro de 2019), é apenas uma questão de tempo até que os retardatários restantes, como o Safari, o alcancem.
• Estamos carregando centenas de kilobytes de fontes da web?
  Estamos usando todas as fontes da web que estamos carregando? Precisamos mesmo de fontes da web? A maioria dos dispositivos hoje em dia tem uma pilha de fontes meio decentes, poderíamos apenas especificar uma lista de fontes que gostaríamos de ver organizadas por preferência? Se precisarmos usar fontes da Web, devemos garantir que nossas fontes tenham o melhor desempenho possível.
• Estamos incorporando vídeos do YouTube?
  Um vídeo do YouTube incorporado normalmente adiciona cerca de um megabyte de transferência de dados antes mesmo de alguém interagir com ele. Se apenas uma fração de nossos usuários realmente se sentar e assistir ao vídeo incorporado em nosso site, poderíamos apenas criar um link para ele?

Examinar tudo

Nesse sentido, também podemos interrogar todos os aspectos de nossas páginas. O que realmente merece estar lá? Nossa barra lateral agrega algum valor real, ou apenas colocamos uma lá porque a convenção determina que os sites tenham barras laterais? Então, nós adicionamos um e o enchemos de porcaria.

Com Susty, experimentei a abordagem pouco ortodoxa de relegar a navegação para sua própria página. Isso me permite ter páginas que são reduzidas literalmente ao essencial, com conteúdo adicional sendo carregado apenas a pedido explícito do usuário. Susty é tão leve e tão rápido que percebi através de algumas pesquisas com usuários (também conhecido como meu parceiro) que o carregamento do menu não parecia uma nova página, então decidi fazer com que parecesse uma sobreposição, com uma cruz para descartar que na verdade apenas leva você de volta à página anterior.

Além de me ajudar a criar páginas agradavelmente leves, a navegação relegada também elimina a necessidade de qualquer código sofisticado de ocultar/revelar para mostrá-lo. Neste ponto, gostaria de deixar claro que Susty é um exemplo de levar ao extremo as técnicas de web design sustentável (não estou sugerindo que seja um arquétipo de um bom site).

Escreva CSS como sua avó

Quando se trata de aprimoramento sério de desempenho, devemos ter em mente que literalmente todos os caracteres do código contam. Cada caractere representa um byte e, mesmo depois de compactado pelo gzip, ainda está ganhando peso. CSS é um domínio onde muitas vezes vemos muito inchaço. Felizmente, há um número crescente de ferramentas cada vez mais complexas que podem ajudá-lo a eliminar CSS não utilizado. Este post fantástico de Sarah Dayan descreve como ela reduziu seu pacote CSS de 259 KB para 9 KB!

Se estamos começando do zero, talvez devêssemos pensar mais profundamente sobre como escrevemos CSS em primeiro lugar. Heydon Pickering escreveu um excelente post sobre como podemos escrever CSS de uma maneira que aproveite os pontos fortes de como a sintaxe foi projetada e como isso pode ajudar os desenvolvedores a evitar a repetição. Heydon também aponta quanto desperdício ocorre com o uso excessivo de divs e classes — tanto em HTML quanto em CSS.

O que você está analisando?

Parece ter se tornado mais ou menos onipresente na web para todos analisarem o que os visitantes de seus sites fazem por meio de ferramentas como Google Analytics, KISSmetrics, Piwik etc. Embora eu não tenha dúvidas de que existem casos de uso legítimos, será que realmente precisa de análises em todos os sites? Eu, por exemplo, normalmente adicionei o Google Analytics a todos os sites que gerencio como algo natural. Mas me dei conta há relativamente pouco tempo que, para a maioria dos sites em questão, esse foi um esforço quase completamente inútil: “Ah, seis pessoas vieram a este post via Facebook hoje”. Quem se importa?

A menos que você realmente precise dele e vá analisar e agir de acordo com os dados, apenas abandone a análise e encontre uma maneira melhor de gastar seu tempo do que ficar boquiaberto com a mundanidade de quantas pessoas visitaram o site X hoje.

Além de aumentar o peso da sua página, o uso de algo como o Google Analytics levanta questões éticas em torno dos dados que você está coletando de seus usuários em nome do Google, ou seja, há uma razão pela qual o Google fornece o Analytics gratuitamente.

Não vamos esquecer o básico

Há tanta informação nos dias de hoje sobre o seguinte, mas nunca devemos ficar complacentes e esquecê-los. Além de tudo acima, devemos sempre minimizar HTML, CSS e JavaScript e concatenar quando apropriado. Também devemos compactar todas as imagens para garantir que sejam tão pequenas quanto possível, usar os formatos corretos nas configurações corretas e usar renderização progressiva.

Desempenho do lado do servidor

Até agora, nosso foco tem sido quase inteiramente no front-end, mas muito disso se torna irrelevante se não otimizarmos também as coisas no lado do servidor. Eu já mencionei isso algumas vezes, mas devemos absolutamente habilitar a compactação gzip o tempo todo.

Devemos tornar o serviço do nosso site o mais fácil possível para o nosso servidor. Eu uso predominantemente o Nginx e tenho um carinho especial pelo cache FastCGI e o considero especialmente eficiente. Se você tiver acesso shell ao seu próprio servidor, aqui está um post que explica como configurá-lo. Há menos opções técnicas se você não tiver (ou não quiser) tanto controle sobre seu servidor. Um favorito particular no espaço do WordPress é o WP Super Cache.

Devemos usar HTTP2 sobre HTTPS. O uso de HTTPS abre um mundo de novas tecnologias da Web, como service workers, que nos permitem tratar a própria rede como algo agradável de se ter. Se você quiser saber mais sobre isso, recomendo o novo livro de Jeremy Keith, “Going Offline”.

Nota : Você também pode querer investigar o Módulo PageSpeed ​​do Google, disponível para Apache e Nginx.

Por fim, o maior impacto que podemos ter aqui é hospedar nossos sites em data centers movidos a energia renovável. No Reino Unido, posso recomendar fortemente a Krystal e a Kualo em termos de empresas com as quais hospedo meus sites diretamente. (Para um diretório completo de hosts da web verdes, confira The Green Web Foundation.)

Para concluir

Espero tê-lo convencido de que vale a pena se esforçar para tornar nossos sites mais sustentáveis. Especialmente porque no processo também fazemos nossos sites:

• Mais performático,
• Mais amigável,
• Mais acessibilidade,
• Mais amigável ao servidor,
• Melhor otimizado para motores de busca.

Uma resposta que algumas pessoas têm à ideia de web design sustentável — o que não é irracional — é que parece ser uma concessão muito pequena à causa ambiental. É claro que o impacto que você pode ter depende de quão ocupados são os sites em que você trabalha. Mas, além de ajudar a web a se tornar um pouco mais ecológica, o web design sustentável é fundamentalmente a melhor prática de web design.

Também vale a pena pensar em compensar as emissões de carbono que você não pode evitar. A compensação de carbono às vezes é ridicularizada, e com razão. O principal problema com a compensação é que normalmente o prazo sobre o qual o carbono será compensado é bastante longo. Por exemplo, com o plantio de árvores, o valor fornecido para uma quantidade de sequestro de carbono é normalmente baseado em um período de 100 anos. Então, em termos de redução das emissões de carbono agora, não é realmente uma solução. Mas é melhor do que nada.

O lema do myclimate é fazer o seu melhor e compensar o resto. Eu escrevi um post no blog sobre lançar seu próprio esquema de compensação de carbono. Eu também recomendo a iniciativa 1% For The Planet. Finalmente, se você é proprietário de uma empresa e gostaria de se juntar a uma aliança de empresas que desejam ver melhor justiça social, ambiental e econômica, confira o esquema Certified B Corporation.