A manutenção de um site combina os esforços de várias equipes. Quando ocorrem interrupções, as equipes de desenvolvedores e engenharia podem resolver os problemas diretamente, mas um profissional de marketing digital pode não ter o mesmo acesso à administração do site. Como profissional de marketing digital, o sucesso da sua equipe depende igualmente do desempenho do site, mas talvez você não tenha as ferramentas para identificar ou resolver qualquer problema sozinho.
Nossa ferramenta de monitoramento de desempenho de sites (WPM) fornece insights sobre a disponibilidade e o desempenho do seu site. Com o pronto para uso e as verificações de rotina do nosso monitor, você nunca terá dúvidas sobre o desempenho do seu site.
Depois que os dados forem coletados, você poderá visualizar diferentes gráficos que rastreiam os detalhes do usuário sobre os ativos da sua página. Juntos, eles podem ajudá-lo a entender como é a experiência do usuário em seu site.
Objetivos
Este documento ajuda você a configurar nossa ferramenta de monitoramento de sites sem código e, em seguida, orienta você na compreensão de seus dados. Neste tutorial, você irá:
Configure o monitoramento sem instalação
Saiba mais sobre seus dados coletados
Configurar monitoramento de desempenho de sites
Obtenha dados sem instalação
O monitoramento do desempenho dos sites não requer instalação ou configuração. Atualmente, ele oferece suporte apenas ao browser de desktop. Para acessar seus dados, vá para one.newrelic.com > Website performance monitoring.
Escolha seu URL
Depois de escolher as páginas para monitor, a New Relic implantará um conjunto de monitores de diferentes servidores ao redor do mundo que verifica sua página quanto à disponibilidade do site, links quebrados, desempenho e expiração do certificado SSL. Para começar, recomendamos escolher sua página inicial.
O New Relic levará alguns minutos para implantar o monitor e então você começará a receber dados sobre o seu site. Lembre-se de que seu monitor verifica apenas o desempenho das páginas que você adicionou manualmente.
Adicionar chave de API do Google PageSpeed
Extraímos core web vitals da API do Google para que as pontuações no New Relic correspondam às que você tem no Google. Para continuar capturando essas pontuações após a configuração inicial, você precisará criar uma chave de API do Google PageSpeed.
Coloque seus dados em contexto
Depois que seu monitor reportar os dados para a New Relic, você verá métricas que podem ajudá-lo a melhorar a experiência do usuário e a classificação de SEO. Abaixo estão exemplos dos tipos de dados que você verá em sua página de resumo.
A primeira seção mostra os dados de ping. Este tipo de dados é uma verificação de disponibilidade, confirmando funcionalidades básicas do site:
Site availability. Isso informa se sua página foi carregada. Caso contrário, pode haver um problema com seus servidores ou domínio.
Page load time. Isso coleta a velocidade média de quanto tempo leva para sua página carregar todos os seus ativos. Esses dados são divididos por tipo e tamanho de conteúdo.
SSL Validity. Isso informa se o seu certificado SSL é válido, está expirando ou expirou. Incluirá também a data em que você precisa renovar seu certificado SSL.
Broken links. Depois de testar todos os links da sua página, ele informará quais links estão quebrados.
Nosso monitor captura o comportamento do site por meio de monitores que interagem com seu site. Isso permite que você veja dados atualizados diariamente para que você nunca precise adivinhar quando os ativos ou páginas falham ao carregar.
O WPM extrai opcionalmente seus core web vitals da API PageSpeed do Google no mesmo cronograma de suas outras verificações sintéticas. Isso fornece uma leitura periódica e de alto nível sobre o desempenho, mas não é um feed ao vivo de seus visitantes reais. Se precisar ver como é a experiência do usuário real no seu site em seus próprios dispositivos e redes, consulte O que vem a seguir para saber como adicionar o monitoramento de usuário real junto ao WPM.
First contentful paint. Isso captura o tempo que leva para o primeiro ativo carregar em uma página. Na captura de tela acima, o site demorou 3,22s para que algo carregasse na página.
Largest contentful paint. Ao contrário da primeira pintura com conteúdo, captura o tempo necessário para o maior conteúdo da página carregar totalmente. Por exemplo, se informações sobre uma campanha importante aparecem no maior ativo de uma página, esse número nos informa quanto tempo um usuário espera antes de vê-la. Na captura de tela acima, demorou 2,79s.
Interaction to next paint. Quando um usuário interage com um elemento em seu site, leva tempo para processar a interação do usuário. Esse número captura esse tempo como um atraso entre a solicitação (interação do usuário) e a resposta (como a página muda com base na solicitação do usuário).
Cumulative layout shift. Isso mede a estabilidade visual de diferentes ativos em seu site. Por exemplo, depois que um usuário acessa a página principal do seu site, as imagens podem mudar durante o carregamento. Este movimento é inesperado.
Coletamos dados ao longo do tempo para que você possa ter uma visão mais detalhada do desempenho do seu site. Você pode aumentar e diminuir o zoom nas janelas de tempo e ver como seus dados mudam em torno de um incidente específico, como no gif acima. Quando terminar, clique no botão de carimbo de data/hora na parte superior para voltar ao período de sua preferência.
Sua página da web é composta por diferentes tipos de conteúdo, como HTML, imagens, JavaScript e vídeos. Nossos gráficos de conteúdo mostram o desempenho de diferentes tipos de conteúdo em relação uns aos outros. Por exemplo:
Content size mostra o tamanho em kilobytes de cada tipo. Referindo-se ao gráfico acima, você pode ver que o tipo de conteúdo JavaScript é proporcionalmente menor do que as imagens em uma determinada página. Se o desempenho do seu site estiver baixo, você pode solicitar que sua equipe de desenvolvimento otimize seu site no nível do código.
Content sources detalha onde seu conteúdo está hospedado por tamanho. Por exemplo, no gráfico acima, a maior parte do seu conteúdo é proveniente da New Relic, representado pelo amarelo. Se o seu conteúdo estiver otimizado, mas ainda quebrado na sua página, alterar a origem do seu conteúdo pode resolver esse erro.
Content load time mostra quanto tempo leva para carregar um determinado tipo de conteúdo em relação ao tempo de carregamento de toda a página.
Network detalha como o conteúdo é entregue à página e quanto tempo leva para entregá-lo.
Se sua página estiver carregando lentamente, você poderá usar a seção Content para diagnosticar possíveis fontes do problema. Por exemplo, comparar Content size com Content load time pode fornecer insights sobre se o CSS está consumindo muitos recursos e sendo carregado por último, o que causaria um atraso na pintura com maior conteúdo. Se o tamanho do conteúdo for ideal, mas o carregamento da página ainda estiver lento, talvez seja um problema de rede ou de origem.
Se o envolvimento do usuário diminuir, mas seu site estiver disponível e o conteúdo otimizado, então algo mais pode estar em jogo. Uma possível jornada para solucionar problemas pode ser assim:
Verifique a disponibilidade da sua página. Ele lê como disponível.
Seus core web vitals estão sendo reportados como Good em todos os níveis.
Você percebe que os dados da fração de tempo mostram uma queda acentuada no tráfego no dia anterior, na época em que sua equipe fez atualizações em sua página de destino.
Você percebe que um link quebrado foi relatado. É um link dentro de um banner usado em seu site.
Neste ponto, você pode coordenar com as equipes relevantes para corrigir o link quebrado e implantar uma atualização para o restante do site.
Qual é o próximo?
O monitoramento do desempenho de sites oferece uma leitura sem instalação da disponibilidade e dos core web vitals do seu site — útil quando você não tem acesso de engenharia ao seu site. É inerentemente uma verificação sintética e de baixa frequência: os monitores são executados periodicamente a partir de alguns locais externos, e os core web vitals vêm da API PageSpeed do Google em vez dos seus próprios visitantes.
Para obter uma visão contínua da experiência do usuário real no seu site, adicione o monitoramento de Browser. Ele instrumenta suas páginas diretamente, de modo que cada métrica seja proveniente de sessões reais de visitantes em vez de amostras periódicas.
Veja como os dois se comparam:
Monitoramento do desempenho de sites
Monitoramento de browser
Fonte de dados
Verificações sintéticas + Google PageSpeed API
Sessões de visitantes reais
Configurar
Sem instalação
Instale o agente do browser
Core web vitals
Periódico, baseado em laboratório
Contínuo, de usuários reais
Separação
Nenhum
Por navegador, dispositivo, geografia e muito mais
Detalhes do erro e da sessão
Não disponível
Erros de JS, traces da sessão e Session Replay
Recomendamos o WPM como uma verificação de baseline (tempo de operação, links quebrados, expiração de SSL) e o monitoramento de Browser como sua fonte de verdade para a experiência do usuário real e tendências de core web vitals. Para começar:
Instale o agente do browser para começar a capturar carregamentos de página reais, core web vitals e erros de JS.
Detalhe o desempenho por tipo de navegador e geografia para encontrar problemas que afetam apenas parte do seu tráfego — algo que alguns pontos de observação sintéticos não conseguem revelar.
