Dns prefetch что это

Обновлено: 04.07.2024

Скорость загрузки сайта – важный пункт технической оптимизации сайта.

Ранее мы уже рассказывали о 12 способах, как увеличить этот показатель в данной статье. В случае если все рекомендации выполнены, а скорость сайта желает лучшего, можно воспользоваться специальными директивами и ресурсными подсказками для браузеров (Resource Hints), чтобы увеличить показатели скорости вашего сайта.

В этой статье будут рассмотрены следующие директивы и ресурсные подсказки для браузеров:

Preload
Prefetch
dns-prefetch
Preconnect
Prerender

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

Сразу обозначу, что это не является для браузера прямой инструкцией, а имеет рекомендательный характер.

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

Второй важный момент: стоит понимать, что благодаря этим подсказкам скорость по Google PageSpeed не увеличится в разы.

Эти подсказки помогут скорее посетителю сайта и практически не повлияют на оценочные баллы PageSpeed.

Данные директивы относительно недавно появились, поэтому на старых версиях браузеров они не поддерживаются. Если вы хотите их использовать, следует обновить свой браузер.

Версии браузеров, поддерживающие те или иные ресурсные подсказки, можно посмотреть по ссылкам:

Разберемся с директивами по очереди. Предлагаю начать с dns-prefetch.

Dns-prefetch

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

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

Обработка dns-prefetch происходит в фоновом режиме во время просмотра пользователем страницы сайта.

Например, так мы сообщим о том, что надо проверить связь с dns Яндекса.

Следующая директива preconnect.

Preconnect

Отличается от dns-prefetch тем, что не только ищет указанный днс, но и выполняет обмен пакетами с сервером (клиент -> сервер -> клиент), и тем самым инициирует TCP-соединение с сервером.

TCP (Transmission Control Protocol, протокол управления передачей) – один из основных протоколов передачи данных интернета. Представляет собой поток данных с предварительной установкой соединения. Осуществляет повторный запрос данных в случае их потери, а также устраняет дублирование при получении двух копий одного пакета, гарантируя тем самым целостность передаваемых данных.

TLS (англ. transport layer security – протокол защиты транспортного уровня) – протокол, обеспечивающий защищённую передачу данных между узлами в сети Интернет.

Рассмотрим пример использования preconnect для Яндекс.Метрики:

Практическое сравнение preconnect и dns-prefetch

Скорость сайта без использования подсказок, TLS-соединение:

Скорость сайта без использования подсказок, TCP-соединение:

Добавим к TLS-соединению подсказки и получим вот такую картину.

TLS-соединение с использованием preconnect:

TLS-соединение с использованием dns-prefetch:

Теперь можно наглядно увидеть различие между dns-prefetch и preconnect: для второго вместе с обращением к dns сразу выполняется обмен пакетами для установки TCP- или TLS-соединения. И в дальнейшем, когда происходит непосредственно обработка скрипта в коде, из цепочки загрузки исключаются эти этапы, что сокращает скорость загрузки.

Как видно из графиков, с помощью подсказок мы заранее сообщаем браузеру о том, что в дальнейшем мы будем использовать внешний ресурс Яндекса, и нужно сразу получить информацию о его dns.

Стоит учесть, что это усредненное значение из выборки тестов, были единичные случаи, когда загрузка происходит быстрее, а также наоборот.

Prefetch

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

Prefetch имеет низкий приоритет среди остальных подсказок, его стоит использовать для ресурсов, которые понадобятся в будущем.

Однако в режиме простоя браузер не будет находиться вечно. Из этого вытекает вопрос, что будет с ресурсами, для которых указана директива prefetch, после того как пользователь перейдет на другую страницу и прервет режим простоя?

Ответ прост: браузер сохранит в кэше загруженную часть и вернется к дальнейшей загрузке снова, используя заголовок Content-Range, когда страница будет полностью загружена.

С помощью атрибута as указывается тип ресурса. Это помогает браузеру выбрать приоритет загрузки для предварительной выборки.

Также позволяет браузеру понять, совместим ли запрос с политикой безопасности контента в соответствии с атрибутом as. С помощью этого атрибута браузер может посылать подходящие заголовки accept, основываясь на типе ресурса.

