Esta tradução de máquina é fornecida para sua comodidade.

Caso haja alguma divergência entre a versão em inglês e a traduzida, a versão em inglês prevalece. Acesse esta página para mais informações.

Criar um problema

Laboratório parte 4: Depure a lentidão do front-end em seu aplicativo

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:

unhappy customers

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 .

view 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.

Relicstaurants summary

Observe o largest contentful paint (LCP).

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 .

frontend vs backend graph

Clique em Back end (time to first byte) (50%) para filtrar o gráfico e ver quanto tempo backend leva para carregar.

backend time consumption

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%).

frontend time consumption

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 .

page load graph

Clique em Initial page load (Window load + AJAX).

initial page load

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.

page load details

Isso leva você para Page views.

page views

Classifique as páginas por Most time-consuming.

sort page

Observe que a página inicial está demorando quase 90% para carregar.

most time consuming pages

Clique nele para ver seus detalhes.

most time consuming page detail

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.

page rendering

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.

most time consuming pages

Aqui você vê o trace da sessão classificado na ordem do tempo Page load .

sorted session traces

Na lista, clique no primeiro.

trace detail

imagem mostrando o trace ordenado da sessão

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 .

full 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.

adjust trace timeline

Percorra o trace para percorrer a janela de tempo e ver os detalhes do evento individual durante esta sessão.

adjust time window

Observe que um evento específico está demorando mais de 5 segundos.

image trace

Clique no evento para ver seus detalhes.

image trace detail

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:

  1. Observe core web vitals do seu site
  2. 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.