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

Ao criar um sistema automatizado de teste e monitoramento de desempenho, a Equipe de velocidade do site da Lowe's testa as solicitações de envio em relação aos orçamentos de performance e evita regressões de desempenho que entram 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 varejista de materiais de construção que quase US $90 bilhões e opera cerca de 2.200 lojas e conta com mais de 300.000 funcionários. Ao criar um sistema automatizado de teste e monitoramento que impede a implantação de regressões de desempenho na produção, a equipe de velocidade do site da Lowe's conseguiu melhorar o desempenho do site, ficando entre os principais sites de varejo.

Problema

A meta da equipe de velocidade do site é tornar o site da Lowe's um dos mais rápidos sites de comércio eletrônico em termos de desempenho de carregamento de página. Antes de criar o sistema automatizado de teste e monitoramento, os desenvolvedores do site da Lowe não conseguiam medir o desempenho automaticamente em ambientes de pré-produção. As ferramentas existentes só realizaram testes no ambiente de produção. Como resultado, versões inferiores entraram em produção, criando uma experiência ruim para o usuário. Essas versões inferiores permaneceriam em produção até que fossem detectadas pela equipe de velocidade do site e revertidas pelo autor.

Solução

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

Impacto

De uma amostra de uma equipe ao longo de 16 semanas implantando 102 builds, o sistema automatizado de teste e monitoramento de desempenho impediu que 32 builds com desempenho inferior entrassem em produção.

Antes, a equipe de velocidade do site levava três a cinco dias para informar aos desenvolvedores que eles tinham 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 envio em um ambiente de pré-produção.

A qualidade do código está melhorando ao longo do tempo, medida pelo fato de que menos solicitações de envio 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 dos sites.

Em geral, a propriedade clara do código problemático mudou a cultura de engenharia. Em vez de reler as correções reativas porque não ficava claro quem realmente introduziu os problemas, a equipe pode fazer otimizações proativas com a propriedade do código problemático sendo objetivamente atribuível.

Implementação

A base do app Site Speed Governance (SSG) é o Lighthouse CI. O app SSG usa o Lighthouse para validar e auditar o desempenho da página de cada solicitação de envio.

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

O app SSG fará com que uma versão falhe se as metas de métricas e orçamento de performance definidos pela equipe de velocidade do site não forem alcançadas. Além de garantir o desempenho do carregamento, ele também garante SEO, PWA e acessibilidade. É possível denunciar o status imediatamente aos autores, revisores e equipes de SRE. Ele também pode ser configurado para ignorar as verificações quando forem necessárias exceções.

Fluxo de processo de governança automatizada de velocidade (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 da CDN.
  2. Verifique se a implantação foi concluída.
  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 personalizado do Docker que tenha 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 o assertion-results.json do LCI e compare com os orçamentos predefinidos em budgets.json. Salve o resultado como um arquivo de texto e faça upload dele no Nexus para comparações futuras.
  2. Compare o assertion-results.json atual com o último build concluído (transferido por download do Nexus) e salve-o como um arquivo de texto.
  3. Crie um e-mail HTML com as informações de sucesso ou falha.
  4. Envie o e-mail para as listas de distribuição relevantes com o Jenkins.