Como medir a velocidade de carregamento de um site…

A velocidade de carregamento de um site pode ser medida de várias formas:

Ferramentas de desenvolvimento no navegador:
- Abrir a aba "Network" (Rede) nas ferramentas de desenvolvimento (F12).
- Atualizar a página.
- Analisar os indicadores de tempo para cada recurso (HTML, CSS, JS, imagens):
  - Waiting (TTFB): Tempo até receber o primeiro byte do servidor.
  - Content Download: Tempo de download do conteúdo.
  - Total: Tempo total de carregamento do recurso.
- Prestar atenção ao diagrama Waterfall (cascata) para visualizar a sequência de carregamento de recursos.
- Analisar o Resumo (Summary) na parte inferior da aba para o tempo total de carregamento e a quantidade de pedidos.
Serviços online para medir a velocidade:
- Google PageSpeed Insights: Analisa o desempenho em dispositivos móveis e de desktop, fornece recomendações de otimização.
- GTmetrix: Fornece métricas de PageSpeed e YSlow, relatório detalhado de carregamento, desempenho e recomendações.
- Pingdom Website Speed Test: Mede a velocidade de diferentes localizações, fornece análise detalhada do desempenho.
- WebPageTest: Permite testar de diferentes localizações e navegadores, fornece várias métricas e visualizações.
Métricas a serem observadas:
- Time to First Byte (TTFB): Tempo até receber o primeiro byte do servidor.
- Largest Contentful Paint (LCP): Tempo até o maior elemento de conteúdo aparecer na parte visível da tela.
- First Input Delay (FID): Tempo desde a primeira interação do usuário até a resposta do navegador.
- Cumulative Layout Shift (CLS): Indicador total de deslocamento do layout durante o carregamento.
- DOMContentLoaded: Tempo em que o navegador carregou e analisou completamente o HTML.
- Load: Tempo de carregamento completo de todos os recursos da página.

Automatização com frameworks:

Lighthouse (ferramenta do Google): Pode ser usado como ferramenta CLI ou integrado em pipelines CI/CD.

# Exemplo de uso do Lighthouse CLI
lighthouse https://www.exemplo.com --output json,html --output-path ./relatorio.json

Selenium/WebDriver: Pode ser usado para carregar a página e obter o tempo de carregamento via API Performance do JavaScript.

# Exemplo de obtenção do tempo de carregamento com Selenium e Performance API
from selenium import webdriver
import time

driver = webdriver.Chrome() # Ou outro navegador
driver.get("https://www.exemplo.com")

# Esperar a página carregar completamente
time.sleep(5) # Esperas mais confiáveis podem ser usadas

# Obter o objeto PerformanceTiming
performance_timing = driver.execute_script("return window.performance.timing")

# Calcular o tempo de carregamento
load_time = performance_timing['loadEventEnd'] - performance_timing['navigationStart']
print(f"Tempo de carregamento: {load_time} ms")

driver.quit()

Cypress: Também fornece acesso à API Performance.

Sistemas de Monitoramento de Usuário Real (RUM):
- Ferramentas que coletam dados de desempenho diretamente de usuários reais no site. Exemplos: Sentry, New Relic Browser.

A escolha do método depende dos objetivos: para uma avaliação rápida, os serviços online são adequados; para análise detalhada e depuração, as ferramentas de desenvolvimento; e para monitoramento regular e integração nos processos de desenvolvimento, automação e sistemas RUM.

Como medir a velocidade de carregamento de um site?