Clever Geek Handbook

Por que o desempenho da web dos sistemas back-end é importante e precisa de otimização?

Um dia tive uma conversa interessante com a equipe de apoio do Departamento de Comércio Internacional (DIT) . Eles queriam melhorar o desempenho de um de seus aplicativos da web. Falar assim é o que mais gosto no meu cargo atual. Falo sobre assuntos que me interessam, conheço novas pessoas, falo sobre oportunidades que talvez eles não conheçam, por exemplo, como melhorar a UX de um aplicativo.



Para ser sincero, fiquei um pouco chateado quando fui informado que este serviço é para uso interno e não público. Isso significava que minhas ferramentas usuais goto para avaliar o desempenho da web não estavam disponíveis. Nomeadamente:





Isso me deu uma ideia: como você pode testar serviços e produtos internos? Neste artigo, tentarei descobrir.



A condição mais importante para sistemas internos rápidos



Como todos sabemos, o mundo mudou significativamente devido à pandemia global . Por causa dos bloqueios generalizados, todos que tiveram a oportunidade começaram a trabalhar em casa. Isso teve um impacto significativo no desempenho da Internet em todo o mundo e resultou em alto tráfego e aumento do tempo de download. Por isso, todas as ferramentas de que os funcionários precisam para realizar seus trabalhos devem ser carregadas rapidamente e também ser interativas.



Anteriormente, não havia esses problemas de desempenho porque os usuários internos trabalhavam no escritório e usavam uma rede local (LAN). O problema é agravado pelo fato de que muitos vivem em pequenas cidades com conexões de Internet lentas e instáveis. Ou, ao contrário, em cidades com alto coeficiente de competição (razão de contenção). Como estamos falando de sistemas internos, na maioria das vezes os funcionários precisam usar uma VPN para entrar na rede do escritório. Mas isso também não é muito conveniente: a VPN geralmente diminui a velocidade da Internet .



É importante lembrar que os funcionários também são usuários. Portanto, certifique-se de otimizar seus sistemas internos também, pois o baixo desempenho dos aplicativos da web afeta negativamente o trabalho dos funcionários. Quais ferramentas usar se os sistemas internos geralmente são privados? Falaremos mais sobre isso.



WebPageTest



A primeira coisa que gostaria de esclarecer é que, ao testar sistemas internos, você não poderá usar a versão de código aberto do WebPageTest . Mas você pode definir um privado. Graças a isso, será possível utilizá-lo na rede interna.







Após o lançamento, o acesso a uma grande quantidade de dados para todos os sistemas internos será aberto. Certifique-se de ler o guia para obter o máximo de informações possível do WebPageTest. Configurar sua própria versão não é tão difícil quanto parece. Existem alguns tutoriais excelentes sobre como configurá-lo na AWS em alguns minutos:





Esta opção permitirá que o WebPageTest seja executado automaticamente. Isto pode ser feito de várias maneiras:





Dessa forma, você pode acompanhar o impacto no desempenho (positivo ou negativo) de novas alterações no sistema.



Farol



A próxima ferramenta de goto que você provavelmente já possui é o Farol do Google. Se você instalou uma cópia do Google Chrome em seu computador, usar o Lighthouse para auditar seu sistema interno é muito simples:







Na guia DevTools, encontre “Lighthouse” e clique em “Gerar relatório”.







Um minuto após o lançamento, a auditoria retornará o resultado, conforme mostra a imagem acima. Eu recomendo fortemente a configuração de um novo perfil do Chrome especificamente para testar o Lighthouse, pois as extensões do navegador podem afetar negativamente o desempenho (dependendo do que exatamente elas fazem na página).



Mas o Lighthouse não é apenas um painel de auditoria. Aqui estão algumas outras maneiras de usar essa ferramenta:



Você pode executar o Lighthouse usando a interface de linha de comando (CLI).



Você pode executar o Lighthouse facilmente em todas as páginas do seu site .



Compare o desempenho antes e depois com o Lighthouse CI Diff



Execute o Lighthouse automaticamente em intervalos regulares em vários locais executando testes .



Adicione sua própria auditoria para monitorar partes específicas do site



Compartilhe resultados por meio do Github Gist e do Lighthouse Report Viewer .



Sitespeed.io



Coloquei o Sitespeed.io em um dos primeiros lugares desta lista porque o considero subestimado por muitos. É um maravilhoso conjunto de ferramentas para melhorar o desempenho do site. Ele pode ser configurado de forma rápida e fácil com um simples comando docker



ou npm



. Além disso, Sitespeed.io é fácil de executar em sua máquina local para testes rápidos.







