Criar benchmark de desempenho de front-end

A arquitetura do seu sistema é composta de hosts, aplicativos e serviços que afetam e dependem uns dos outros. Se uma parte da sua arquitetura apresentar desempenho inferior, isso poderá levar a interrupções críticas do sistema posteriormente. O nível de serviço, no entanto, permite aplicar limites que facilitam o controle do seu sistema. Se o desempenho de um serviço exceder ou ficar abaixo de um determinado limite, você receberá um alerta. Aqui estão as camadas do nível de serviço:

Um nível de serviço é composto de objetivos de nível de serviço (SLOs). SLOs são metas que representam como você espera que seus serviços se comportem.
Seus SLOs são definidos por indicadores de nível de serviço (SLIs). SLIs são medidas e métricas importantes que determinam a disponibilidade do serviço.
Para além destes objectivos alertam-se indicadores. Eles notificam você quando seus serviços não atendem aos seus SLOs.

Objetivos

Este tutorial orienta você na criação de benchmark de desempenho com nível de serviço. Ao final do tutorial, você terá estas tarefas concluídas:

Entenda a relação entre indicadores de nível de serviço (SLIs) e objetivos de nível de serviço (SLOs).
Crie e defina SLIs e SLOs para sua experiência de front-end.
Configure o alerta para saber quando seus serviços apresentam queda no desempenho.

Defina seu nível de serviço

Definir e gerenciar seu nível de serviço seguindo as etapas abaixo permite:

Facilite configurações futuras: Estabeleça automaticamente uma baseline de desempenho e confiabilidade para qualquer serviço com uma configuração com um clique.
Defina a confiabilidade entre as equipes: evite processos árduos de alinhamento com recomendações de SLO e SLI que ajudam a determinar os limites do serviço. Defina benchmark de confiabilidade automaticamente com base em métricas de desempenho recentes em qualquer entidade.
Iterar e melhorar: com contextostack e automação por meio de ferramentas de infraestrutura como código de código aberto, como o Terraform, as equipes têm insights sobre como nós ou serviços específicos impactam a confiabilidade do sistema e podem assumir rapidamente o controle sobre seu desempenho. Visualizações personalizadas para proprietários de serviços e líderes de negócios impulsionam a eficiência operacional e levam a melhores processos de relatórios, alertas e gerenciamento de incidentes.
Padronize a confiabilidade: as equipes interorganizacionais têm uma visão unificada e transparente da confiabilidade do serviço e podem cumprir melhor o SLA voltado para os clientes. As métricas de conformidade do SLO e os orçamentos de erros oferecem à organização uma maneira de relatar a confiabilidade e implementar mudanças em aplicativos, infraestrutura e equipes de maneira coesa.

Crie seu benchmark de desempenho

Selecione indicadores de nível de serviço:

Embora haja uma grande quantidade de SLIs que você pode usar para definir seu benchmark de experiência de front-end, a seguir estão alguns que recomendamos especificamente. Cada recolhedor tem uma explicação de quando você deve escolher aquele SLI e uma consulta NRQL correspondente (que você usará na etapa 2).

Por enquanto, basta selecionar um dos seguintes:

SLIs for APM services instrumented with the New Relic agent: com base no evento Transaction , esses SLIs são os mais comuns para serviços orientados por solicitação:

O sucesso do serviço é a razão entre o número de respostas bem-sucedidas e o número de todas as solicitações. Efetivamente, esta é uma taxa de erros, mas você pode filtrá-la, por exemplo, removendo erros esperados.

Valid events fields

FROM: Transaction
WHERE: entityGuid = '{entityGuid}'

Onde {entityGuid} é o GUID do serviço.

Bad events fields

FROM: TransactionError
WHERE: entityGuid = '{entityGuid}' AND error.expected IS FALSE

Onde {entityGuid} é o GUID do serviço.

Um SLI de latência mede a proporção de solicitações válidas que foram atendidas mais rapidamente do que o limite estabelecido como uma boa experiência.

Para determinar esse limite de duração, verifique o desempenho do serviço nas últimas semanas e use esse resultado como uma baseline realista e alcançável. Depois, você poderá iterar no limite do SLI e alinhá-lo com um desempenho mais ambicioso.

Para selecionar um valor apropriado para a condição de duração, uma prática típica é selecionar a duração do percentil 95 das respostas dos últimos 7 ou 15 dias. Encontre esse limite de duração usando o criador de consulta e use-o para determinar um bom evento para seu SLI:

