Preload на практике: проверить пользу и отсутствие лишней загрузки
Preload заранее объявляет браузеру ресурс, который скоро понадобится. Упражнение проверяет, обнаруживается ли файл раньше и используется ли предварительная загрузка последующим запросом.
Назначение
Preload заранее объявляет браузеру ресурс, который скоро понадобится. Упражнение проверяет, обнаруживается ли файл раньше и используется ли предварительная загрузка последующим запросом.
Как это работает
Href, as, тип и режим CORS должны соответствовать фактическому использованию ресурса. Для шрифтов обычно требуется crossorigin и при загрузке с того же origin. Сам preload не применяет шрифт или стили к странице.
Пример
<link rel="preload" href="/fonts/lesson.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face{font-family:Lesson;src:url("/fonts/lesson.woff2") format("woff2");font-display:swap}
.lesson-title{font-family:Lesson,sans-serif}
</style>
<h1 class="lesson-title">Учебный заголовок</h1>Что должно получиться
При наличии файла браузер может начать загрузку шрифта раньше обычного обнаружения через CSS. Имя и путь в примере учебные; используйте шрифт с подходящей лицензией и проверьте фактический ответ сервера.
Граница применения и частая ошибка
Предзагрузка всех ресурсов создаёт конкуренцию за сеть и может ухудшить приоритеты. Несовпадение URL или режима запроса способно привести к лишней загрузке. Предупреждение о неиспользованном preload нужно исследовать, а не скрывать.
Самостоятельная проверка
Снимите Network с preload и без него при одинаковом состоянии кеша и сети. Сравните начало запроса, число загрузок и момент появления текста. Оставляйте подсказку только после понятного улучшения своего сценария.