O site da Lowe's está entre os sites de e-commerce com desempenho mais rápido

Ao criar um sistema automatizado de monitoramento e testes de desempenho, a equipe de velocidade do site da Lowe's testa as solicitações de pull em relação aos orçamentos de desempenho e evita que as regressões de desempenho entrem em produção.

Abhimanyu Raibahadur
Abhimanyu Raibahadur
Ashish Choudhury
Ashish Choudhury
Dhilip venkatesh Uvarajan
Dhilip venkatesh Uvarajan
Dinakar Chandolu
Dinakar Chandolu
Garima Mimani
Garima Mimani
Safwan Samla
Safwan Samla

A Lowe's é uma rede de varejo de reforma residencial de quase US $90 bilhões que opera cerca de 2.200 lojas e emprega mais de 300.000 associados. Ao criar um sistema de teste e monitoramento automatizado que impede que as regressões de desempenho sejam implantadas na produção, a equipe de velocidade do site da Lowe conseguiu melhorar a performance do site, classificando-o entre os principais sites de varejo.

Problema

O objetivo da equipe de velocidade do site é tornar o site da Lowe's um dos sites de e-commerce mais rápidos em termos de desempenho de carregamento de página. Antes de criar o sistema de teste e monitoramento automatizado, os desenvolvedores do site da Lowe não conseguiam medir o desempenho automaticamente em ambientes de pré-produção. As ferramentas atuais só realizaram testes no ambiente de produção. Como resultado, builds inferiores foram para a produção, criando uma experiência ruim para o usuário. Esses builds inferiores permaneceriam em produção até serem detectados pela equipe de velocidade do site e revertidos pelo autor.

Solução

A equipe de velocidade do site usou ferramentas de código aberto para criar um sistema automatizado de monitoramento e testes de desempenho para ambientes de pré-produção. O sistema mede o desempenho de cada solicitação de pull (PR, na sigla em inglês) e bloqueia o envio da PR para a produção se ela não atender ao orçamento de performance e aos critérios de métrica da equipe de velocidade do site. O sistema também mede a conformidade com o SEO e a ADA.

Impacto

Com base em uma amostra de uma equipe que implantou 102 builds em 16 semanas, o sistema automatizado de monitoramento e testes de desempenho impediu que 32 builds com desempenho abaixo do esperado fossem para a produção.

Antes, a equipe de velocidade do site levava de três a cinco dias para informar aos desenvolvedores que eles haviam enviado regressões de desempenho para a produção. Agora, o sistema informa automaticamente os desenvolvedores sobre problemas de desempenho cinco minutos após o envio de uma solicitação de pull em um ambiente de pré-produção.

A qualidade do código está melhorando com o tempo, como evidenciado pelo fato de que menos solicitações de pull estão sendo sinalizadas para regressões de desempenho. A equipe de velocidade do site também está reduzindo gradualmente os orçamentos de governança para melhorar continuamente a qualidade do site.

Em geral, ter propriedade clara do código problemático mudou a cultura de engenharia. Em vez de fazer correções reativas com relutância porque nunca ficou claro quem realmente causou os problemas, a equipe pode fazer otimizações proativas com a propriedade do código problemático sendo objetivamente atribuível.

Implementação

O app de governança de velocidade do site (SSG, na sigla em inglês) é o Lighthouse CI. O app SSG usa o Lighthouse para validar e auditar a performance da página de cada solicitação de pull.

Um diagrama de processo do app SSG. As etapas mostradas no diagrama são descritas mais adiante no artigo.

O app SSG faz com que um build falhe se o orçamento de performance e as metas de métricas definidas pela equipe de velocidade do site não forem alcançadas. Ele reforça não apenas o desempenho de carregamento, mas também o SEO, a PWA e a acessibilidade. Ele pode informar o status imediatamente aos autores, revisores e equipes de SRE. Ele também pode ser configurado para ignorar as verificações quando for necessário fazer exceções.

Fluxo de processo da governança de velocidade automatizada (ASG)

Spinnaker

Ponto de partida. Um desenvolvedor mescla o código em um ambiente de pré-produção.

  1. Implante o ambiente de pré-produção com recursos do CDN.
  2. Verifique se a implantação foi bem-sucedida.
  3. Execute um contêiner do Docker para começar a criar o aplicativo ASG ou envie uma notificação (em caso de falha na implantação).

Jenkins e Lighthouse

  1. Crie o aplicativo ASG com o Jenkins.
  2. Execute um contêiner do Docker personalizado com o Chrome e o Lighthouse instalados. Extraia lighthouserc.json do app SSG e execute lhci autorun --collect-url=https://example.com.

App Jenkins e SSG

  1. Extraia assertion-results.json do LHC e compare-o com os orçamentos predefinidos no budgets.json. Salve a saída como um arquivo de texto e faça upload para o Nexus para comparações futuras.
  2. Compare o assertion-results.json atual com o último build bem-sucedido (feito o download do Nexus) e salve-o como um arquivo de texto.
  3. Crie um e-mail em HTML com as informações de sucesso ou falha.
  4. Envie o e-mail para as listas de distribuição relevantes com o Jenkins.