Créer une évaluation des performances front-end

L’architecture de votre système est composée d’hôtes, d’applications et de services qui s’influencent et dépendent les uns des autres. Si une partie de votre architecture est sous-performante, cela peut entraîner ultérieurement des pannes critiques du système. niveau de service, cependant, vous permet d'appliquer des seuils qui facilitent le suivi de votre système. Si les performances d’un service dépassent ou descendent en dessous d’un seuil donné, vous recevez une alerte. Voici les couches jusqu'au niveau de service :

Un niveau de service est composé d’objectifs de niveau de service (SLO). Les SLO sont des objectifs qui représentent la manière dont vous attendez que vos services se comportent.
Vos SLO sont définis par des indicateurs de niveau de service (SLI). Les SLI sont des mesures et indicateurs clés qui déterminent la disponibilité du service.
Au-dessus de ces objectifs s'ajoutent des indicateurs d'alertes. Ils vous avertissent lorsque vos services ne parviennent pas à respecter vos SLO.

Objectifs

Ce didacticiel vous guide dans la création d'une évaluation des performances avec niveau de service. À la fin du didacticiel, vous aurez terminé ces tâches :

Comprendre la relation entre les indicateurs de niveau de service (SLI) et les objectifs de niveau de service (SLO).
Créez et définissez des SLI et des SLO pour votre expérience frontend.
Configurez des alertes pour savoir quand vos services connaissent une baisse de performances.

Définissez votre niveau de service

Définir et gérer votre niveau de service en suivant les étapes ci-dessous vous permet de :

Facilitez la configuration future : établissez automatiquement une base de référence de performances et de fiabilité pour n'importe quel service avec une configuration en un clic.
Définissez la fiabilité au sein des équipes : évitez les processus d’alignement ardus grâce aux recommandations SLO et SLI qui vous aident à déterminer les limites de service. Définissez automatiquement une évaluation de la fiabilité en fonction des mesures de performance récentes dans n'importe quelle entité.
Itérer et améliorer : avec un contexte full-stack et une automatisation via des outils infrastructureopen source en tant que code comme Terraform, les équipes disposent d'informations détaillées sur la manière dont des nœuds ou des services spécifiques impactent la fiabilité du système et peuvent rapidement prendre le contrôle de leurs performances. Les vues personnalisées pour les propriétaires de services et les chefs d'entreprise améliorent l'efficacité opérationnelle et conduisent à de meilleurs processus de reporting, d'alerte et de gestion incident .
Standardisez la fiabilité : les équipes interorganisationnelles ont une vue unifiée et transparente de la fiabilité du service et peuvent mieux se conformer aux SLA destinés aux clients. Les mesures de conformité SLO et les budgets d'erreur offrent à l'organisation un moyen de rendre compte de la fiabilité et de mettre en œuvre des changements dans les applications, infrastructure et les équipes de manière cohérente.

Créez votre évaluation de performance

Sélectionnez SLI :

