Предварительная загрузка ресурсов (preload, prefetch) [Модуль 10: Метаданные и head]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Чтобы сайт 'летал', а не 'ползал', современный веб-разработчик должен уметь управлять загрузкой ресурсов. Браузер по умолчанию загружает файлы по мере их обнаружения, что не всегда оптимально. Мы можем дать ему подсказки, чтобы он загружал важные ресурсы заранее. Для этого существуют специальные директивы: preload и prefetch. В этих упражнениях мы научимся использовать тег `<link>` с этими директивами, чтобы сообщить браузеру о наших намерениях и ускорить отображение контента. Это мощный инструмент для повышения производительности сайта.

Список тем

Предварительная загрузка важного ресурса

id: 37899_preload-prefetch-01

Представьте, что у вас есть критически важный CSS-файл, который должен быть загружен как можно скорее. Чтобы 'подсказать' браузеру начать его загрузку немедленно, не дожидаясь, пока он дойдет до обычного тега `<link>`, используется специальное значение в атрибуте `rel`. Укажите это значение.

CSS

/* Этот файл (critical.css) будет загружен заранее */
body {
  background-color: #f0f8ff;
}
.title {
  color: navy;
}

                     <head>
  <title>Preload CSS</title>
  <!-- Подсказка браузеру начать загрузку CSS заранее -->
  <link rel="input1" href="critical.css" as="style">

  <!-- Обычное подключение этого же CSS для его применения -->
  <link rel="stylesheet" href="critical.css">
</head>
<body>
  <h1 class="title">Важный заголовок</h1>
</body>

HTML

<head>
  <title>Preload CSS</title>
  <!-- Подсказка браузеру начать загрузку CSS заранее -->
  <link rel="input1" href="critical.css" as="style">

  <!-- Обычное подключение этого же CSS для его применения -->
  <link rel="stylesheet" href="critical.css">
</head>
<body>
  <h1 class="title">Важный заголовок</h1>
</body>

