Outils HTML

Gratuit Generateur de snippet PerformanceObserver

Generez du code PerformanceObserver pour les Core Web Vitals (LCP, INP, CLS) avec seuils good/needs-improvement/poor.

Chargement de l'outil...

Qu'est-ce que Generateur de snippet PerformanceObserver ?

PerformanceObserver surveille les metriques de performance en temps reel via un modele d'observateur. Il s'abonne a des types d'entrees (largest-contentful-paint, layout-shift, etc.) et recoit les entrees en temps reel. Supporte l'indicateur buffered pour les entrees historiques. Baseline 2025.

Réponse rapide

Surveillance Core Web Vitals en temps reel (LCP, INP, CLS, FID, FCP, TTFB) avec classification par seuils. Chrome 73+, Safari 14.1+, Firefox 84+.

Last updated: 2026-06-02

Limites

  • Entrees ne persistent pas entre navigations.
  • Disponibilite variable selon le navigateur.
  • Tampon limite pour chaque type d'entree.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Selectionnez les metriques a observer.
  2. Configurez la classification par seuils Google.
  3. Choisissez la methode de rapport (console, sendBeacon, callback).
  4. Copiez le snippet JavaScript genere.

A quoi il sert

  • Suivi Core Web Vitals en production avec sendBeacon.
  • Surveillance LCP pendant le developpement.
  • Detection des changements de mise en page (CLS).

Cas d'usage

Exemples concrets

Exemple

Core Web Vitals en production

LCP, INP, CLS, FCP, TTFB classes et envoyes via sendBeacon toutes les 30s.

Exemple

Debogage LCP en dev

PerformanceObserver pour largest-contentful-paint avec journalisation console.

Erreurs frequentes

  • Enregistrer sans indicateur buffered.
  • Observer layout-shift sans verifier hadRecentInput.
  • Envoyer les donnees de maniere synchrone au dechargement.

Vérification

  1. Ouvrez la console, verifiez les metriques et classifications.
  2. Configurez sendBeacon et verifiez l'envoi dans Network.

FAQ

Questions sur Generateur de snippet PerformanceObserver

Metriques supportees?

Plus de 15 types : mark, measure, resource, navigation, paint, LCP, INP, CLS, etc.

Plusieurs observateurs pour la meme metrique?

Oui, sans conflits. Chacun recoit une copie independante.

Persistance entre navigations SPA?

Non, les entrees sont effacees. Reconnectez les observateurs.

Seuils utilises?

LCP <2500ms, FID <100ms, CLS <0.1, INP <200ms, TTFB <800ms.

Outils lies

Autres outils outils html

A essayer aussi

A essayer aussi