Два способа предварительной загрузки: <link> теги и HTTP-заголовки

Демиан Рензулли

В этой лаборатории кода вы реализуете предварительную выборку двумя способами: с помощью <link rel="prefetch"> и с помощью заголовка HTTP Link .

Пример приложения представляет собой веб-сайт с рекламной целевой страницей со специальной скидкой на самую продаваемую в магазине футболку. Поскольку целевая страница ссылается на один продукт, можно с уверенностью предположить, что большой процент пользователей перейдет на страницу с описанием продукта. Это делает страницу продукта отличным кандидатом для предварительной загрузки на целевой странице.

Измерение производительности

Сначала установите базовую производительность:

  1. Нажмите Remix to Edit, чтобы сделать проект доступным для редактирования.
  2. Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим полноэкранный .
  3. Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.

  4. Откройте вкладку «Сеть» .

  5. В раскрывающемся списке «Регулирование» выберите «Быстрый 3G», чтобы имитировать медленный тип соединения.

  6. Чтобы загрузить страницу продукта, нажмите «Купить сейчас» в примере приложения.

Загрузка страницы product-details.html занимает около 600 мс:

Панель сети, показывающая время загрузки файла Product-details.html.

Предварительная загрузка страницы продукта с помощью <link rel="prefetch">

Чтобы улучшить навигацию, вставьте тег prefetch на целевую страницу, чтобы предварительно загрузить страницу product-details.html :

  • Добавьте следующий элемент <link> в заголовок views/index.html : 
<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

      <link rel="prefetch" href="/product-details.html" as="document">
      ...
</head>

Атрибут as не является обязательным, но рекомендуется; это помогает браузеру установить правильные заголовки и определить, находится ли ресурс уже в кеше. Примеры значений этого атрибута: document , script , style , font , image и другие .

Чтобы убедиться, что предварительная выборка работает:

  1. Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим полноэкранный .
  2. Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.

  3. Откройте вкладку «Сеть» .

  4. В раскрывающемся списке «Регулирование» выберите «Быстрый 3G», чтобы имитировать медленный тип соединения.

  5. Снимите флажок Отключить кеш.

  6. Перезагрузите приложение.

Теперь, когда загружается целевая страница, страница product-details.html тоже загружается, но с самым низким приоритетом:

Сетевая панель, показывающая предварительно загруженный файл Product-details.html.

Страница хранится в кэше HTTP в течение пяти минут, после чего применяются обычные правила Cache-Control для документа. В этом случае файл product-details.html имеет заголовок cache-control со значением public, max-age=0 , что означает, что страница хранится в общей сложности пять минут.

Переоцените производительность

  1. Перезагрузите приложение.
  2. Чтобы загрузить страницу продукта, нажмите «Купить сейчас» в примере приложения.

Взгляните на панель «Сеть» . Есть два отличия от исходной трассировки сети:

  • В столбце «Размер» указано «кеш предварительной выборки», что означает, что этот ресурс был получен из кеша браузера, а не из сети.
  • Столбец «Время» показывает, что время загрузки документа теперь составляет около 10 мс.

Это примерно на 98% меньше по сравнению с предыдущей версией, на которую ушло около 600 мс.

Панель сети, показывающая файл Product-details.html, полученный из кэша предварительной выборки.

Дополнительная оценка: использование prefetch в качестве прогрессивного улучшения.

Предварительную выборку лучше всего реализовать как прогрессивное усовершенствование для пользователей, которые просматривают страницы с быстрым соединением. Вы можете использовать API сетевой информации для проверки условий сети и на основе этого динамически вводить теги предварительной выборки. Таким образом, вы можете минимизировать потребление данных и сэкономить на расходах пользователей, пользующихся медленными или дорогими тарифными планами.

Чтобы реализовать адаптивную предварительную выборку, сначала удалите тег <link rel="prefetch"> из views/index.html :

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
       <link rel="prefetch" href="/product-details.html" as="document">
       ...
    </head>

