Главная » Статьи » Окончательное руководство по подсказкам в браузере Preload, Prefetch и Preconnect

Окончательное руководство по подсказкам в браузере Preload, Prefetch и Preconnect

Окончательное руководство по подсказкам в браузере Preload, Prefetch и Preconnect

От автора: знаете ли вы, что есть простой способ ускорить работу вашего сайта без особых усилий? Сегодня мы рассмотрим подсказки в браузере и директивы ресурсов, которые представляют собой крошечные фрагменты html, которые мы можем использовать для повышения производительности веб-сайта или веб-приложения всего за несколько минут.

По умолчанию браузеры сначала загружают ресурсы, объявленные в HTML. Однако директивы ресурсов подсказок дают возможность сообщить браузеру о загрузке нескольких вещей заранее, что может уменьшить воспринимаемое время загрузки сайта.

В следующем руководстве мы углубимся в различия между Preload (предварительная загрузка), Prefetch (предварительная выборка) и Preconnect (предварительное соединение).

Что такое директива Preload?

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

Окончательное руководство по подсказкам в браузере Preload, Prefetch и Preconnect

Например, возможно, у вас есть javascript, изображения или шрифты, которые используются ниже на странице. Указав, что они предварительно загружаются, ваш браузер начнет их загрузку немедленно и будет готов к использованию после того, как они будут фактически указаны в HTML.

Эта директива может быть определена внутри элемента в заголовке HTML-документов. Например так:

<link rel="preload">

Preload также имеет возможность определять включённый атрибут с возможными значениями, но без ограничений:

script

style

font

image

document

Атрибут as позволяет вам, помимо прочего, более эффективно управлять приоритетом ресурсов.

Синтаксис Preload

Вот синтаксис и очень простой пример предварительной загрузки.

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

<link rel="preload" href="image.png">

2. Предварительная загрузка шрифтов

Согласно спецификации Preload, при предварительной загрузке шрифтов есть дополнительный атрибут, который необходимо принимать во внимание.

Ссылки Preload для ресурсов с поддержкой CORS, таких как шрифты или изображения с атрибутом crossorigin, также нужно включать атрибут crossorigin , чтобы ресурс был использован правильно.

<link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin>

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

<!-- Via markup -->
<link rel="preload" href="https://blog.keycdn.com/blog/css/mystyles.css" as="style">
<!-- Via JavaScript --> <script> var res = document.createElement("link"); res.rel = "preload"; res.as = "style"; res.href = "css/mystyles.css"; document.head.appendChild(res); </script>

Поддержка Preload в браузерах

Согласно caniuse.com, Preload поддерживается следующими браузерами:

Окончательное руководство по подсказкам в браузере Preload, Prefetch и Preconnect

На данный момент Chrome, Firefox, Samsung Internet. и браузер Chrome для Android поддерживают функцию Preload, и она будет только более широко принята другими браузерами в будущем, поскольку каждый стремится ускорить работу в интернете.

Что такое Prefetching?

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

Окончательное руководство по подсказкам в браузере Preload, Prefetch и Preconnect

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

Поддержка Prefetch браузерами

Согласно caniuse.com, prefetch поддерживается следующими браузерами:

Окончательное руководство по подсказкам в браузере Preload, Prefetch и Preconnect

На данный момент браузеры IE, Edge, Chrome, Firefox, Samsung Internet и Chrome для Android поддерживают функцию Prefetch. В будущем другие браузеры тоже начнут поддерживать эту функцию.

Типы Prefetch

Существует два разных типа prefetch.

Prefetch ссылок

Prefetch DNS

Давайте рассмотрим каждый тип по отдельности на конкретных примерах:

1. Что такое Prefetch DNS?

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

Посмотрите, на водопад скорости на этой странице. Всякий раз, когда вы загружаете страницу, первое, что происходит, — это поиск в DNS.

Окончательное руководство по подсказкам в браузере Preload, Prefetch и Preconnect

