Предварительная загрузка, выборочная загрузка и предварительное соединение
Подсказывайте браузеру заранее загружать важные ресурсы
«Предварительная загрузка, выборочная загрузка и предварительное соединение» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Зачем нужны подсказки ресурсов
Современные браузеры обнаруживают ресурсы только по мере разбора HTML. Подсказки ресурсов (атрибуты rel у link в <head>) позволяют сообщить браузеру: «Скоро это понадобится», — чтобы сетевой запрос начался раньше, чем это обычно происходит при обнаружении ресурса.
preload загружает немедленно
<link rel="preload" as="..." href="..."> сообщает браузеру, что ресурс нужно загрузить немедленно с приоритетом, соответствующим типу as. Используйте preload для ресурсов, которые странице точно понадобятся: главных изображений, критически важных шрифтов и JavaScript для конкретного маршрута.
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>Атрибут as
Всегда указывайте as — он определяет приоритет запроса, заголовок Accept и применение CSP. Распространённые значения: "script", "style", "font", "image", "fetch". Без as браузеры игнорируют preload и записывают предупреждение.
crossorigin для шрифтов
Для предварительной загрузки шрифтов требуется crossorigin, даже если шрифт загружается с того же источника. Без него браузер запрашивает шрифт в режиме CORS при фактическом использовании, но в анонимном режиме при предварительной загрузке, из-за чего загрузка удваивается — это малозаметная и распространённая ошибка производительности.
prefetch загружает позже
<link rel="prefetch" href="..."> сообщает, что ресурс понадобится при будущем переходе. Браузер загружает его с самым низким приоритетом во время простоя, а затем сохраняет в кэше, чтобы следующая страница отобразилась мгновенно.
<link rel="prefetch" href="/next-page.html">preconnect прогревает соединения
<link rel="preconnect" href="https://api.example.com"> сообщает браузеру, что нужно выполнить рукопожатие DNS, TCP и TLS с источником третьей стороны до поступления первого запроса. Используйте это для узлов API и CDN, к которым обращается ваша страница.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>dns-prefetch — облегчённый вариант
<link rel="dns-prefetch"> выполняет только поиск DNS, поэтому обходится дешевле, чем preconnect. Используйте его для множества сторонних узлов, когда нельзя позволить себе полное preconnect-соединение с каждым из них; для нескольких самых важных источников применяйте preconnect.
Ограничивайте количество подсказок
Слишком большое количество preload-запросов конкурирует за одну и ту же пропускную способность и замедляет страницу. Предварительно загружайте только ресурсы, блокирующие критический путь отрисовки, — обычно одно главное изображение и один или два критически важных шрифта. Всё остальное можно обнаружить обычным способом.
modulepreload для модулей ES
<link rel="modulepreload" href="/app.js"> предварительно загружает не только файл модуля, но и дерево его зависимостей. Это устраняет каскадную водопадную загрузку, характерную для нативных модулей ES, когда каждый импорт ожидает разбора предыдущего.
Измерение эффекта
Используйте столбец Initiator на панели «Сеть», чтобы убедиться, что предварительно загруженные ресурсы действительно были получены заранее, а также проверку Lighthouse «Предварительное подключение к необходимым источникам», чтобы обнаружить упущенные возможности. Удаление медленного, но неиспользуемого preload часто даёт такой же выигрыш, как и добавление удачного.
Особенности каждой подсказки
preload выводит предупреждение в консоль, если ресурс не используется примерно в течение 3 секунд. prefetch может быть отменён браузером при нехватке сетевых ресурсов или памяти. Соединения preconnect закрываются примерно через 10 секунд бездействия — используйте его для ресурсов, которые будут запрошены вскоре.
Проверка знаний
Что делает preconnect такого, чего не делает dns-prefetch?
Итоги
preload немедленно загружает критически важные ресурсы, используя as и crossorigin там, где это необходимо. prefetch кэширует ресурсы, вероятно нужные при следующем переходе, во время простоя. preconnect (TCP и TLS) и dns-prefetch (только DNS) прогревают соединения со сторонними источниками. modulepreload распространяет действие preload на дерево зависимостей модуля ES. Используйте эти подсказки умеренно и измеряйте результат.
Часто задаваемые вопросы
Урок «Предварительная загрузка, выборочная загрузка и предварительное соединение» бесплатный?
Да — полный текст урока «Предварительная загрузка, выборочная загрузка и предварительное соединение» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Предварительная загрузка, выборочная загрузка и предварительное соединение»?
Подсказывайте браузеру заранее загружать важные ресурсы Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Предварительная загрузка, выборочная загрузка и предварительное соединение»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Атрибуты async и defer
- Предварительная загрузка, выборочная загрузка и предварительное соединение
- Отложенная загрузка изображений: loading=lazy
- Подсказки для ресурсов: modulepreload