Атрибут as может иметь следующие значения:

audio: аудио файлы <audio>
document: HTML документ, встраиваемый с помощью <frame> или <iframe>
embed: Ресурс для встраивания в <embed>
fetch: ресурс, к которому должен обращаться запрос на выборку или XHR, например, файл ArrayBuffer или JSON
font: Шрифты
image: Изображения
object: Ресурс встроенный в <object>
script: Скрипты
style: Стили
track: WebVTT файлы
worker: JavaScript код для Web Workers (средство для запуска скриптов в фоновом потоке)
video: Видео файлы <video>

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

Пример из практики использования Prefetch

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

Добавим в код страницы:

Проверим в браузере Google Chrome. Нужно открыть вкладку сеть (network) и найти там соответствующее изображение.

В строке Status Code увидим надпись (from prefetch cache), это означает что изображение закэшировалось и, соответственно, загрузилось из специального Prefetch-кеша.

Preload

Эта подсказка так же, как и Prefetch, служит для предварительной загрузки ресурсов, но имеет более высокий приоритет и используется для текущей навигации пользователя. То есть эта подсказка работает не для будущих страниц, а для страницы, на которой находится пользователь.

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

Это полезно для загрузки скриптов и таблиц стилей.

Если необходима предварительная загрузка связей с разрешенными CORS-ресурсами, необходимо добавить атрибут crossorigin.

Cross-origin resource sharing (CORS; с англ. – «совместное использование ресурсов между разными источниками») – технология современных браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена.

Так же, как и Prefetch, имеет атрибут As, используется для тех же целей.

По истечении 3 секунд после загрузки ресурса, если он не используется, Google Chrome выведет соответствующее предупреждение:

Не стоит использовать Preload для большого количества ресурсов, я бы рекомендовал применять его для предварительной загрузки шрифтов, и не более четырех раз. Чрезмерное использование этой подсказки может негативно влиять на загруженность сервера и соответственно скорость.

Prerender

И в завершении подсказка Prerender. С ее помощью можно предварительно загрузить в кэш браузера целую страницу. Нужно быть уверенным в том, что пользователь точно посетит указанную страницу, так как Prerender является одной из наиболее ресурсопотребляемых директив и может послужить причиной падения пропускной способности, особенно при использовании мобильных устройств.

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

DOM (от англ. Document Object Model – «объектная модель документа») – это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

К сожалению, эту подсказку пока поддерживает наименьшее количество браузеров – Google Chrome и Microsoft Edge последних версий.

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

Также можно использовать для страниц акций, скидок.

Заключение

С помощью использования ресурсных подсказок и директив можно повысить скорость загрузки сайта на стороне пользователя.

Эти подсказки не создадут существенного прироста по параметрам Google PageSpeed, однако могут быть полезны для пользователей.

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

Основная цель использования rel=dns-prefetch – это ускорение загрузки веб-страниц, когда для страниц используются разные домены.

Процесс запроса и загрузки страницы оптимизируется, благодаря эффективному контролю.

Процесс часто называют "DNS prefetching".

Определение W3C

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

Где используется rel="dns-prefetch" used?

В тэге head документа.

Важность применения DNS предзагрузки

В жизни можно быть уверенным в двух вещах — в смерти и налогах.

При загрузке страницы, можно быть уверенным в одном запросе DNS на один домен.

Это значит, если ваша страница найдена на трех доменах, будет сделано соответственно минимум три запроса. Если вы используете ресурсы с 10 доменов, вы получите минимум 10 запросов.

Поэтому используйте возможность минимизировать dns запросы.

Где полезно применять DNS предзагрузку?

Например, у вас на сайте целая пачка js файлов, которые используются при загрузке страницы. У вас также могут использоваться другие сторонние инструменты (adsense, seo инструменты, инструменты маркетинга и т.д.).

В реальности вы не знаете наверняка, какие файлы браузер начнет загружать в первую очередь.

Вы точно знаете, что будет задействован CDN.В данном случае самое время использовать DNS предзапрос, потому что тогда в первую очередь будет выполнен запрос к DNS, а не загрузка сторонних файлов.Т.е. Данная практика позволит быстрее отобразить страницу.