Bien qu'il existe un grand nombre de SLI que vous pouvez utiliser pour définir l'évaluation de votre expérience front-end, voici quelques-uns que nous recommandons spécifiquement. Chaque collapser contient une explication du moment où vous devez choisir ce SLI et une requête NRQL correspondante (que vous utiliserez à l'étape 2).

Pour l'instant, sélectionnez simplement l'une des options suivantes :

SLIs for APM services instrumented with the New Relic agent:Sur la base de l'événement Transaction , ces SLI sont les plus courants pour les services pilotés par requête :

Le succès du service est le rapport entre le nombre de réponses réussies et le nombre total de requests. En fait, il s'agit d'un taux d'erreur, mais vous pouvez le filtrer, par exemple en supprimant erreurattendue.

Valid events fields

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

Où {entityGuid} est le GUID du service.

Bad events fields

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

Où {entityGuid} est le GUID du service.

Un SLI de latence mesure la proportion de requests valides qui ont été traitées plus rapidement que le seuil établi comme une bonne expérience.

Afin de déterminer ce seuil de durée, vérifiez les performances du service au cours des dernières semaines et utilisez ce résultat comme base de référence réaliste et réalisable. Ensuite, vous pouvez itérer sur le seuil SLI et l’aligner sur une performance plus ambitieuse.

Pour sélectionner une valeur appropriée pour la condition de durée, une pratique courante consiste à sélectionner la durée du 95e percentile des réponses pour les 7 ou 15 derniers jours. Trouvez ce seuil de durée à l'aide du générateur de requêtes, et utilisez-le pour déterminer le bon événement pour votre 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'

Où {entityGuid} est le GUID du service.

Good events fields

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

Où {entityGuid} est le GUID du service.
Où {duration} est le temps de réponse qui, selon vous, offre une bonne expérience à votre service client ou à votre utilisateur final, en secondes.

SLIs for browser applications:Les SLI suivants sont basés sur les principaux éléments essentiels du Web de Google.

Il s'agit de la proportion de pages vues qui sont diffusées sans erreurs.

Valid events fields

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

Où {entityGuid} est le GUID du service.

Bad events fields

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

Où {entityGuid} est le GUID de l'application du navigateur.

Il s'agit de la proportion de pages vues valides où le plus grand élément de contenu visible dans la fenêtre d'affichage a été rendu plus rapidement que le seuil considéré comme correspondant à une bonne expérience.

Valid events fields

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

Où {entityGuid} est le GUID du service.

Good events fields

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

Où {entityGuid} est le GUID de l'application du navigateur.
Où {largestContentfulPaint} est la durée (en millisecondes) nécessaire pour rendre visible dans la fenêtre d'affichage l'élément de contenu le plus volumineux qui, selon vous, offre une bonne expérience à votre utilisateur final. Une norme fréquente est de 4000 ms.

Pour déterminer un nombre réaliste à utiliser pour {largestContentfulPaint} dans votre environnement, une pratique courante consiste à sélectionner la durée du 95e percentile des réponses pour les 7 ou 15 derniers jours. Trouvez-le en utilisant le générateur de requêtes :

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

Il s'agit de la proportion de pages vues où le temps entre la première interaction d'un utilisateur avec la page et le moment où le navigateur répond à cette interaction est inférieur à un certain seuil.

Valid events fields

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

Où {entityGuid} est le GUID du service.

Good events fields

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

Où {entityGuid} est le GUID de l'application du navigateur.
Où {interactionToNextPaint} est le délai (en millisecondes) dans lequel le navigateur doit répondre pour offrir une bonne expérience à votre utilisateur final. Une norme fréquente est de 300 ms.

Pour déterminer un nombre réaliste à utiliser pour {interactionToNextPaint} dans votre environnement, une pratique courante consiste à sélectionner la durée du 95e percentile des réponses pour les 7 ou 15 derniers jours. Trouvez-le en utilisant le générateur de requêtes :

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

Il s'agit de la proportion de pages vues avec un bon décalage de mise en page cumulé (CLS). Le CLS est décrit comme la somme totale de tous les scores de décalage de mise en page individuels pour chaque décalage de mise en page inattendu qui se produit pendant toute la durée de vie de la page. Un changement de disposition se produit chaque fois qu'un élément visible change de position d'une image rendue à la suivante.

Valid events fields

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

Où {entityGuid} est le GUID du service.

Si vous souhaitez créer des SLI distincts pour suivre séparément les CLS sur les ordinateurs de bureau et les appareils mobiles, ajoutez l'une de ces clauses à la fin du champ :

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

Good events fields

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

Où {entityGuid} est le GUID de l'application du navigateur.
Où {cumulativeLayoutShift} est une valeur prédéfinie. Pour offrir une bonne expérience utilisateur, votre site doit s'efforcer d'avoir un score CLS de 0,1 ou moins. Un score CLS de 0,25 ou plus est considéré comme une mauvaise expérience utilisateur.

Si vous avez décidé de créer des SLI distincts pour suivre les CLS sur les ordinateurs de bureau et les appareils mobiles séparément lorsque vous avez défini la requête d'événement valide, ajoutez cette clause à la fin du champ :

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

Pour déterminer un nombre réaliste à sélectionner pour {cumulativeLayoutShift} dans votre environnement, une pratique courante consiste à sélectionner le 75e percentile des chargements de pages au cours des 7 ou 15 derniers jours, segmentés sur les appareils mobiles et de bureau. Trouvez-le en utilisant le générateur de requêtes :

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

Conseil

Votre organisation doit définir des SLO et des SLI en fonction de vos besoins spécifiques, des attentes de vos utilisateurs et des ressources disponibles. Après avoir terminé ce didacticiel, nous vous recommandons d'en savoir plus sur la façon de définir un niveau de service personnalisé granulaire.

An image of the service level maangement ui

Accédez à one.newrelic.com > All capabilities > Service levels management. Cette interface utilisateur affiche tous vos niveaux de service et vous permet de les définir, de les monitorer et de les modifier.
Sélectionnez + Add a service level en haut à droite de l’interface utilisateur.

Choisissez l’entité correspondante pour laquelle vous souhaitez créer un niveau de service. Il peut s'agir d'une workload entière, d'un service spécifique, d'un moniteur synthétique ou même d'une transaction spécifique. Une fois que vous avez sélectionné votre entité, cliquez sur Continue sur le côté gauche du volet de l'interface utilisateur.

Définissez le SLI que vous avez choisi à l’étape 1 dans ce volet. Par exemple, si vous choisissez de définir un SLI pour la réussite d'une application de navigateur, vous utiliserez la requête suivante :

Query for valid events:

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

Query for bad events:

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

Sélectionnez Continue dans le volet de gauche une fois que vous avez confirmé que vos requêtes sont correctes.

Quelle est la prochaine étape ?

Félicitations ! Vous avez terminé notre parcours sur la façon d'utiliser New Relic pour améliorer les performances de votre site ! Dans ce didacticiel, vous avez appris quelques éléments pour améliorer les performances de votre site. Vous avez appris à :

Débloquez des données qui peuvent vous donner des informations détaillées sur les performances actuelles de votre site en instrumentant votre site.
Évaluez vos principaux éléments Web essentiels afin de pouvoir prendre les bonnes décisions pour améliorer l’expérience de l’utilisateur final.
Améliorez votre site en corrigeant la latence élevée et en réduisant les erreurs JavaScript
Créez une évaluation des performances pour suivre les performances au fil du temps.

New Relic propose d’autres fonctionnalités qui peuvent vous aider à améliorer les performances. Bien que ce tutoriel soit axé sur votre site, vous pouvez consulter nos autres tutoriels :

Votre application est-elle lente ? Consultez Mon application est lente à résoudre les problèmes courants avec vos applications.
Votre infrastructure est instrumentée, mais vous ne savez pas comment gérer vos données hôtes ? Consultez notre didacticiel sur la résolution des problèmes liés aux hôtes avec des données d'infrastructure .
Vous avez besoin d'alertes, mais vous ne savez pas par où commencer ? Consultez notre tutoriel Créer et gérer des alertes .

Cette traduction automatique est fournie pour votre commodité.

Créer une évaluation des performances front-end

Objectifs

Définissez votre niveau de service

Créez votre évaluation de performance

Sélectionnez SLI :

Succès du service

Latence du service

Succès de l'application Browser

Application Browser avec la plus grande palette de contenu

Browser de l'application interaction avec la prochaine peinture

Décalage cumulatif de la disposition de l'application Browser

Conseil

Quelle est la prochaine étape ?

Cette traduction automatique est fournie pour votre commodité.

Créer une évaluation des performances front-end

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

Définissez votre niveau de service

Créez votre évaluation de performance

Sélectionnez SLI :

Latence du service

Succès de l'application Browser

Application Browser avec la plus grande palette de contenu

Browser de l'application interaction avec la prochaine peinture

Décalage cumulatif de la disposition de l'application Browser

Conseil

Quelle est la prochaine étape ?

Objectifs