Com sitespeed.io, você pode monitorar continuamente quantas páginas precisar, enviando dados para Graphite / Grafana para obter painéis como este . Basicamente, Sitespeed.io é o seguinte conjunto de ferramentas:



  • Coach é uma ferramenta automatizada que ajuda você a aumentar a velocidade de carregamento de sua página.
  • Browsertime é a principal ferramenta do Sitespeed . Ele interage com navegadores de teste (por exemplo, Chrome, Firefox, iOS Safari) e coleta métricas de desempenho, imagens, vídeos e muito mais.
  • PageXray é usado para converter arquivos HTTP (HAR) em JSON para facilitar a leitura e o uso. (Leia mais sobre os arquivos HAR abaixo)
  • Throttle é uma ferramenta de linha de comando para controlar a conectividade de rede para testes de desempenho.


Observação: o acelerador bloqueia a conexão com a Internet em todo o computador, portanto, lembre-se de desligá-lo ao desligar.



  • Compare é uma ferramenta online para comparar arquivos HAR de forma rápida e fácil (por exemplo, antes e depois).


DevTools no Chrome



Todos os navegadores modernos já possuem ferramentas de desenvolvedor integradas. Percorremos um longo caminho desde o Firebug no Firefox . Mais importante, DevTools está se tornando mais poderoso a cada nova versão do navegador. Isso é conveniente para desenvolvedores e usuários, porque deve haver menos bugs nos sites, certo? Ha!







A imagem acima mostra as informações detalhadas que uma auditoria de desempenho de uma página da web pode fornecer ( guia Desempenho ). Mas o Chrome DevTools, além da guia de medição de desempenho, tem muitos outros recursos:





E se você estiver procurando por artigos que não sejam do Google sobre este tópico, confira estes:





DevTools no Firefox



Existem outros navegadores que podem ajudá-lo a avaliar os problemas de desempenho usando DevTools. Sou usuário do Firefox, então uso regularmente as ferramentas deste navegador. O Firefox também possui um conjunto completo de guias que você pode usar para encontrar problemas em seu site:







Você pode usar estas ferramentas para:





Bibliotecas para estender dados analíticos



Isso pode não funcionar com ferramentas internas, mas se você rastrear o uso usando análises (como Google Analytics, Fathom, Matomo), você pode estender os dados coletados para incluir informações mais completas sobre o desempenho da web.







Várias bibliotecas que você pode usar:





Perfume.js se destaca das demais ferramentas pela quantidade de dados coletados Real User Monitoring (RUM). Ele pode ser totalmente personalizado para coletar o quanto você precisar. Aqui estão alguns tutoriais sobre como fazer isso:





JavaScript Analytics



Este artigo não cobre JavaScript internamente, embora eu acredite que minimizar seu uso pode melhorar o desempenho da web e a estabilidade geral . Mas se você usa JavaScript, tente otimizá-lo o máximo possível.







Felizmente, existem muitas ferramentas para isso:



  • bundle-wizard - ferramenta CLI para criar visualizações de um pacote JavaScript (veja a imagem acima) para que você possa remover tudo o que não precisa.
  • Bundle Phobia - Descubra quanto custará para adicionar um pacote npm ao seu pacote.
  • Webpack Bundle Analyzer - Visualize a estrutura interna dos arquivos de saída do webpack com esta ferramenta de mapa escalável interativo.
  • source-map-explorer - Use mapas de origem para analisar código JavaScript inchado (esta ferramenta também funciona com Sass e LESS para analisar CSS).


Estruturas especiais para análise de ferramentas e artigos também estão disponíveis:



  • reactopt - Uma ferramenta de otimização de desempenho CLI do React - determina se a página precisa ser renderizada novamente.
  • TracerBench é uma ferramenta de teste de desempenho monitorado para aplicativos da web. Fornece uma análise clara, prática e conveniente das diferenças de desempenho.
  • App React Performance - DebugBear


Análise CSS



Além da guia Cobertura mencionada anteriormente no Chrome DevTools, também existem ferramentas que você pode executar por meio da Interface de linha de comando (CLI). Eles analisarão o CSS devido à sua complexidade e também identificarão seletores não utilizados em todo o site:



  • analyse-css é um seletor de complexidade CSS e analisador de desempenho que é executado a partir da interface de linha de comando.
  • uCSS - Percorre todo o site procurando por seletores CSS não utilizados que podem ser removidos.


Medição de desempenho do servidor



A regra de ouro de desempenho é: 80-90% do tempo que um usuário passa no front-end.



Ainda é uma boa ideia verificar se o back-end / servidor está otimizado. Afinal, “o tempo para o primeiro byte é importante” .







Também é importante certificar-se de que o servidor possa continuar a funcionar sob carga pesada, se isso acontecer. Existem várias ferramentas que podem ajudá-lo a fazer essas duas coisas:



  • httpstat é um pequeno script Python para visualizar os dados de tempo de conexão retornados do curl (veja a imagem acima).
  • h2load é uma ferramenta de interface de linha de comando para testar HTTP / 2 e HTTP / 1.1.
  • Hey — .
  • k6 — , JavaScript. API CLI.
  • Server- — , -. - .


Puppeteer