Предзапрос DNS фактически дает вам возможность контролировать то, как страница будет загружаться, «намекая» браузеру, с чего начать.

Где НЕ полезен DNS предзапрос?

Если все ресурсы и файлы страницы лежат на одном домене с html.

Если все файлы js, css, картинки и т. д. лежат на одном домене вместе с самим сайтом, тогда нет необходимости указывать предзапрос, это может только навредить.

Как правило лучше правильно организовать веб-страницу, чем делать предзапросы.

Перед тем как делать предзапрос DNS, возможно вам стоит узнать как можно уменьшить количество вызовов доменов. Я понимаю, что не на каждом сайте это можно сделать, но все же задайте себе 3 вопроса:

Есть ли на странице ресурсы с разных доменов?
Данные ресурсы вызываются одинаково?
Могу ли я уменьшить кол-во доменов?

1. Есть ли на странице ресурсы с разных доменов?

2. Данные ресурсы вызываются одинаково?

3. Могу ли я уменьшить кол-во доменов?

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

Узнайте, как загружаются ваши страницы, с помощью сервиса page resource tool, так вы узнаете какие домены вызываются при загрузке.

Разработчики постоянно пытаются повысить производительность глобальной сети, начиная с браузеров, заблаговременно загружающих страницы еще до того, как будет введен поисковой критерий, до приоритизации контента на видимой части страницы. HTML уже сделал несколько шагов в сторону упрощения этого процесса с помощью rel=«next» и rel=«previous» для создания подсказок для браузера, который сможет с их помощью заранее скрыто загружать страницы еще до совершения какого-либо действия со стороны пользователя.

Не так давно W3C добавили несколько новых функций в link как части спецификации Resource Hints, которые обеспечивают более разумную предварительную загрузку контента сайта, потенциально повышая скорость загрузки страницы на сайтах, на которых они используются.

Кто стучится в дверь ко мне

Поиск DNS – процесс поиска доменного имени в сети и его перевода в IP-адрес – может занимать от десяток до сотен миллисекунд. Если пользователь уже на вашем сайте, его браузер уже знает его положение… но если вы загружаете ресурсы с других сайтов на свой страницу, браузеру нужно время на обработку информации DNS по каждому из них, так как он находит их в HTML. Вы можете предвосхитить этот процесс, поместив dns-prefetch для внешних сайтов в своей страницы.

Пример использования dns-prefetch

Одним из общепризнанных внешних ресурсов является скрипт Google Analytics, который используется для отслеживания поведения посетителей на вашем сайте. Вызов скрипта обычно размещают в самом конце страницы:

Потенциально это ускоряет загрузку страницы по частям для каждого URL, указанного в dns-prefetch, так как браузер уже «знает», куда ему нужно пойти, чтобы достать ресурс, пока до него дойдет парсер.

Открываем дверь

preconnect помогает продвинуться еще дальше. Он делает все то же, что и dns-prefetch, но при этом добавляет несколько дополнительных согласований в отношении интернет-соединения; если dns-prefetch «стучится», чтобы проверить расположение сайта, то preconnect открывает дверь.

Пример использования preconnect

Статьи на сайте оригинала иногда используют ресурсы, сохраненные на сервере Amazon S3, вызываемые в ситуациях, когда в страницу встраивается демо CodePen. Чтобы ускорить поиск этих файлов, в добавляется preconnect:

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

Реализуем выборку

Еще один шаг вперед – это prefetch (предварительная выборка), предназначенная для загрузки ресурса, который, скорее всего, будет использоваться в следующей навигации пользователя. Как правило, это страница, на которую, скорее всего, перейдет пользователь после той, на которую он смотрит в данный момент.

Пример использования prefetch

prefetch наиболее похож на rel=«previous» и next, и в большинстве случаев будет использоваться таким же образом. В случае, описанном в данной статье, наиболее вероятной целью для пользователя будет предыдущая страница:

Не забывайте учитывать главную страницу своего сайта в качестве потенциальной цели предварительной выборки. Веб-разработчики часто подсознательно допускают, что посетители всегда будут приходить через главную страницу их сайта, но во времена Google это не всегда так.

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

