laboratório
Este procedimento faz parte de um laboratório que ensina como solucionar problemas do seu aplicativo da web com o New Relic .
Cada procedimento no laboratório baseia-se no anterior, portanto, certifique-se de ter concluído o último procedimento, Depurar erros no seu aplicativo, antes de iniciar este.
Depois de corrigir erros de JavaScript em seu aplicativo, você e sua equipe se sentem confiantes. Pronto para o seu tempo de inatividade, você acessa as redes sociais, mas verifica o Twitter e vê alguns clientes confusos:
Ah, ah! Vocês, clientes, não parecem felizes. É hora de usar o monitoramento de browser New Relic para descobrir a origem do atraso.
Importante
Para visualizar seus dados no New Relic, você precisa habilitar o monitoramento do Browser para este procedimento.
Se ainda não o fez, instrumente seu aplicativo com nosso agente browser.
Depure a lentidão no seu aplicativo
Na página inicial do New Relic, navegue até Browser e escolha seu aplicativo Relicstaurants .
Aqui você vê todos os dados relacionados ao seu aplicativo de browser, incluindo Page views with JavaScript errors, Core web vitals, User time on the site, Initial page load and route changes e outros.
Observe o largest contentful paint (LCP).
A pintura de maior conteúdo (LCP) representa a rapidez com que o conteúdo principal de uma página da web é carregado. Idealmente, o conteúdo não deve demorar mais do que um ou dois segundos para carregar. Aqui você vê que seu site carrega em mais de 5 segundos. Não é à toa que seu usuário está reclamando!
Mas o que está causando esse atraso? Processo interno?
Role para baixo e observe o gráfico Front end vs. back end .
Clique em Back end (time to first byte) (50%) para filtrar o gráfico e ver quanto tempo backend leva para carregar.
O gráfico indica que o back-end levou no máximo 140 mili segundos para processar a solicitação na pior das hipóteses. Isso significa que seu frontend está causando atraso?
Clique em Front end (Window load + AJAX) (50%).
Aí está o problema! O gráfico indica que o atraso está acontecendo no frontend.
Para restringir o que pode estar causando o atraso no front-end, observe mais de perto o gráfico Initial page load and route change .
Clique em Initial page load (Window load + AJAX).
O gráfico indica que Initial page load (Window load + AJAX) está demorando de 5 a 6 segundos, o que é alarmante.
Clique em Initial page load and route change para ver mais detalhes.
Isso leva você para Page views.
Classifique as páginas por Most time-consuming.
Observe que a página inicial está demorando quase 90% para carregar.
Clique nele para ver seus detalhes.
Esta página mostra Page view breakdown, Median initial page load time e outros detalhes importantes. O gráfico Page view breakdown é especialmente importante aqui, pois ajuda a definir por que e onde sua página está demorando mais. Ao examinar este gráfico mais de perto, você verá que Page rendering está demorando até 5.000 milissegundos.
Agora você sabe que a página inicial está demorando muito para ser renderizada, tornando seu aplicativo lento. A seguir, observamos Session traces para descobrir o que está retardando o processo de renderização.
Saia desta visualização clicando em X no canto superior direito.
Na navegação à esquerda, navegue até Session traces e classifique-os na ordem decrescente de Page load.
Aqui você vê o trace da sessão classificado na ordem do tempo Page load .
Na lista, clique no primeiro.
Isso leva você à página de detalhes Session traces .
Aqui você vê o trace completo daquela sessão específica. Esta página também mostra Backend, Dom Processing, Page Load e outras informações relacionadas trace .
Observe que Page load está demorando mais que o esperado. Você precisa de um cronograma detalhado da carga. Role o ponteiro para a esquerda e para a direita para ajustar a linha do tempo.
Percorra o trace para percorrer a janela de tempo e ver os detalhes do evento individual durante esta sessão.
Observe que um evento específico está demorando mais de 5 segundos.
Clique no evento para ver seus detalhes.
Observe que é uma imagem. Particularmente, é a imagem de fundo do seu aplicativo que leva de 5 a 6 segundos para carregar e causa atraso.
Com base nessas descobertas, você levanta a hipótese de que a imagem de fundo é a culpada aqui. Imagens de alta resolução e não otimizadas são o motivo mais comum por trás da lentidão do site. Boas notícias! agora que você sabe o motivo, pode resolver o problema.
Resumo
Recapitulando, você observou lentidão em sua aplicação e utilizou o monitoramento de browser New Relic para:
- Observe core web vitals do seu site
- Limite as fontes de lentidão
Trabalho de casa
Bom trabalho! Agora que você já começou com nosso monitoramento, aqui estão alguns documentos que ajudarão você a dar os próximos passos em sua jornada.