Подсказки браузеру о ресурсах
В ранних уроках мы связывали задержку с моментом обнаружения ресурса. Иногда необходимый файл становится известен браузеру только после CSS или выполнения программы. Подсказка может сообщить о нём раньше. Но её полезность нужно связывать с конкретной фазой: ранний запрос не гарантирует ранний показ, а лишняя загрузка способна конкурировать с нужным содержимым.
В этом уроке исследуем advanced/resource-lab/baseline.html и hint.html. Варианты имеют одинаковое содержимое, а второй добавляет один preload фоновой схемы. Исходники не запускались автором, поэтому реальный эффект читатель получает самостоятельно. Маленький SVG нужен для понятного пути ресурса, а не для обещания заметного выигрыша передачи.
Подсказка должна соответствовать причине
Представим три ситуации. В первой файл поздно обнаружен. Во второй запрос начинается вовремя, но долго устанавливается соединение с другим origin. В третьей ресурс уже готов, а основной поток занят. Эти случаи требуют разных гипотез. Подсказка обнаружения относится к первому, подготовка соединения — ко второму, а третий требует исследования исполнения и отображения.
Начните с сетевого водопада. Найдите инициатора, момент начала и зависимость нужного ресурса. Затем сопоставьте готовность файла с показанным кадром. Если необходимое изображение уже обнаруживается из раннего HTML, дополнительный preload может дублировать существующую возможность. Нужное основание — наблюдаемая поздняя зависимость, а не само наличие картинки.
У нашего стенда .hero получает фон из base.css. Браузер должен узнать соответствующее правило и адрес. В hint.html адрес также задан в head. Гипотеза касается именно раннего обнаружения фонового ресурса. Все остальные правила, нижняя галерея и способ подключения локального виджета сохраняются.
Preload загружает ресурс для текущей страницы
Preload сообщает о файле, который понадобится скоро в текущем документе. Он не выполняет скрипт и не превращает таблицу стилей в применённый stylesheet. Поэтому подсказка не заменяет обычное подключение ресурса. Назначение механизма описано в MDN: rel preload.
Единственная строка, добавленная во втором варианте стенда, выглядит так:
<link rel="preload" href="../assets/panel.svg" as="image">Это фрагмент head. Обычная таблица стилей остаётся подключённой после него. Значение as="image" задаёт назначение запроса. Адрес должен совпадать с итоговым адресом картинки из CSS. Разные относительные записи могут разрешаться в один URL, а похожие названия файлов — в разные. Сравнивайте разрешённые адреса в Network.
Ранний запрос полезен только тогда, когда результат действительно нужен в выбранном сценарии. Если схема ниже первого экрана и человек не прокручивает статью, её preload добавляет цену без соответствующей задачи. Если она является важным содержимым видимой области, нужно исследовать эффект именно там. Менять размер схемы ради желаемого LCP-кандидата в этом эксперименте не требуется.
У шрифтов и запросов с CORS дополнительно должны совпадать режимы получения. Неподходящие параметры способны помешать повторному использованию подготовленного ресурса. Здесь эксперимент ограничен локальным изображением. Подробную диагностику шрифтов мы выполняли в уроке 7, а настройку оформления — в соответствующем курсе дизайна.
Проверка одной подсказки
Откройте baseline при зафиксированном кеше, сети и viewport, затем отдельно откройте hint в тех же условиях. Найдите запрос panel.svg, его начало и инициатор. Сопоставьте момент показа фоновой схемы. Нужны два наблюдения: изменилось ли обнаружение и изменился ли пользовательский этап. Если первое произошло без второго, это всё ещё объяснимый результат.
Проверьте, нет ли отдельной лишней доставки похожего файла. Ошибка URL может создать ранний запрос, который вообще не используется. Тогда красивое начало полосы не относится к показанному изображению. Вариант с неверной подсказкой следует исправить и повторить сравнение, а не учитывать ненужную передачу как цену самого механизма.
На localhost различие иногда будет трудно заметить: CSS и схема малы, а сетевой путь короток. Отсутствие явного выигрыша не позволяет обещать его на настоящем сайте. Можно отдельно исследовать выбранный профиль сети, но это станет новым условием протокола. Не выдавайте искусственный профиль за реально измеренную аудиторию ProfessorWeb.
Preconnect готовит соединение
Когда ограничение связано с первым обращением к другому origin, рассматривают preconnect. Он может заранее выполнить часть подготовки соединения. Это другая задача, чем получение конкретного изображения. Для того же origin страницы такая подсказка обычно не даёт нужной пользы: соединение уже требуется самому документу. Семантика объясняется в MDN: rel preconnect.
Следующий фрагмент показывает форму записи для отдельного будущего проекта. Зарезервированный домен не является сервисом; строка не включена в наши исходники:
<link rel="preconnect" href="https://assets.example.invalid">Решение требует известного будущего обращения. Подготовка десятков сторонних origin не является бесплатной профилактикой: часть соединений может не понадобиться. Сначала выясните, какой внешний источник действительно находится на пути к нужному результату. У resource-lab все ресурсы локальные, поэтому он не демонстрирует реальную цену внешнего DNS или TLS.
Если данные приходят через другой хост, сохраняйте его отдельно в исследовании цепочки. Настройка CDN относится к курсу деплоймента. Здесь выбираем механизм по фазе уже существующей доставки и сохраняем границы диагностического сравнения.
Будущий переход и текущая загрузка
Prefetch выражает предположение о ресурсе для возможной будущей навигации. Его нельзя считать заменой preload критичного файла текущей страницы. Поддержка и ограничения также отличаются. Назначение и текущая доступность описаны в MDN: rel prefetch.
У последовательных уроков идея подготовки следующей страницы выглядит естественно. Но читатель может уйти в другой раздел, а мобильный канал всё равно получит дополнительные байты. Поэтому сначала нужен сценарий вероятного перехода и отдельное исследование его цены. Подготовка всех ссылок большого каталога плохо соответствует ограниченному ресурсу устройства.
Не связывайте prefetch с bfcache как с одним механизмом. Первый относится к подготовке ресурса, второй — к сохранённому документу истории. Их успешное применение проверяют разными наблюдениями. Ошибка названия здесь способна создать неправильную таблицу: сетевой файл окажется записан как восстановленное состояние программы.
Проверим стоимость для соседних ресурсов
Добавление раннего запроса меняет конкуренцию. Поэтому смотрите не только на выбранную схему, но и на документ, стили и другое главное содержимое. Если картинка начинает раньше, а необходимый текст позже, решение требует обсуждения. Ускорение одного файла не равно ускорению задачи читателя.
Сохраните карточку одной подсказки: задержанная фаза, подходящий механизм, точный URL, условия запроса и наблюдение после изменения. Если основания отсутствуют, разумный результат — оставить обычное обнаружение и записать причину. В следующем уроке рассмотрим противоположную задачу: какие ресурсы следует получать позднее, сохраняя быстрый первый экран и полноценный доступ к остальному материалу.