В любой момент вы загружаете поиск в DNS — ресурс, который возникает в первую очередь. Если ресурс является локальным для вашего домена, тогда поиск dns уже произошел, поэтому там не так много помощи. Но если вы используете CDN или загружаете скрипты из другого домена, это поможет уже найденым DNS.

Согласно Mozilla Developer Network: «Запросы DNS имеют очень низкую пропускную способность, но их латентность может быть довольно высокой, особенно в мобильной сети. С помощью спекулятивной предварительной обработки результатов DNS в определенные моменты времени задержка может быть значительно уменьшена, например, когда пользователь нажимает на ссылку. В некоторых случаях латентность может быть уменьшена на секунду. – Это также полезно для ресурсов при Redirect ».

Интересно, что Google Chrome делает нечто подобное уже с первого запуска. Посетив chrome://dns/ вы можете узнать, какие доменные имена предварительно разрешены.

Окончательное руководство по подсказкам в браузере Preload, Prefetch и Preconnect

Синтаксис Prefetch DNS

Можно заставить DNS запрашивать все сайты, разместив название хоста с помощью атрибута rel в теге link с типом dns-prefetch:

<link rel="dns-prefetch" href="http://www.example.com/">

Предварительная выборка DNS может быть добавлена к определенному URL-адресу, добавив rel = «dns-prefetch» к атрибуту link. Мы предлагаем использовать это для таких вещей, как Google fonts, Google Analytics и CDN.

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdn.domain.com">
<link rel="dns-prefetch" href="//opensource.keycdn.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">

Что такое предварительная выборка ссылок?

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

Синтаксис предварительной выборки ссылок

Браузер ищет Prefetch в HTML link или HTTP-заголовке Link, например:

HTML: <link rel=»prefetch» href=»/uploads/images/pic.png»>

HTTP Header: Link: </uploads/images/pic.png>; rel=prefetch

Но будьте осторожны, прежде чем начинать делать это со всеми вашими страницами. По словам разработчиков Google: «Этот метод может ускорить работу многих интерактивных сайтов, но не будет работать везде. На некоторых сайтов слишком сложно угадать, что пользователь может сделать дальше. На других данные могут быть устаревшими, если они будут получены слишком рано, или вы можете замедлить страницу, на которой уже находится пользователь».

Что такое Preconnect?

Предварительным подключением является еще один тег html оптимизации скорости, в котором браузер устанавливает соединение до того, как HTTP-запрос будет отправлен на сервер.

Такие соединения, как DNS-поиск и согласование TLS, могут быть начаты заранее, устраняя латентность задержек этих соединений и экономя время для пользователей.

По словам Lya Grigorik: Preconnect является важным инструментом в оптимизации … он может устранить многие обратные вызовы из пути запроса — в некоторых случаях задержка запросов сокращается на сотни и даже тысячи миллисекунд.

Синтаксис Preconnect

Он добавляется непосредственно в заголовок документа HTML с тегом link в качестве атрибута.

<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

Согласно W3C Resource Hints, чтобы инициировать preconnect, пользовательский агент должен выполнить следующие 6 шагов:

Разрешите URL заданный атрибутом href.

—Если это пройдёт успешно, пусть preconnect URL будет конечным абсолютным URL-адресом, в противном случае нужно пропустить этот шаг.

—Если схема preconnect URL — адреса не относится к «http» или «https», пропустить этот шаг.

Предположим, что preconnect является origin URL — адресом.

Сделайте corsAttributeState текущим состоянием содержимого crossorigin элемента.

Учетные данные должны быть логическим значением, установленным в true.

Если corsAttributeState Anonymous и origin не совпадают с текущим источником документа, установите учетные данные в значение false.

Попытайтесь получить соединение с источником и учетными данными.

Поддержка браузерами Preload

Согласно caniuse.com preconnect поддерживается следующими браузерами:

Окончательное руководство по подсказкам в браузере Preload, Prefetch и Preconnect

В данный момент браузеры Edge, Chrome, Firefox, Samsung Internet и Chrome для Android поддерживают функцию Preconnect.

Подведение итогов

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

Источник: https://www.machmetrics.com/

Редакция: Команда webformyself.