Затем добавьте следующий код в public/script.js чтобы объявить функцию, которая динамически внедряет тег prefetch , когда пользователь использует быстрое соединение:

function injectLinkPrefetchIn4g(url) {
    if (window.navigator.connection.effectiveType === '4g') {
        //generate link prefetch tag
        const linkTag = document.createElement('link');
        linkTag.rel = 'prefetch';
        linkTag.href = url;
        linkTag.as = 'document';

        //inject tag in the head of the document
        document.head.appendChild(linkTag);
    }
}

Функция работает следующим образом:

  • Он проверяет свойство effectType API сетевой информации , чтобы определить, подключен ли пользователь к соединению 4G (или более быстрому).
  • Если это условие выполняется, он генерирует тег <link> с prefetch в ​​качестве типа подсказки, передает URL-адрес, который будет предварительно выбран, в атрибуте href и указывает, что ресурс является HTML- document в атрибуте as .
  • Наконец, он динамически вставляет скрипт в head страницы.

Затем добавьте script.js в views/index.html непосредственно перед закрывающим тегом </body> :

<body>
      ...
      <script src="/script.js"></script>
</body>

Запрос script.js в конце страницы гарантирует, что он будет загружен и выполнен после анализа и загрузки страницы.

Чтобы убедиться, что предварительная выборка не мешает критически важным ресурсам текущей страницы, добавьте следующий фрагмент кода для вызова injectLinkPrefetchIn4g() в событии window.load :

<body>
      ...
      <script src="/script.js"></script>
      <script>
           window.addEventListener('load', () => {
                injectLinkPrefetchIn4g('/product-details.html');
           });
      </script>
</body>

Целевая страница теперь предварительно загружает файл product-details.html только при быстром соединении. Чтобы убедиться в этом:

  1. Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим полноэкранный .
  2. Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
  3. Откройте вкладку «Сеть» .
  4. В раскрывающемся списке «Регулирование» выберите «Онлайн» .
  5. Перезагрузите приложение.

Вы должны увидеть product-details.html на панели «Сеть»:

Сетевая панель, показывающая предварительно загруженный файл Product-details.html.

Чтобы убедиться, что страница продукта не загружается заранее при медленном соединении:

  1. В раскрывающемся списке «Регулирование» выберите «Медленный 3G» .
  2. Перезагрузите приложение.

Панель «Сеть» должна включать только ресурсы целевой страницы без файла product-details.html :

Сетевая панель, на которой показано, что файл Product-details.html не загружается заранее.

Предварительная выборка таблицы стилей для страницы продукта с заголовком HTTP Link .

Заголовок HTTP Link можно использовать для предварительной выборки ресурсов того же типа, что и тег link . Решение о том, когда использовать тот или иной вариант, во многом зависит от ваших предпочтений, поскольку разница в производительности незначительна. В этом случае вы будете использовать его для предварительной загрузки основного CSS-кода страницы продукта, чтобы еще больше улучшить его отрисовку.

Добавьте заголовок HTTP- Link для style-product.css в ответ сервера для целевой страницы:

  1. Откройте файл server.js и найдите обработчик get() для корневого URL-адреса: / .
  2. Добавьте следующую строку в начало обработчика: 
app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});
  1. Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим полноэкранный .
  2. Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
  3. Откройте вкладку Сеть .
  4. Перезагрузите приложение.

style-product.css теперь предварительно загружается с самым низким приоритетом после загрузки целевой страницы:

Сетевая панель, показывающая предварительно загруженный файл style-product.css.

Чтобы перейти на страницу продукта, нажмите «Купить сейчас» . Взгляните на панель «Сеть» :

Панель «Сеть», показывающая файл style-product.css, полученный из кэша предварительной выборки.

Файл style-product.css извлекается из «кеша предварительной выборки», и его загрузка заняла всего 12 мс.