Os clientes se preocupam muito com o desempenho da Web e dependem de nós para articular e medir o desempenho de seus sites. Se o senhor tiver um contrato de nível de serviço (SLA) com seu cliente, e o senhor deve fazer isso, então aprender a medir as principais métricas é fundamental para o senhor e sua empresa. Há excelentes produtos pagos no mercado que podem acompanhar o desempenho de um site, mas há muitos sites e APIs JavaScript que podem ajudá-lo a medir essas métricas gratuitamente.
Monitoramento do usuário real (RUM)
O monitoramento de usuários reais é coletado usando dados de… bem, usuários reais! Ele ajuda a identificar quanto tempo os usuários reais levam para processar a solicitação, renderizar o DOM e muito mais. Há produtos pagos muito bons que podem medir e fornecer painéis on-line para visualização de dados RUM, como Monitoramento de navegador da New Relic e mPulse da Soastamas se o senhor tiver um orçamento limitado, pode ser difícil pagar por esses serviços. Felizmente, existem ferramentas incorporadas na maioria dos navegadores que pode nos ajudar!
Há duas APIs Javascript que, em sua maior parte, coletam os mesmos dados que muitos produtos pagos coletam e relatam. A primeira é a API de tempo de navegação. Essa API permite que o senhor veja a que horas diferentes eventos foram disparados ao carregar uma página. Vamos dar uma olhada agora mesmo! Se estiver no Chrome ou no Firefox enquanto lê isto, abra o console clicando com o botão direito do mouse na página e escolhendo Inspecionar elemento. Em seguida, no console, cole performance.timing e pressione enter/return. O senhor deverá ver algo parecido com isto:
Cada um desses valores é o momento em que diferentes eventos foram disparados ao carregar a página. O senhor pode verificar a especificação para ver uma descrição de cada evento. Para mostrar um exemplo, se o senhor quisesse obter o tempo necessário para carregar o DOM, usaria esta equação: domComplete – domLoading. Observe que o tempo é medido em milissegundos. O senhor Navigation Timing API é bem suportada na maioria dos navegadores. O suporte começa no IE 9+, Chrome, Firefox, Safari 8+, Opera e Android. O Safari para iOS e o Opera Mini são os únicos que não são compatíveis.
A próxima API Javascript é a API de tempo de recursos. Essa API permite que o senhor veja quanto tempo cada recurso (imagens, arquivos Javascript, arquivos CSS, etc.) levou para ser obtido. Isso pode ser útil para identificar quais arquivos estão demorando mais para carregar. Voltemos ao console e colemos window.performance.getEntriesByType(“resource”) para ver um exemplo.
O senhor perceberá que ela é muito semelhante à API Navigation Timing, com algumas diferenças. Essa API fornece ao senhor o tipo de recurso, neste caso uma imagem, e também o nome do recurso, neste caso resource-timing-overview-1.png. Ela também ajuda a calcular a duração para o usuário, o que é feito usando a equação responseEnd – startTime. Essa API tem o mesmo suporte do navegador que a API Navigation Timing, exceto pelo fato de o Safari não ser compatível com ela.
Há outras APIs disponíveis que não têm grande suporte do navegador, mas são imensamente úteis para determinar métricas mais significativas. A primeira é a API de tempo do usuário que pode ajudá-lo a medir o tempo que suas solicitações AJAX estão levando ou ajudá-lo a medir outras tarefas de Javascript. Suporte a navegadores não é o melhor, mas os navegadores Chrome, IE 10+ e Android são compatíveis no momento. Outra API é a API de informações de rede. Uma das maiores desvantagens da coleta de dados RUM é não poder determinar que tipo de conexão de rede o usuário está usando. Essa informação é útil porque as redes móveis levam mais tempo para buscar um site do que as redes a cabo. O suporte do navegador é limitado porque o Firefox OS e o Chromium são os únicos navegadores que suportam a API no momento.
Para começar a coletar dados do RUM, o senhor pode criar um script Javascript que seja executado no onLoad, calcule as medições e use AJAX para enviar as informações a um script do lado do servidor que armazenará esses dados no banco de dados. Daremos uma olhada em um exemplo disso mais tarde.
Testes sintéticos
Testar na natureza com dados RUM é essencial, mas tem suas limitações. Precisamos de uma maneira de controlar as variáveis, como velocidade de conexão, localização geográfica e o navegador do usuário. Além disso, para obter dados realmente significativos, precisamos ver como o site está sendo carregado para o usuário por meio de vídeo ou imagens. Há ótimos produtos pagos que nos permitem ter essa configuração de tipo de laboratório, como o Synthetics da New Relic e Testes sintéticos e monitoramento da Catchpointmas vamos dar uma olhada em uma ferramenta gratuita que atende a essas necessidades: WebPageTest.org.
O WebPageTest facilita muito o teste sintético de um site gratuitamente. Ao acessar o site, insira o URL que deseja testar, selecione o local de onde deseja fazer o teste e selecione o navegador que deseja usar para o teste. Nas configurações avançadas, o senhor pode definir a velocidade da conexão, quantos testes executar, se deseja capturar o vídeo do carregamento da página e muito mais. Depois de executar o teste, o senhor obterá resultados como este:
O WebPageTest dá ao senhor uma nota por letra para diferentes métricas e fornece informações detalhadas sobre como a página foi carregada, inclusive com a utilização da CPU e da largura de banda. Há três métricas que podem lhe fornecer dados significativos: First Byte, Speed Index e Bytes In. O primeiro byte é o tempo que o senhor levou para fazer a solicitação ao site e para que o servidor enviasse o primeiro byte de volta ao navegador. Essa métrica também tem um grau de letra fornecido. Se essa métrica for alta, ou seja, receber uma nota C ou pior, isso pode significar que o servidor está levando muito tempo para processar as informações antes de enviá-las de volta ao navegador. Isso também pode significar que o navegador leva muito tempo para se conectar ao domínio.
A segunda métrica significativa é o Speed Index. O Speed Index foi desenvolvido pelo WebPageTest para calcular o tempo necessário para que o conteúdo acima da dobra seja carregado para o usuário. Isso é significativo porque nos fornece uma métrica da velocidade percebida do seu site. Se o conteúdo acima da dobra estiver carregando rapidamente, o usuário ficará mais satisfeito. Se for lento, o usuário pode ficar desinteressado e ir embora. Uma boa regra geral é manter o Speed Index em 1000, o que equivale a 1 segundo.
Bytes In é a quantidade de kilobytes necessários para baixar o conteúdo da página. A tendência ao longo dos anos mostra que o tamanho das páginas está aumentando ano após ano. Isso é um problema porque páginas da Web maiores demoram mais para carregar em redes móveis e a maior parte do tráfego na Internet vem de dispositivos móveis. Pode levar vários segundos para que um navegador móvel receba o primeiro byte em um dispositivo móvel e o temos apenas 3 segundos para levar o conteúdo ao usuário antes que até 40% deles abandonem a solicitação. É por isso que é melhor manter o tamanho da página em 1000 kilobytes. O senhor pode conseguir isso otimizando as imagens, carregamento lento de conteúdo abaixo da dobra, concatenação e minificação de arquivos CSS e Javascript e uso de outras técnicas de otimização.
Outra ferramenta excelente é a análise quadro a quadro de como o site foi carregado usando a exibição Filmstrip. Isso nos permite ver a experiência real do usuário e identificar quais áreas podem ser melhoradas em termos de carregamento do conteúdo mais importante, acima da dobra. O gráfico em cascata também é excelente para identificar quais recursos estão demorando mais para carregar e em que ordem estão sendo carregados. Recentemente, o WebPageTest adicionou um novo recurso chamado Custo, que permite que o senhor veja quanto custaria para visualizar um site em um dispositivo móvel em diferentes países. Esse recurso ajuda a mostrar a importância de manter o tamanho da página baixo. Há até mesmo um API gratuita do WebPageTest que o senhor pode usar para incorporar em seus testes por meio de chamadas e respostas AJAX. Isso permite que o senhor envie os dados sintéticos para o mesmo banco de dados que os dados RUM e, em seguida, exiba todos os dados para ver como melhorar um site. Contato Patrick Meenan para obter uma chave de API.
A necessidade de velocidade
Nos últimos anos, percebi que os clientes estão sempre perguntando sobre desempenho, mas não sabem exatamente quais perguntas fazer ou como medir o desempenho. Para eles, é preto e branco: ou o site é rápido ou é lento. As empresas e os freelancers que se destacam são aqueles que têm um SLA de desempenho com padrões e práticas recomendadas e são transparentes quanto ao desempenho dos sites de seus clientes. Nunca foi tão fácil acompanhar os dados de desempenho usando ferramentas e painéis de código aberto como o Ferramenta de desempenho Nines. Ela permite que o senhor veja as informações por meio de um pequena barra de ferramentas em um site ou veja os dados por meio de um painel de controle usando os gráficos do Google. Quer o senhor use um serviço pago ou uma ferramenta de código aberto, comece a testar hoje mesmo! Lembre-se de que #perfmatters!