Для принудительной предварительной загрузки ресурса, необходимого для текущей страницы, используется значение `preload` в атрибуте `rel` тега `<link>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Указание типа ресурса с 'as'

id: 37899_preload-prefetch-02

При использовании `preload` браузеру нужно обязательно сообщить, что именно за ресурс мы загружаем. Это помогает ему правильно выставить приоритет загрузки и применить политики безопасности. Для этого используется обязательный атрибут. Укажите его имя и значение для файла стилей.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
.script-message {
  color: green;
  font-weight: bold;
}

                     <head>
  <title>Атрибут 'as'</title>
  <link rel="preload" href="app.js" input1="input2">
  <script src="app.js" defer></script>
</head>
<body>
  <p>Мы загружаем скрипт заранее.</p>
</body>

HTML

<head>
  <title>Атрибут 'as'</title>
  <link rel="preload" href="app.js" input1="input2">
  <script src="app.js" defer></script>
</head>
<body>
  <p>Мы загружаем скрипт заранее.</p>
</body>

При `rel="preload"` необходимо использовать атрибут `as`, чтобы указать тип ресурса. Для CSS-файла значением будет `style`, для скрипта — `script`, для шрифта — `font` и т.д.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Предзагрузка шрифта

id: 37899_preload-prefetch-03

Частая проблема — 'мигание' текста при загрузке кастомного шрифта. Чтобы шрифт загрузился как можно раньше, его можно предварительно загрузить. Укажите правильные значения для `rel` и `as` для файла шрифта.

CSS

@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
}
body {
  font-family: 'MyFont', sans-serif;
  font-size: 20px;
  padding: 15px;
}

                     <head>
  <title>Preload шрифта</title>
  <link input1="preload" href="font.woff2" input2="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Этот текст сразу отобразится кастомным шрифтом.</p>
</body>

HTML

<head>
  <title>Preload шрифта</title>
  <link input1="preload" href="font.woff2" input2="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Этот текст сразу отобразится кастомным шрифтом.</p>
</body>

Для предзагрузки шрифта используйте `rel="preload"` и `as="font"`. Также для шрифтов необходимо добавлять атрибут `crossorigin`, так как они загружаются в анонимном режиме.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Предварительная выборка для будущей навигации

id: 37899_preload-prefetch-04

Теперь представьте, что мы почти уверены, что пользователь со страницы 'Каталог' перейдет на страницу 'Товар'. Мы можем заранее, с низким приоритетом, загрузить CSS для страницы товара. Для этого используется другое значение `rel`. Укажите его.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
a {
  color: blue;
}

                     <head>
  <title>Каталог</title>
  <!-- Заранее загружаем стили для страницы товара -->
  <link rel="input1" href="product-page.css" as="style">
</head>
<body>
  <h1>Каталог товаров</h1>
  <a href="/product">Перейти к товару</a>
  <p>Стили для следующей страницы уже загружаются в фоне.</p>
</body>

HTML

<head>
  <title>Каталог</title>
  <!-- Заранее загружаем стили для страницы товара -->
  <link rel="input1" href="product-page.css" as="style">
</head>
<body>
  <h1>Каталог товаров</h1>
  <a href="/product">Перейти к товару</a>
  <p>Стили для следующей страницы уже загружаются в фоне.</p>
</body>

Для загрузки ресурсов, которые понадобятся на следующих страницах, используется `rel="prefetch"`. Браузер загрузит их в фоновом режиме, когда будет свободен.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Разница между preload и prefetch

id: 37899_preload-prefetch-05

Давайте проверим понимание. У нас есть шрифт, нужный для отображения текущей страницы, и скрипт, который понадобится только на следующей. Расставьте правильные значения для `rel` в обоих тегах `<link>`.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}

                     <head>
  <title>Preload vs Prefetch</title>
  <!-- Загружаем шрифт для этой страницы -->
  <link rel="input1" href="font.woff2" as="font" crossorigin>

  <!-- Загружаем скрипт для следующей страницы -->
  <link rel="input2" href="next-page-script.js" as="script">
</head>
<body>
  <p>Один ресурс загружается с высоким приоритетом, другой — с низким.</p>
</body>

HTML

<head>
  <title>Preload vs Prefetch</title>
  <!-- Загружаем шрифт для этой страницы -->
  <link rel="input1" href="font.woff2" as="font" crossorigin>

  <!-- Загружаем скрипт для следующей страницы -->
  <link rel="input2" href="next-page-script.js" as="script">
</head>
<body>
  <p>Один ресурс загружается с высоким приоритетом, другой — с низким.</p>
</body>

Для ресурса текущей страницы (шрифт) используйте `preload`. Для ресурса будущей страницы (скрипт) используйте `prefetch`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Предзагрузка фонового изображения

id: 37899_preload-prefetch-06

Иногда важное изображение задается как фон через CSS, и браузер обнаруживает его довольно поздно. Давайте предзагрузим его, чтобы оно появилось быстрее. Укажите имя атрибута для типа ресурса и его значение для картинки.

CSS

.hero {
  width: 100%;
  height: 200px;
  background-image: url('https://naytikurs.ru/img/4j.jpeg');
  background-size: cover;
  background-position: center;
  border: 2px solid black;
  color: white;
  text-shadow: 1px 1px 2px black;
  display: flex;
  align-items: center;
  justify-content: center;
}

                     <head>
  <title>Preload фоновой картинки</title>
  <link rel="preload" href="https://naytikurs.ru/img/4j.jpeg" input1="input2">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="hero">
    <h1>Текст на фоне</h1>
  </div>
</body>

HTML

<head>
  <title>Preload фоновой картинки</title>
  <link rel="preload" href="https://naytikurs.ru/img/4j.jpeg" input1="input2">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="hero">
    <h1>Текст на фоне</h1>
  </div>
</body>

Чтобы предзагрузить изображение, используйте `as="image"`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку