Wat is PerformanceObserver Snippet Generator?
PerformanceObserver is een browser-API waarmee ontwikkelaars prestatiemeetgebeurtenissen in real-time kunnen observeren. Het abonneert zich op specifieke entry-types en ontvangt entries zodra ze worden geregistreerd. Dit is de standaardbenadering voor het meten van Core Web Vitals. Baseline 2025, ondersteund in Chrome 73+, Edge 73+, Safari 14.1+ en Firefox 84+.
Snel antwoord
PerformanceObserver biedt real-time Core Web Vitals-monitoring (LCP, INP, CLS, FID, FCP, TTFB) via een efficiënt observer-patroon. Classificeer metrieken tegen Google-drempels en rapporteer via navigator.sendBeacon. Baseline 2025 (Chrome 73+, Safari 14.1+, Firefox 84+).
Last updated: 2026-06-02
Beperkingen
- Entries blijven niet behouden bij paginanavigaties. Voor SPA-routewijzigingen moeten observers opnieuw worden verbonden.
- Sommige entry-types hebben browserspecifieke beschikbaarheid. Controleer op ondersteuning voordat u observers registreert.
- PerformanceObserver heeft een beperkte buffer. Registreer observers vroeg en gebruik buffered: true.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Selecteer de prestatiemetrieken om te observeren: Core Web Vitals of individuele entry-types.
- Configureer drempelclassificatie: good, needs-improvement of poor op basis van Google-drempels.
- Kies een rapportagemethode: console, sendBeacon of een aangepaste callback.
- Kopieer het JavaScript-snippet met meerdere observers, buffered entry-ondersteuning en rapportage.
Waarvoor je het kunt gebruiken
- Volg Core Web Vitals in productie en rapporteer naar een analytics-eindpunt met sendBeacon.
- Monitor LCP tijdens ontwikkeling om prestatie-optimalisaties te verifieren.
- Detecteer onverwachte layout shifts op een live site met gedetailleerde logging.