Puppeteer é uma biblioteca Node que fornece uma API de alto nível para controlar o Chrome ou Chromium usando o protocolo DevTools. A maioria das coisas que você faz manualmente em um navegador pode ser reproduzida com o Puppeteer. Como isso pode ser usado para testes de desempenho na web? Addy Osmani escreveu um blog sobre o uso do Pupperteer para testes de desempenho na web e também compartilhou o código no Github. Esses testes podem ser executados facilmente por meio da CLI para testar sites internos e externos:





Extensões de navegador



Existem muitas extensões de navegador que podem ser usadas para medir o desempenho da web. Eu recomendaria usar um perfil separado com um mínimo de extensões incluídas ao iniciá-los. Isso ocorre porque algumas extensões do navegador interagem com a página e podem prejudicar o desempenho, resultando em resultados incorretos. Você pode usar as seguintes extensões:



  • sloth é uma extensão que desacelera a CPU e a rede no navegador, facilitando a simulação do desempenho da página em dispositivos mais lentos.
  • Perfmap - ao usar esta extensão, o navegador cria um mapa de calor dos recursos carregados no navegador e seu impacto de desempenho individual de acordo com a API de tempo de recurso .
  • A extensão Web Vitals Chrome é uma extensão do Chrome que exibe as métricas principais do Web Vitals (LCP, CLS, FID) para qualquer página que você visitar. Nota: Em breve, isso será integrado ao Chrome DevTools, agora está disponível no Canary .
  • perf-diagnostics.css não é realmente uma extensão de navegador, mas um monte de CSS que você pode adicionar à sua página para corrigir problemas comuns de desempenho. Uma forma simples e eficaz de destacar imagens sem o atributo largura / altura, entre várias outras.


Também existem extensões projetadas especificamente para melhorar o desempenho ao usar certas estruturas JavaScript:







Network Throttling



A aceleração da rede é uma forma de diminuir a velocidade de uma conexão de rede. É importante entender que muitos usuários não terão conexões de banda larga rápidas e estáveis ​​em uma cidade grande. Outros, por outro lado, podem estar em áreas rurais com banda larga ruim e intensidade de sinal móvel muito fraca. Limitando sua própria conexão de rede, você obtém uma visão sobre o desempenho do site para os usuários naquele ambiente de rede específico.



Você pode perguntar: "Por que eu iria querer bloquear minha rede quando ela está integrada ao Chrome DevTools?" É importante entender que nem todos os métodos de regulação de redefuncionam da mesma maneira. A limitação com o Chrome DevTools aplica um atraso no nível do navegador para cada resposta. O Lighthouse executa o teste em velocidade total e simula a velocidade da conexão, sacrificando a precisão da velocidade da mensagem. As seguintes ferramentas são muito mais precisas. Eles usam o controle de rede no nível do sistema operacional que funciona em um nível muito inferior.



Observação: as ferramentas abaixo regulam a conexão em todo o computador, portanto, certifique-se de fechar os aplicativos desnecessários ao testar e também desative o controle de fluxo quando terminar!





Eu sempre uso throttle



porque é muito simples: 



# Enable 3G Slow
throttle 3gslow

# Use a custom connection profile
throttle --up 1600 --down 780 --rtt 250

# Disable throttle
throttle --stop


Analisando arquivos HAR



Mencionei os arquivos HTTP Archive (HAR) anteriormente neste artigo. Esses arquivos permitem registrar a interação de rede de navegadores da web com um site. O bom desses arquivos é que você pode usá-los em qualquer site que possa ser acessado por meio de um navegador (interno ou externo). Encontrá-los é muito fácil nas ferramentas de desenvolvedor do Firefox e Chrome:



Firefox





Chrome





Existem outras ferramentas que você pode usar para visualizar e analisar:





Web APIs



De volta aos recursos nativos do navegador, existem várias APIs que você pode usar para medir o desempenho do site por conta própria, sem usar bibliotecas.



  • performance.now () - O método da now()



    interface de desempenho do navegador retorna um carimbo de data / hora de alta precisão a partir do momento em que o método foi chamado. Isso torna muito fácil medir o tempo entre 2 chamadas. Adicioná-los antes e depois de uma parte específica do código permitirá que você meça e otimize.
  • Tempo de navegação - Esta API permite que os desenvolvedores coletem dados de tempo associados à navegação do documento.
  • Tempo de recursos - Esta API permite que os desenvolvedores coletem informações completas de tempo para os recursos que estão sendo carregados pelo documento.
  • Avaliando o desempenho de carregamento na vida real com navegação e tempo de recursos - Jeremy Wagner - Um artigo muito detalhado sobre como as duas APIs acima podem ser usadas para medir o desempenho de carregamento de páginas da web.


Resultados



Esperançosamente, nas ferramentas listadas neste artigo, você encontrará aquelas que o ajudarão a melhorar seus sistemas internos. Se um serviço ou site for usado apenas por funcionários da empresa, isso não significa que não precise ser otimizado. Apesar de muitas pessoas trabalharem remotamente atualmente, nem todo mundo tem uma conexão rápida e estável. Portanto, lembre-se de que você e seus colegas também são usuários!


More articles:


All Articles