Wydajność
Przykłady pomiaru metryk przeglądarki, czasu ładowania i analizy bundla aplikacji.
Core Web Vitals
Wartości są mierzone w bieżącej przeglądarce. Po około sekundzie strona dodaje blok wywołujący CLS, a przycisk poniżej tworzy celowo wydłużoną interakcję dla INP.
Zakres demonstracji
- LCP
- CLS
- INP
- PerformanceObserver
- Client Component
Wpisy Performance Observer z tej przeglądarki
- Largest Contentful Paint (LCP)
- Oczekiwanie na największy element
- Cumulative Layout Shift (CLS)
- Oczekiwanie na zmianę układu
- Interaction to Next Paint (INP)
- Wykonaj interakcję na stronie
Jak obserwować metryki
Obserwator w przeglądarce odbiera wpisy bez wysyłania ich do serwera. Demonstracyjne przesunięcie treści pokazuje CLS, a przycisk mierzy czas własnej interakcji, gdy przeglądarka nie udostępnia wpisu Event Timing.