Спецификация Resource Hints предлагает вариант добавления статистической вероятности того, что пользователь перейдет к определенному ресурсу, позволяя вам настроить поведение предварительной выборки; насколько я знаю, на данный момент ни один браузер не поддерживает эту функцию.

Загрузка без блокировки

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

Пример использования preload

Хорошим примером использования preload являются веб-шрифты: как правило, шрифты загружаются только тогда, когда они будут определены в CSS, что зачастую приводит к страшному «сборищу контента без оформления», так как страница отрисовывается сначала с помощью стандартных типов шрифтов, и только потом, при загрузке, перерисовывает страницу с помощью веб-шрифта. Чтобы избежать этого, мы можем указать, чтобы шрифт загружался до того, как мы достигнем CSS. В случае с данным сайтом, это будет шрифт Libertad, используемый для оформления текста тела страницы:

Обратите внимание на опциональный атрибут as, который указывает браузеру, какой тип ресурса загружается.

Отрисовка

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

Пример использования Prerender

Одним из наиболее очевидных способов применения на данном сайте являются демо, как, например, для видео по фону страницы в HTML5. На странице статьи мы могли бы добавить:

…что бы предварительно загружалось и отрисовывалось демо по мере того, как пользователь читает статью.

Такой вид поведения, как правило, достигался за счет использования предзагрузчиков JavaScript, а для сложных сайтов до сих пор может потребоваться код JS. Но для более простых случаев достаточно эффективным будет и prerender.

Подсказки по ресурсам как инвестиция

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

Учитывая все это, существует несколько факторов, которые могут улучшить поведение страницы в процессе предзагрузки:

Эффективные подсказки по ресурсам полагаются на внимательный учет показателей страницы. Нет ничего плохого в угадывании, куда пользователи могут перейти после посещения страницы на вашем сайте, но ожидания сильно отличаются от фактических данных. Если вы запускаете новый или обновленный сайт, догадки будут работать хорошо; но после недели или более сборов данных, аналитические данные по сайту необходимо использовать для: (а) формирования действий пользователя за счет изменения дизайна сайта, чтобы направлять посетителей туда, куда вы хотите (и куда направлены ваши подсказки по ресурсам) или (b) изменения подсказок, чтобы они точно отражали поведение пользователя.
Не только для браузеров. Вместе с <link rel=«next» …> и rel=«previous», подсказки по ресурсам предоставляют поисковым движкам дополнительные возможности оценивать и связывать контент. Например, Google может использовать next и previous, чтобы помочь определить организационную структуру сайта и приоритизировать результаты для первой страницы связанными рядами.

Заключение

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

DNS-prefetch (предзагрузка DNS) - это попытка определить IP адрес по имени домена до того, как ресурс с этого домена будет фактически запрошен. Это может быть загрузчик файлов, который используется позже или ссылка, по которой, вероятно, перейдёт пользователь.

Зачем использовать dns-prefetch?

Бывают случаи, когда в вашем приложении используются ссылки на домены, отличные от основного домена приложения. Например, внутри вашего приложения на "a.com" есть ссылка на домен "b.org". Для того, чтобы пройти по этой ссылке, пользовательский клиент должен сначала выяснить, какой адрес в интернете соответствует доменному имени "b.org". Этот процесс называется DNS resolution. И хотя механизмы кеширования DNS помогают сократить время запросов, DNS Resolution заметно влияет на время ожидания запроса из-за того, что первый клиентский запрос уходит сначала на DNS сервера и дожидается ответа от них. Для приложений, которые открывают соединения ко многим сторонним доменам, влияние DNS Resolution может сильно уменьшить производительность загрузки.

dns-prefetch помогает разработчикам замаскировать ожидание DNS resolution. HTML <link> элемент предлагает подобную функциональность с помощью атрибута rel , значение которого может содержать dns-prefetch . В этом случае, предзагрузка DNS произойдёт для домена, указанного в атрибуте href:

Синтаксис

Примеры

Вы должны помещать dns-prefetch подсказки в элемент <head> для каждого уникального стороннего домена, с которого могут быть запрошены ресурсы, но нужно держать некоторые детали в голове.

Лучшие практики

Необходимо учитывать 3 вещи:

