То же самое происходит, если на сайте использованы сторонние ресурсы. Например, большой интернет-магазин может хранить данные описания товара на другом сервере, чтобы не перегружать основной. Поэтому происходит процесс поиска доменного имени в сети и его перевода в IP-адрес, который занимает время. С помощью специальных инструментов можно создать браузеру условия при которых он будет осуществлять поиск и проверку адреса стороннего сайта, пока загружается остальной контент.
В случае, когда все файлы страницы и необходимые для её работы ресурсы находятся на одном домене с HTML, либо одном домене с сайтом, проводить данную оптимизацию не нужно. Она не только не поможет, но и может сделать хуже. Если же для корректной работы сервиса необходимо взаимодействие со сторонними доменами — следует добавить ресурсные подсказки preconnect или dns-prefetch.
Что такое линк Preconnect и как его использовать
Когда страница собирается контактировать с другим источником данных, которым является сторонний домен, и полученная с него информация является важной, DNS об этом должен знать заранее. Для этого используется линк <link rel=»preconnect»>, который сообщает браузеру, о ваших намерениях и говорит, что соединение со сторонним источником необходимо произвести как можно быстрее.
Установление соединений всегда требует времени, особенно если работа производится в медленных сетях. А если речь идёт о безопасном соединении, которые включают в себя поиск DNS, перенаправления и несколько обратных вызовов к конечному серверу, то данный процесс затянется ещё дольше. В результате, браузер потратит больше времени на соединения, нежели на обмен данными. Если произвести подготовительную работу, то приложение станет гораздо быстрее и не потребует дополнительной нагрузки на пропускные каналы.
Для того, чтобы сообщить браузеру о ваших планах, необходимо просто использовать тег <link rel=»preconnect»> в hrеf документа. В данном случае ссылка будет выглядеть таким образом:
<link rel=»preconnect» href=»https://example.com«>
Это значит, что требуемый нам контент будет загружен с example.com и подключение к нему требуется произвести как можно быстрее.
Стоит учитывать, что хоть <link rel=»preconnect»> и не является рессурсоёмким, но он может отнимать время у процессора, особенно на безопасных соединениях. Критичной данная ситуация является в том случае, когда соединение не было совершено в течении 10 секунд. В таком случае, браузер попросту его закроет и ресурсы на предварительное подключение будут потрачены впустую.
Старайтесь использовать <link rel=»preload»> везде, где можете, так как это более полная настройка производительности. При этом, для ряда ситуаций имейте в своём инструментальном запасе <link rel=»preconnect»>. Он вам понадобится в целом ряде случаев, среди которых:
● «Знаю откуда взять, но не знаю что». Именно так можно охарактеризовать один из вариантов использования линка. Это происходит, когда сервис знает, что будете извлекать ресурс из заданного CDN, но точный путь к нему не указан. Либо же имеется несколько ресурсов, в зависимости от медиазапросов или проверок функций во время выполнения в браузере пользователя. Если данный ресурс является важным, то предварительное подключение к серверу позволит сэкономить время пользователя. При этом, браузер не начнет извлекать файл до того, как он ему понадобится, но может обрабатывать аспекты соединения заранее, избавляя пользователя от ожидания нескольких циклических переходов.
● Потоковое мультимедиа. Это второй вариант, когда можно сэкономить время на этапе подключения, но не обязательно сразу начинать извлекать контент. Он применим в том случае, если сайт предполагает использование потокового мультимедиа с другого источника. В зависимости от того, как страница обрабатывает потоковый контент, можно подождать, пока скрипты загрузятся и будут готовы к обработке потока. Preconnect помогает сократить время ожидания, осуществляя только один трафик туда-обратно.
Что такое DNS-prefetch и зачем он нужен
<link rel=»prefetch»> имеет существенное отличие от <link rel=»preload»> и тем более <link rel=»preconnect»>. Заключается оно в том, что данный линк не заставляет максимально быстро загрузить критические данные ресурса. Он пытается ускорить загрузку некритической информации, как только для этого появляются ресурсы.
Говоря простым языком, он информирует браузеру, что в результате дальнейшего взаимодействия, пользователю может потребоваться следующая информация. Это основано на ожидаемых действиях. Данные ресурсы являются в Google Chrome низкоприоритетными и загружаются только после того, когда текущая страница полностью готова к взаимодействию.
Значит это следующее — prefetch отлично подходит для предсказания следующих шагов пользователя и позволяет подготовиться к ним. Таковыми могут быть, к примеру, получение предыдущей страницы сведений о продукте в списке результатов, либо получение следующей страницы в разбивке по страницам.
<link rel=»prefetch»> также прописывается в href документа и выглядит следующим образом:
<link rel=»prefetch» href=»page-2.html»>
Стоит учитывать, что предварительная выборка не предоставляет доступ полностью ко всей информации. Браузер получает только HTML, который может потребоваться ему в дальнейшем и работает только с ним. А вот данные с него не загрузятся до того момента, пока пользователь не перейдёт к ним непосредственно.
