Основные понятие:
Есть несколько главных параметров на которые стоит смотреть:
- FCP – Время пока покажется что-то
- LCP – Время когда загрузился самый большой участок (Обычно в рамках первого экрана)
- TBT – Время когда страница не реагирует на действия пользователя
- CLS – Сдвиг макета во время загрузки
- TTI – Время за которое страница становиться полностью интерактивной
- TTFB – Его нет в списке ЛайтХауса, но так же важен (Время до загрузки первого байта)
Начало работ, на что смотреть изначально
Заходим в “Сеть” и смотрим что загружается в общем:
Смотрим сколько было запросов, какой объем загрузился, сколько понадобилось на загрузку DOM и в общем сколько потратилось времени на загрузку всей страницы.
Далее идем во вкладку “Производительность” и смотрим основные показатели, кто когда загружается и кто затягивает событие onload, наша задача его сместить максимально к началу.
На этом моменте лучше записать или сделать скрин основных показателей которые описаны выше, чтоб понимать как было “ДО”, так же к ним загрузим скрин из Lighthouse чтоб наглядно смотреть промежуточные результаты.
Основные проблемы и способы их решение в Lighthouse