SELECT percentile(duration, 95) FROM Transaction WHERE entityGuid = '{entityGuid}' since 7 days ago limit max

Valid events fields

FROM: Transaction
WHERE: entityGuid = '{entityGuid}' AND transactionType = 'Web'

Onde {entityGuid} é o GUID do serviço.

Good events fields

FROM: Transaction
WHERE: entityGuid = '{entityGuid}' AND transactionType = 'Web' AND duration < {duration}

Onde {entityGuid} é o GUID do serviço.
Onde {duration} é o tempo de resposta que você considera que proporciona uma boa experiência para seu atendimento ao cliente ou usuário final, em segundos.

SLIs for browser applications: os SLIs a seguir baseiam-se nos core web vitals do Google.

É a proporção de visualizações de páginas exibidas sem erros.

Valid events fields

FROM: PageView
WHERE: entityGuid = '{entityGuid}'

Onde {entityGuid} é o GUID do serviço.

Bad events fields

FROM: JavaScriptError
WHERE: entityGuid = '{entityGuid}' AND firstErrorInSession IS true

Onde {entityGuid} é o GUID do aplicativo do browser.

É a proporção de visualizações de páginas válidas em que o maior elemento de conteúdo visível na janela de visualização foi renderizado mais rapidamente do que o limite considerado correspondente a uma boa experiência.

Valid events fields

FROM: PageViewTiming
WHERE: entityGuid = '{entityGuid}' AND largestContentfulPaint IS NOT NULL

Onde {entityGuid} é o GUID do serviço.

Good events fields

FROM: PageViewTiming
WHERE: entityGuid = '{entityGuid}' AND largestContentfulPaint < '{largestContentfulPaint}'

Onde {entityGuid} é o GUID do aplicativo do browser.
Onde {largestContentfulPaint} é o tempo (em milissegundos) para renderizar o maior elemento de conteúdo visível na janela de visualização que você considera proporcionar uma boa experiência para o usuário final. Um padrão frequente é 4.000 ms.

Para determinar um número realista a ser usado para {largestContentfulPaint} em seu ambiente, uma prática típica é selecionar a duração do percentil 95 das respostas dos últimos 7 ou 15 dias. Encontre-o usando o criador de consulta:

SELECT percentile(largestContentfulPaint, 95) FROM PageViewTiming WHERE entityGuid = '{entityGuid}' SINCE 7 days ago LIMIT MAX

É a proporção de visualizações de páginas em que o tempo entre a primeira interação do usuário com a página e o tempo em que o browser responde a essa interação é inferior a um determinado limite.

Valid events fields

FROM: PageViewTiming
WHERE: entityGuid = '{entityGuid}' AND interactionToNextPaint IS NOT NULL

Onde {entityGuid} é o GUID do serviço.

Good events fields

FROM: PageViewTiming
WHERE: entityGuid = '{entityGuid}' AND interactionToNextPaint < {interactionToNextPaint}

Onde {entityGuid} é o GUID do aplicativo do browser.
Onde {interactionToNextPaint} é o tempo (em milissegundos) que o browser deve responder para fornecer uma boa experiência ao usuário final. Um padrão frequente é 300 ms.

Para determinar um número realista a ser usado para {interactionToNextPaint} em seu ambiente, uma prática típica é selecionar a duração do percentil 95 das respostas dos últimos 7 ou 15 dias. Encontre-o usando o criador de consulta:

SELECT percentile(interactionToNextPaint, 95) FROM PageViewTiming WHERE entityGuid = '{entityGuid}' SINCE 7 days ago LIMIT MAX FACET deviceType

É a proporção de visualizações de página com uma boa mudança cumulativa de layout (CLS). CLS é descrito como a soma total de todas as pontuações individuais de mudança de layout para cada mudança inesperada de layout que ocorre durante toda a vida útil da página. Uma mudança de layout ocorre sempre que um elemento visível muda sua posição de um quadro renderizado para o próximo.

Valid events fields

FROM: PageViewTiming
WHERE: entityGuid = '{entityGuid}' AND cumulativeLayoutShift IS NOT NULL

Onde {entityGuid} é o GUID do serviço.

Se desejar criar SLIs separados para rastrear CLS em desktops e dispositivos móveis separadamente, adicione uma destas cláusulas no final do campo:

and deviceType = 'Mobile'
and deviceType = 'Desktop'

Good events fields

FROM: PageViewTiming
WHERE: entityGuid = '{entityGuid}' AND cumulativeLayoutShift < {cumulativeLayoutShift}

