Preload и prefetch: текущий ресурс и вероятный следующий переход
Предварительная загрузка может ускорить появление нужного ресурса, но неверные подсказки расходуют сеть без пользы. Preload относится к текущему документу, prefetch — к вероятной последующей потребности.
Назначение
Предварительная загрузка может ускорить появление нужного ресурса, но неверные подсказки расходуют сеть без пользы. Preload относится к текущему документу, prefetch — к вероятной последующей потребности.
Как это работает
Для preload задайте подходящий as и затем реально используйте ресурс. Prefetch остаётся подсказкой, которую браузер может не выполнить. В примере CSS и следующую страницу необходимо создать в собственном проекте.
Пример
<link rel="preload" href="lesson.css" as="style">
<link rel="stylesheet" href="lesson.css">
<link rel="prefetch" href="next-lesson.html">Что должно получиться
Текущая страница применяет lesson.css, а следующая лишь рассматривается как кандидат на раннюю загрузку. Сам preload не применяет CSS, поэтому обычное подключение stylesheet остаётся необходимым.
Граница применения и частая ошибка
Ресурс, уже рано обнаруживаемый в head, может не получить выигрыша от дополнительного preload. Неверный as или несовпадающий режим CORS способен привести к повторной загрузке. Не подгружайте десятки страниц заранее и не считайте prefetch гарантией наличия в кеше.
Самостоятельная проверка
Сравните Network без подсказок и с ними. Проверьте время начала запроса, повторные загрузки и предупреждения о неиспользованном preload. Для следующей страницы оцените, насколько часто пользователь действительно туда переходит.