Во-первых, dns-prefetch эффективен только для выполнения DNS запросов на сторонние cross-origin домены, поэтому следует избегать этой инструкции при попытке загрузить ресурсы с текущего домена. Связано это с тем, что IP вашего домена уже был определён к тому времени, когда браузер увидел эту инструкцию.

В третьих, хорошей практикой считается использование dns-prefetch в паре с preconnect . В то время, как dns-prefetch срабатывает только при DNS поиске, preconnect устанавливает соединение к нужному серверу. Этот процесс включает в себя DNS resolution, установку TCP соединения и установление безопасного соединения (TLS рукопожатие), если оно доступно. Комбинирование этих двух инструкций даёт возможность ещё больше сократить время ожидания для кросс-доменных запросов. Вы можете использовать их вместе таким образом:

Примечание: если приложению необходимо установить соединение со множеством доменов, использование preconnect контрпродуктивно. preconnect лучше использовать для наиболее критических соединений. Для менее важных достаточно использовать <link rel="dns-prefetch"> для сокращения времени DNS запроса.

В совместном использовании этих двух техник есть логика. Она заключается в том, что dns-prefetch поддерживается большим количеством браузеров, чем preconnect. Клиенты, которые ещё не поддерживают preconnect, все ещё будут получать бонусы от работы dns-prefetch. Так как эти инструкции относятся к HTML, они очень толерантны к ошибкам. Если какой-то устаревший браузер встречает dns-prefetch, ваш сайт не сломается. Вы просто не получите улучшений от этой инструкции.

Некоторые ресурсы, например, шрифты, загружаются в анонимном режиме. В подобных случаях вы должны указывать crossorigin атрибут с инструкцией preconnect. Если вы пропустите её, то браузер выполнит только DNS запрос.

Рассмотрим ресурсные подсказки и директивы (Resource Hints). Эти инструменты ускоряют веб-сайты и веб-приложения. Разберем различия между подсказками preload, prefetch и preconnect. Это поможет успешно их использовать. Вот некоторые их преимущества:

1) оптимизируют доставку ресурсов;

2) сокращают количество сетевых задержек;

3) доставляют контент быстрее,— в то время, пока пользователь смотрит страницу.

1. Директива preload

Директива preload — это новый веб-стандарт, который хорошо управляет выбором конкретных ресурсов для текущей навигации. Preload — обновленная версия подресурса prefetch, раскритикованного в январе 2016. Эта директива может быть определена в элементе <link>, например, <link rel="preload">. Как правило, лучше предварительно загружать самые важные ресурсы, такие как изображения, CSS, JavaScript и файлы шрифтов.

Не путайте директиву preload с предварительной загрузкой браузером только тех ресурсов, которые объявлены в HTML. Директива preload преодолевает это ограничение. Preload позволяет предварительно загрузить ресурсы, инициированные CSS и JavaScript, а также описать, когда нужно использовать каждый ресурс.

Чем же preload отличается от prefetch? Preload работает с текущей навигацией и ресурсами с высоким приоритетом. Prefetch — ресурсы с низким приоритетом для следующей навигации. Отметим, что preload не блокирует window-событие onload.

На рисунке 1 показан пример использования директивы preload для загрузки ресурсов JavaScript.

Рис. 1. Пример использования директивы Preload для загрузки ресурсов JavaScript

1.1. Преимущество директивы preload

Вот некоторые преимущества директивы preload:

Позволяет браузеру устанавливать приоритет ресурса, что, в свою очередь, позволяет веб-разработчикам оптимизировать доставку ресурсов.
Позволяет браузеру выяснить тип ресурса, что, в свою очередь, позволяет узнать, можно ли тот же самый ресурс снова использовать в дальнейшем.
Позволяет браузеру выяснить, совместим ли запрос с политикой безопасности контента в соответствии с атрибутом as.
Позволяет браузеру послать подходящие заголовки accept, основанных на типе ресурсов (такие как image/webp).

1.2. Примеры

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

Ниже пример предварительной загрузки шрифтов.

Замечание. При предварительной загрузке связей с разрешенными CORS-ресурсами необходим атрибут crossorigin.

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

1.3. Браузерная поддержка preload

