Найдите критический путь
Таблицы стилей и синхронные скрипты могут блокировать отрисовку, когда браузеру нужны до построения или вывода страницы. Правильный ответ зависит от того, нужен ли ресурс для первичного вида. Если убрать запрос из отчёта, не сохранив нужные стили или поведение, проблема лишь переедет в другое место.
Как проверить
Снимите трассировку загрузки страницы и определите, какие ресурсы идут раньше первой отрисовки, какие действительно используются над сгибом и что задерживает вывод сильнее — ответ сервера или работа основного потока. Тестируйте на холодном кэше и на типичном соединении. Лабораторные данные диагностируют путь, а полевые показывают, испытывают ли его посетители.
Как внедрить или улучшить
Встраивайте в страницу или выделяйте в приоритет только небольшой критический CSS, нужный для первичного вида; откладывайте некритичный код там, где это безопасно, и сокращайте неиспользуемый код у источника. После каждого изменения проверяйте визуальную полноту, работу с клавиатурой, отсутствие ошибок при взаимодействии и отсутствие новых сдвигов макета.
Ограничения и частые ошибки
Частая ошибка — откладывать каждый скрипт или таблицу стилей. Критичные ресурсы критичны потому, что без них первичная страница не обходится; вместо этого сделайте зависимость меньше и намеренной.
Разбор начинается с водопада запросов и трассировки, а не с общего правила «откладывайте JavaScript». Определите первое полезное визуальное состояние, перечислите CSS, шрифты и скрипты, которые нужны для него, и отделите этот небольшой набор от ресурсов, запрошенных позже. Таблица стилей, задающая начальную навигацию, может быть критичной; библиотека карусели под сгибом — нет. Проверьте приоритет запросов, время ответа, объём неиспользуемых байтов и задачи основного потока. Для внедрения сокращайте или разделяйте неиспользуемые стили у источника, используйте preload только для ресурса, который первому виду действительно нужен, и откладывайте ресурс лишь после проверки, что начальная страница остаётся стилизованной и интерактивной. Повторите проверку на холодном кэше, ограниченном соединении и при навигации с клавиатуры. Если замена шрифта меняет перенос строк, фиксируйте и этот эффект на макете, а не только время загрузки. Результат, который нужно подтвердить, — полностью рабочий первый вид, а не просто меньшее число предупреждений.
Конкретный пример: страница списка товаров загружает одну общую таблицу стилей, небольшую таблицу стилей шапки, веб-шрифт, компонент сортировки и галерею под сгибом. В водопаде убедитесь, что первые две таблицы стилей действительно используются до первой отрисовки; они могут стать кандидатами на уменьшенный критический набор. Скрипт галереи не должен задерживать шапку и сетку товаров, если галерея не видна. Не встраивайте всю общую таблицу стилей целиком: это дублирует байты и усложняет кэширование. Вместо этого вынесите только правила, нужные для первого вида, загрузите основную таблицу стилей обычным способом и проверьте переход, когда она придёт. После выкладки повторите водопад и проверьте вспышку нестилизованного текста, пропавшие контуры фокуса и сдвиг макета. Изменение принимаем, только если страница правильно отрисовывается, а последующие взаимодействия остаются работоспособными.