Проверено и не помогает: что мы пробовали ради PageSpeed впустую

Статьи об оптимизации обычно рассказывают о том, что сработало. Эта — о том, что мы честно пробовали, замеряли сериями и выяснили: не помогает. Или помогает так мало, что не стоит потраченного времени. Сэкономит вам несколько вечеров.

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

content-visibility: auto

Свойство обещает пропускать отрисовку блоков вне экрана. На нашей странице время на стили и вёрстку изменилось с 292 до 286 мс — в пределах погрешности, оценка не сдвинулась. Причина простая: узким местом была не вёрстка, а то, что попадало в окно первой отрисовки. content-visibility не останавливает загрузку картинок и скриптов.

Сокращение DOM на сервере

Отчёт ругался на «слишком большой DOM»: 5149 элементов, 705 мс на вёрстку. Первая мысль — урезать разметку шаблона. Проверили, сколько DOM у страницы без ленивых блоков: 1464 элемента и 255 мс. То есть тяжёлым DOM делали не шаблоны, а блоки, которые вставлялись до отрисовки. Когда их загрузка ушла за ворота (восьмая часть), проблема DOM исчезла сама — без переписывания шаблонов.

Блокировка «подозреваемого» как доказательство

Подробно — в пятой части: блокировка файла меняет момент отрисовки и состав окна. Мы получили «оправдание» видео, которое на самом деле занимало три четверти окна.

Ложные следы при поиске сдвигов вёрстки (CLS)

• Разделение CSS по ширине экрана. Подозревали, что сдвиг даёт поздняя загрузка стилей для широкого экрана. Отключали разделение — CLS не менялся.
• Метрики запасного шрифта. Подгонка запасного шрифта (size-adjust) — полезная вещь, но конкретный сдвиг давала не подмена шрифта, а слайдер, скрытый до инициализации.
• Замена top на transform. CLS 0,176 → 0,153 — капля. Настоящая причина была другой, и после её устранения CLS упал почти до нуля — 0,0008.

Настоящую причину в том случае нашла методика: следить за сдвигами через PerformanceObserver("layout-shift") и снимать геометрию блоков по таймеру, а не гадать по отчёту. Подробно — в части про CLS слайдера.

font-display: optional против прыжков на iPhone

Совет «поставьте font-display: optional, и текст не будет прыгать при загрузке шрифта» не сработал: перевёрстка при подмене шрифта происходила и с ним. Помогла подгонка метрик запасного шрифта — об этом отдельная часть цикла.

Что общего у всех неудач

Каждый раз мы лечили симптом из отчёта, не проверив причину. «Большой DOM», «сдвиг вёрстки», «долгая вёрстка» — это следствия. Причину почти всегда показывал разбор окна первой отрисовки (третья часть) и формула из второй: что запрошено до отрисовки и сколько это стоит. Начинайте с них — и половина пунктов отчёта решится сама.