Поддержка директивы preload была добавлена к браузеру Chrome 50 в апреле 2016, а также поддерживается браузером Opera 37 и выше. Поддержка директивы preload пока еще не реализована для браузера Mozilla Firefox, а ее появление в браузере Microsoft Edge вероятно (на 9 января 2017).

На рисунке 2 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы preload (на 9 января 2017). Последнее состояние см. на этой странице

Рис. 2. Последние версии наиболее распространенных браузеров с указанием поддержки директивы preload. Зеленый цвет означает поддержку, красный — ее отсутствие, серый цвет означает вероятное появление (на 9 января 2017)

2. Prefetch

Prefetch — это низкоприоритетная ресурсная подсказка, позволяющая браузеру выбирать в фоновом режиме (в свободное время) те ресурсы, которые могут пригодиться позже, и сохранять их в кэше браузера. Как только страница закончит загружаться, prefetch загружает некоторые дополнительные ресурсы. Когда пользователь жмет на prefetch-ссылку, prefetch немедленно загружает контекст. Имеется три различных типа prefetch, рассмотренные далее:

На рисунке 3 показаны четыре шага выполнения ссылочного prefetch.

Шаг 2 (Step 2). Браузер находит prefetch-ссылки (Browser finds prefetch links).

Шаг 3 (Step 3). Браузер выбирает затребованный контент, чтобы показать на экране prefetch-страницы. Одновременно с этим контент сохраняется в кэше, пока пользователь щелкает по ссылке. Внизу изображен кэш браузера.

Рис. 3. Четыре шага выполнения ссылочного prefetch

2.1. Ссылочный prefetch

Как сказано выше, ссылочный prefetch позволяет браузеру выбрать ресурсы и сохранить их в кэше, предполагая, что потом пользователь их запросит. Браузер ищет prefetch в HTML в теге <link> или в его заголовке Link:

Замечание. «Эта техника ускорит многие интерактивные сайты, но не будет работать всегда и везде по следующим причинам:

1. Для некоторых сайтов трудно угадать, что пользователь собирается делать.
2. Для других сайтов сохраненные в кэше данные устаревают, если пользователь быстро выбирает новые.

3. Опасно постоянно сохранять файлы в кэше — просмотр текущей страницы замедлится».

Google Developers.

Ссылочный prefetch поддержан большинством современных браузеров, за исключением Safari, Safari iOS и Opera Mini. Chrome и Firefox, кроме того, покажут prefetch-ресурсы на сетевой панели (на 9 января 2017).

На рисунке 4 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы ссылочного prefetch (на 9 января 2017). Последнее состояние см. на этой странице

Рис. 4. Последние версии наиболее распространенных браузеров с указанием поддержки директивы prefetch. Зеленый цвет означает поддержку, красный — ее отсутствие (на 9 января 2017)

2.2. DNS prefetch

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

DNS prefetch входит в URL как атрибут тега link: rel="prefetch". Используется для шрифтов Google, Google Analytics и CDN.

«DNS-запросы быстры в смысле пропускной способности, но время ожидания может быть велико, особенно в мобильных сетях. Теоретически DNS prefetch может значительно уменьшить время ожидания в определенные моменты, например, когда пользователь щелкает по ссылке. Иногда время ожидания можно уменьшить на целую секунду.»

Mozilla Developer Network.

Это также используется при распределении ресурсов. Вот пример:

Отметим, что Google Chrome поступает аналогично, когда в адресной строке набирается текст, используя DNS presolve и TCP preconnect. Что довольно круто! На chrome://dns/ виден список используемых prefetch-сайтов, пример которого показан на рисунке 5.

По поводу DNS presolve см. статью «Особенности резолвера DNS в Windows 10 и DNS Leak» на Хабрахабре

Рис. 5. DNS prefetch 10 хостов для будущих загрузок. Первый столбец Имя хоста, второй — Как давно (чч:мм:сс), третий — Источник

По поводу Pagespeed-фильтра см. краткую статью «Пакет программ Page Speed от Google» на Хабрахабре

DNS prefetch также поддержан большинством современных браузеров, за исключением Opera Mini (на 9 января 2017).

На рисунке 6 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы DNS prefetch (на 9 января 2017). Последнее состояние см. на этой странице

