Прогрессивные веб-метрики

Прогрессивные веб-метрики (ПВМ) Сергей Злобин, студия "ФЛАГ", 2018 DOMContentLoaded срабатывает, когда страница загрузилась, но скрипты только начали выполняться. Как было раньше Событие load срабатывает, когда страница полностью загрузилась и пользователь может полностью с ней взаимодействовать. ПВМ — список метрик, цель которых помочь разработчикам определять узкие места в производительности загрузки страницы. В отличие от событий DOMContentLoaded и load, ПВМ предоставляют разработчикам более детальную информацию. Это время, когда пользователь видит что-то полезное, отрисованное на странице. То, что отличается от пустой страницы. Это может быть всё, что угодно: первая отрисовка текста, первая отрисовка SVG или первая отрисовка Canvas. First Contentful Paint (FCP) Первая отрисовка контента О чем говорит Если первая отрисовка контента занимает очень много времени то: Возможно, есть проблемы на уровне соединения; Ресурсы (например, сама HTML-страница) очень тяжелые и чтобы их доставить нужно время. First Meaningful Paint (FMP) Первая значимая отрисовка Это время, когда весь главный контент появился на странице. Отрисовка, после которой произошло самое большое изменение в верхней части макета, и загружены веб-шрифты Если главный контент не был отрисован долгое время, значит очень много ресурсов (картинки, стили, шрифты, скрипты) имеют высокий приоритет загрузки и в результате блокируют первую значимую отрисовку О чем говорит Estimated Input Latency Задержка ввода Эта метрика определяет как плавно приложение реагирует на ввод пользователя. Пользователи ожидают, что страница будет реагировать без задержек, но если главный поток занят обработкой каждой длинной задачи, то станет заметно замедление реакции на ввод. У приложений есть 100 мс для ответа на ввод пользователя. Если это время больше, то пользователь думает, что приложение лагает. Чтобы приложение быстрее реагировало на ввод данных, необходимо оптимизировать, то как код запускается в браузере. Методы варьируются от переноса вычислений в web воркеры, чтобы освободить основной поток, до рефакторинга селекторов CSS, чтобы выполнять меньше вычислений, с использованием свойств CSS. Как улучшить Time to Interactive (TTI) Время до взаимодействия Измеряет, как долго требуется, чтобы страница стала интерактивной. Это значит: На странице отображается полезный контент, который измеряется с помощью First Contentful Paint. Обработчики событий регистрируются для большинства видимых элементов страницы. Страница реагирует на взаимодействие пользователя в течение 50 миллисекунд. Чтобы улучшить оценку TTI, отложите или удалите ненужную работу JavaScript, которая возникает во время загрузки страницы Как улучшить Заключение Это были не все ПВМ, только самые важные из них. Сергей Злобин, Студия Флаг, 20018 г. Основные инструменты: Lighthouse, API PerformanceObserver Ссылка на статью Артема Денисова: https://medium.com/web- standards/performance-metrics-ff23c213164e