Onde {entityGuid} é o GUID do aplicativo do browser.
Onde {cumulativeLayoutShift} é um valor predefinido. Para fornecer uma boa experiência ao usuário, seu site deve se esforçar para ter uma pontuação CLS de 0,1 ou menos. Uma pontuação CLS de 0,25 ou mais é considerada uma experiência do usuário ruim.

Se você decidiu criar SLIs separados para rastrear CLS em desktops e dispositivos móveis separadamente quando definiu a consulta de evento válida, adicione esta cláusula no final do campo:

and deviceType = 'Mobile'
and deviceType = 'Desktop'

Para determinar um número realista a ser selecionado para {cumulativeLayoutShift} em seu ambiente, uma prática típica é selecionar o 75º percentil de carregamentos de página nos últimos 7 ou 15 dias, segmentados em dispositivos móveis e desktop. Encontre-o usando o criador de consulta:

SELECT percentile(cumulativeLayoutShift, 95) FROM PageViewTiming WHERE  entityGuid = '{entityGuid}' since 7 days ago limit max facet deviceType

Dica

Sua organização deve definir SLOs e SLIs com base em suas necessidades específicas, nas expectativas do usuário e nos recursos disponíveis. Após concluir este tutorial, recomendamos que você aprenda mais sobre como definir nível de serviço personalizado granular.

Navegue até
one.newrelic.com > All capabilities > Service levels management
. Esta interface mostra todo o seu nível de serviço e permite defini-los, monitorá-los e editá-los.
Selecione
+ Add a service level
no canto superior direito da interface.

Escolha a entidade correspondente para a qual você deseja criar um nível de serviço. Pode ser uma workload inteira, um serviço específico, um monitor Sintético ou até mesmo uma transação específica. Depois de selecionar sua entidade, clique em Continue no lado esquerdo do painel da interface.

Defina o SLI que você escolheu na etapa um neste painel. Por exemplo, se você escolher definir um SLI para o sucesso do aplicativo do browser, você usaria a seguinte consulta:

Query for valid events:

FROM: PageView
WHERE: entityGuid = '{entityGuid}'

Query for bad events:

FROM: JavaScriptError
WHERE: entityGuid = '{entityGuid}' AND firstErrorInSession IS true

Selecione Continue no painel esquerdo depois de confirmar que suas consultas estão corretas.

Qual é o próximo?

Parabéns! Você completou nossa jornada sobre como usar o New Relic para melhorar o desempenho do seu site! Neste tutorial, você aprendeu algumas coisas sobre como melhorar o desempenho do seu site. Você aprendeu como:

Desbloqueie dados que podem fornecer insights sobre o desempenho atual do seu site, por instrumento seu site.
Avalie seus core web vitals para que você possa tomar as decisões corretas sobre como melhorar a experiência do usuário final.
Faça melhorias em seu site corrigindo a alta latência e reduzindo erros de JavaScript
Crie um benchmark de desempenho para monitorar o desempenho ao longo do tempo.

A New Relic oferece outros recursos que podem ajudá-lo a melhorar o desempenho. Embora este tutorial tenha se concentrado em seu site, você pode conferir nossos outros tutoriais:

Seu aplicativo está lento? Confira Meu aplicativo é lento para solucionar e corrigir problemas comuns com seus aplicativos.
Sua infraestrutura é um instrumento, mas você não sabe como grok os dados do seu host? Confira nosso tutorial sobre solução de problemas de hosts com dados de infra .
Precisa de alerta, mas não sabe por onde começar? Confira nosso tutorial Criar e gerenciar alertas .

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

Criar benchmark de desempenho de front-end

Objetivos

Defina seu nível de serviço

Crie seu benchmark de desempenho

Selecione indicadores de nível de serviço:

Sucesso do serviço

Latência de serviço

Sucesso do aplicativo de browser

Maior pintura com conteúdo do aplicativo de browser

Interação do aplicativo browser para a próxima pintura

Mudança cumulativa de layout do aplicativo do browser

Dica

Qual é o próximo?

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

Criar benchmark de desempenho de front-end

Objetivos .css-21sua1{background:none;border:none;width:0;padding:0;}

Defina seu nível de serviço

Crie seu benchmark de desempenho

Selecione indicadores de nível de serviço:

Latência de serviço

Sucesso do aplicativo de browser

Maior pintura com conteúdo do aplicativo de browser

Interação do aplicativo browser para a próxima pintura

Mudança cumulativa de layout do aplicativo do browser

Dica

Qual é o próximo?

Objetivos