Подозреваете, что оценку тянет вниз конкретный файл? Самый очевидный эксперимент — заблокировать его и прогнать проверку ещё раз. В Lighthouse для этого даже есть флаг --blocked-url-patterns. Стало лучше — виноват, не стало — оправдан. Логика железная, и именно поэтому она так опасна: эксперимент с блокировкой регулярно оправдывает настоящего виновника.

Это пятая часть цикла «PageSpeed без мифов».

Как это выглядит

npx lighthouse@12 https://example.ru/catalog/ --only-categories=performance \
  --blocked-url-patterns="*.mp4" --output=json --output-path=lh-novideo.json

Мы так проверяли видео-превью в карточках каталога. С видео модельный LCP был 15,1 с. Без видео — 16,2 с. Хуже. Вывод напрашивался: видео ни при чём, ищем дальше.

А потом скрипт разбора окна первой отрисовки (из третьей части) показал, что видео занимало в окне 706 КБ из 960 — три четверти всего веса. Когда видео перестало грузиться до отрисовки по-настоящему, правкой кода, оценка каталога пошла вверх.

Почему блокировка врёт

Вспомним правило модели из первой части: в расчёт идёт всё, что запрошено до первой отрисовки. Блокировка файла меняет не только вес — она меняет сам момент отрисовки и порядок событий:

  1. Сдвигается момент отрисовки. Заблокированный запрос мгновенно завершается ошибкой, скрипты, ждавшие его, идут другим путём, и страница рисуется раньше или позже, чем без блокировки.
  2. В окно попадает другое. Освободившееся место в сети тут же занимают следующие файлы — картинки, шрифты, то, что раньше начиналось после отрисовки. Окно не худеет, а меняет состав.
  3. Код реагирует на ошибку. Компонент, у которого «не загрузилось видео», может показать постер в высоком качестве, перезапустить загрузку или подгрузить запасной вариант — всё это тоже в окне.

В итоге вы сравниваете не «страницу с файлом» и «страницу без файла», а две разные страницы с разным окном первой отрисовки. Разница в оценке говорит о чём угодно, только не о вине файла.

Как проверять вину правильно

  • Смотрите на окно, а не на оценку. Разбор окна из третьей части показывает, сколько килобайт файл занимает до отрисовки. Формула из второй части переводит их в секунды. Это и есть ответ на вопрос «виноват ли файл».
  • Верьте только настоящей правке. Убрали файл из окна первой отрисовки кодом — так, как это будет на сайте, — и сделали серию прогонов до и после (четвёртая часть). Вот это доказательство.
  • Сверяйте с фазами LCP. Если вес файла по формуле совпадает с «задержкой» в фазах LCP — гипотеза подтверждена до любой правки.

Блокировка годится для одного: быстро посмотреть, что вообще произойдёт со страницей без стороннего сервиса (например, ляжет ли вёрстка без виджета). Для выводов об оценке — нет.

А если блокировка показала улучшение — это тоже неправда?

Может быть правдой, а может — тем же эффектом в другую сторону: отрисовка сдвинулась удачно. Хорошая новость в том, что проверить легко: посмотрите, сколько файл весил в окне. Если много — улучшение похоже на правду, и его стоит подтвердить настоящей правкой.

Не уверены, что именно тормозит?

Пришлите адрес — разберу окно первой отрисовки и найду виновника без гаданий с блокировками.

· полезно?
АЧ
Алексей Чикун веб-разработчик, команда TRIOHEAD

Делаю сайты и сервисы целиком: от вёрстки до сервера. Пишу о том, что проверил на своих проектах.

Комментарии

// загружаю комментарии…

Комментарии публикуются после проверки. Ссылки и HTML не принимаются.