Рис. 6. Последние версии наиболее распространенных браузеров с указанием поддержки директивы DNS prefetch. Зеленый цвет означает поддержку, красный — ее отсутствие, серый цвет означает вероятное появление, салатовый — промежуточный вариант (на 9 января 2017)

2.3. Prerender

Prerender очень похож на prefetch тем, что тоже собирает ресурсы, на которые может попасть пользователь. Различие в том, что prerender принимает в фоновом режиме всю страницу, все содержание документа. Вот пример.

«Подсказка prerender используется приложением для указания следующей вероятной цели HTML-навигации. При этом пользовательский агент выберет и обработает указанный ресурс как HTML-ответ. А вот для того, чтобы выбрать другой тип контента, или же когда предварительная обработка HTML нежелательна, приложение использует другую подсказку — prefetch.»

W3C

Например, prerender — это инструмент браузера Chrome, улучшающий время загрузки страниц сайта. На рисунке 7 схематически показано, как prerender запускается тегами <link rel="prerender"> на указанных страницах. Скрытая страница создана для prerender URL, который будет полностью загружать все связанные ресурсы и выполнять JavaScript. Если пользователь откроет эту страницу, скрытая страница будет обменена на текущую и сделана видимой.

1. Запуск тега <link rel=prerender>.

2. Заблаговременное создание невидимых страниц.

3. Загрузка пользователем другой страницы, включающей выполнение JavaScript.

4. После выбора пользователем новой страницы обмен текущей страницы на скрытую.

5. Удаление скрытых страниц через небольшой промежуток.

По поводу prefetch и prerender см. также статью «Улучшение субъективной скорости работы сайта при помощи подсказок браузеру» на Хабрахабре

Рис. 7. Схематически показано, как prerender запускается тегом <link rel="prerender">

Нужна осторожность с prerender, это — тяжелый ресурс, и его использование может вызвать падение пропускной способности, особенно на мобильных устройствах.

Prerender поддерживается некоторыми браузерами за исключением Mozilla Firefox, Safari, iOS Safari, Opera Mini и браузера Android (на 9 января 2017).

На рисунке 9 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы prerender (на 9 января 2017). Последнее состояние см. на этой странице

Рис. 9. Последние версии наиболее распространенных браузеров с указанием поддержки директивы prerender. Зеленый цвет означает поддержку, красный — ее отсутствие (на 9 января 2017)

Prefetch имеет некоторые недостатки, например, проблемы с секретностью.

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

3. Preconnect

«Preconnect — важный инструмент оптимизации… он устраняет дорогостоящие круговые задержки из пути запроса. Иногда время ожидания запроса сокращается на сотни и даже тысячи миллисекунд».

Илья Григорик (англ. Ilya Grigorik).

На рисунке 10 сравнивается время загрузки DNS/TCP/TLS с использованием preconnect и без него. В верхней части рисунка приведено время загрузки без использования preconnect, равное 2,6 с. Внизу — с использованием preconnect, время загрузки равно 2,1 с.

Рис. 10. Сравнение времени загрузки DNS/TCP/TLS с использованием preconnect и без него

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

Более подробно см. статью Ильи Григорика «Eliminating Roundtrips with Preconnect»

Рис. 11. Пример использования preconnect со шрифтами Google

Эффективное и продуманное использование preconnect не только поможет оптимизировать веб-сайт, но также защитит от недостаточного использования ресурсов. Preconnect поддерживается некоторыми современными браузерами за исключением Internet Explorer, Safari, iOS Safari и Opera Mini (на 9 января 2017).

На рисунке 12 показаны последние версии наиболее распространенных браузеров с указанием поддержки директивы preconnect (на 9 января 2017). Последнее состояние см. на этой странице

Рис. 12. Последние версии наиболее распространенных браузеров с указанием поддержки директивы preconnect. Зеленый цвет означает поддержку, красный — ее отсутствие, серый цвет означает вероятное появление (на 9 января 2017)

Итоги

Возможно, теперь понимание того, что есть preload, prefetch и preconnect, стало немного лучше. А также стратегии их использования для ускорения доставки контента. Будет приятно, если использование директивы preload возрастет в ближайшие месяцы, а веб-разработчики примут ее на вооружение.

Читайте также: