🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Как измерить Core Web Vitals в SPA, где переходы не перезагружают страницу
Классическая беда одностраничников: роутер меняет содержимое, а для браузера это всё та же первая загрузка. LCP, CLS и INP посчитаны один раз при входе, дальнейшие переходы не мерит никто. Отсюда и метрики, в которые никто в команде не верит.
С Chrome 151 Soft Navigations работает без флага. Проверка поддержки и подписка выглядят так:
```if (PerformanceObserver.supportedEntryTypes.includes('soft-navigation')) {
new PerformanceObserver(console.log)
.observe({ type: 'soft-navigation', buffered: true });
}```
Дальше логика простая. В каждой записи есть name — URL, к которому относится новый экран, и navigationId — уникальный идентификатор перехода, потому что один и тот же URL за жизнь приложения можно открыть десять раз. Получили запись — финализируйте метрики предыдущего экрана, отправьте их под старым URL и начинайте копить заново.
LCP для мягкой навигации приходит через interaction-contentful-paint, а у самой записи soft-navigation есть getLargestInteractionContentfulPaint() — он вернёт крупнейший такой пейнт, чтобы не буферизовать записи вручную.
Главное — не сравнивайте новые цифры со старыми напрямую. Они почти наверняка окажутся хуже, но не потому, что вы что-то сломали: эти переходы просто впервые попали под замер. Соберите пару недель параллельно и только потом делайте выводы.
Ссылка скрыта
#перформанс #spa
