Узнайте, как перенести полевые данные в лабораторию, чтобы воспроизвести и определить причины медленного взаимодействия с помощью ручного тестирования.
Опубликовано: 9 мая 2023 г.
Сложной частью оптимизации Interaction to Next Paint (INP) является выяснение того, что вызывает плохой INP. Существует множество потенциальных причин, таких как сторонние скрипты, которые планируют много задач в основном потоке, большие размеры DOM , дорогие обратные вызовы событий и другие виновники.
Улучшение INP может быть сложным. Для начала вам нужно знать, какие взаимодействия, как правило, отвечают за INP страницы. Если вы не знаете, какие взаимодействия на вашем сайте, как правило, самые медленные с точки зрения реального пользователя, прочтите статью Поиск медленных взаимодействий в полевых условиях . Как только у вас появятся полевые данные, которыми можно будет руководствоваться, вы можете вручную протестировать эти конкретные взаимодействия в лабораторных инструментах, чтобы выяснить, почему эти взаимодействия медленные.
Что делать, если у вас нет полевых данных?
Наличие полевых данных жизненно важно, так как это экономит вам массу времени на попытки выяснить, какие взаимодействия необходимо оптимизировать. Однако вы можете оказаться в ситуации, когда у вас нет полевых данных. Если это описывает вашу ситуацию, все равно возможно найти взаимодействия, которые можно улучшить, хотя это требует немного больше усилий и другого подхода.
Общее время блокировки (TBT) — это лабораторная метрика, которая оценивает скорость отклика страницы во время загрузки, и она хорошо коррелирует с INP . Если у вашей страницы высокий TBT, это потенциальный сигнал о том, что она может не очень быстро реагировать на действия пользователя во время загрузки страницы.
Чтобы узнать TBT вашей страницы, вы можете использовать Lighthouse . Если TBT страницы высокий, есть вероятность, что основной поток слишком занят во время загрузки страницы, и это может повлиять на то, насколько отзывчива страница в этот критический момент жизненного цикла страницы.
Чтобы найти медленные взаимодействия после загрузки страницы, вам могут понадобиться другие типы данных, например, общие потоки пользователей, которые вы, возможно, уже определили в аналитике вашего веб-сайта. Если вы работаете над веб-сайтом электронной коммерции, например, общий поток пользователей будет действиями, которые пользователи выполняют, когда они добавляют товары в корзину онлайн-покупок и оформляют заказ.
Независимо от того, есть ли у вас полевые данные или нет, следующим шагом будет ручное тестирование и воспроизведение медленных взаимодействий, поскольку только тогда, когда вы сможете воспроизвести медленное взаимодействие, вы сможете его исправить.
Воспроизвести медленные взаимодействия в лаборатории
Существует несколько способов воспроизведения медленных взаимодействий в лабораторных условиях с помощью ручного тестирования, но ниже представлена схема, которую вы можете попробовать.
Текущие показатели панели производительности DevTools
Профилировщик производительности DevTools — рекомендуемый подход к диагностике взаимодействий, которые считаются медленными, но выявление медленных взаимодействий может занять некоторое время, если вы не знаете, какие из взаимодействий являются проблемными.
Когда вы впервые откроете панель Performance, вы увидите представление метрик в реальном времени . Это можно использовать для быстрого тестирования ряда взаимодействий, чтобы найти проблемные, прежде чем перейти к более подробному профилировщику производительности. По мере взаимодействия диагностические данные будут появляться в журнале взаимодействий (с выделенным взаимодействием INP). Эти взаимодействия можно развернуть, чтобы получить разбивку по фазам: