link rel preconnect что это
Ускоряем загрузку ресурсов для сайта: preconnect, prefetch, prerender, preloading…
Сегодня мы рассмотрим «HTML5 Link Prefetch», а именно dns-prefetch, prefetch, preconnect, subresource, prerender и еще неработающий preload. HTML5 Link Prefetch уменьшит время загрузки для ресурсов, которые нам понадобятся позже.
Dns-prefetch
Пример для Amazon CDN:
Preconnect
Похоже на dns-prefetch, только круче. Помимо DNS устанавливает TCP, TLS связь. Помогает предгрузить соединение для веб сокетов. Поддержка браузерами и пример:
Prefetch
Указываем браузеру что этот ресурс потребуется нам и браузер загрузит его с низким приоритетом и положит в кэш.
Браузер может не загрузить большие файлы при медленном соединении, а Firefox загружает ресурсы только в режиме простоя. Поддержка браузерами и пример:
Subresource
То-же что и prefetch, только с высоким приоритетом. Поэтому я бы рекомендовал добавлять этот атрибут для критических стилей. Поддержка браузерами и пример:
Prerender
Этот параметр заранее загружает ресурс или страницу и всё её содержимое в фоне. Это как открытие страницы в фоновой вкладке. Браузер загрузит все ресурсы, построит DOM, применит CSS и JS. А когда пользователь перейдет по ссылке, скрытая страница станет заместо текущей и загрузится моментально.
В Google поиске давно действует такая штука под названием Instant Pages, Microsoft недавно объявили что они будут использовать prerender в Bing на IE11. Поддержка браузерами и пример:
Preloading
Эта штука еще не работает, но её внесли в спецификацию. Работает так-же как и prefetch, но браузер всегда загрузит ресурс. Аналог прелоадеров для картинок, только нативный. Пока он не поддерживается, используйте prefetch. Пример:
Добавление через JavaScript
Не обязательно указывать эти теги в HTML, генерируйте по мере необходимости для нужных ресурсов:
Дополнительная информация
На этом сайте я использую prefetch для подготовке к загрузке файла, который подсвечивает код, если такой блок находится на странице. Dns-prefetch для ускорения загрузки яндекс метрики. И скрипт, для ускорения переходов между страницами:
Если браузер не поддерживает HTML5 Link Prefetch, то проигнорирует эти атрибуты, поэтому их можно безопасно использовать.
Cсылки
Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.
Оптимизация верстки под retina дисплеи
Подготавливаем верску сайта под ретина дисплеи, оптимизируем верстку и изображения.
Безопасное использование CDN для jQuery, Angular, Bootstrap и других библиотек
Безопасно загружаем JavaScript библиотеки из публичных CDN с fallback-ом на локальную библиотеку. Jquery, Angular JS, Bootstrap и другие.
Код. Плейсхолдер для [contenteditable]
Placeholder полифил для contenteditable элемента
Как называть переменные
Мой взгляд на соглашения наименования переменных, функций, методов и классов
Использование rel=»preconnect» для повышения производительности
Дата публикации: 2019-09-12
Эта диаграмма прекрасно иллюстрирует процесс:
Несколько лет назад Робин проделал отличную работу, чтобы собрать информацию обо всех подобных вещах. Похоже, лучшая практика сейчас — использовать эти два:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Для всех доменов, которые не являются основным доменом, с которого вы загружаете документ. Беглый взгляд на ресурсы CSS-Tricks прямо сейчас дает:
Так что же может изменить preconnect?
Я использовал HTTP-архив, чтобы найти пару сайтов, которые применяют Cloudinary для своих изображений, и протестировал их без изменений, а затем с введенным сценарием предварительного подключения. Каждый тест состоял из девяти запусков с использованием Chrome, эмулирующего мобильное устройство и профиль кабельной сети.
Для первого сайта заметно очевидное улучшение: основное фоновое изображение загружается на полсекунды быстрее (вверху), чем на сайте без изменений (внизу).
Этот материал заставляет меня думать о Instant.page (который только что вышел в версии 2 ), он представляет собой небольшой причудливый скрипт, который предварительно загружает вещи, основанные на взаимодействиях. Теперь это расширение браузера (FasterChrome), которое я пробовал. Не могу сказать, что замечаю огромную разницу, но я почти всегда работаю на быстрых интернет-соединениях.
Автор: Chris Coyier
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Preload, prefetch и другие теги
Есть много способов повышения веб-производительности. Один из них — предзагрузка контента, который понадобится позже. Префетчинг CSS, предварительный рендеринг полной страницы или резолвинг доменного имени. Делаем всё заранее, а потом мгновенно отображаем результат! Звучит круто.
Вкратце расскажем, что они делают и когда их использовать.
preload
Браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.
Синтаксис
href указывает на ресурс, который вы хотите скачать.
as может быть чем угодно, что можно скачать в браузере:
Когда использовать
Используйте предзагрузку, когда ресурс понадобится в самое ближайшее время. Например:
Не злоупотребляйте предзагрузкой. Если загружать всё подряд, сайт не ускорится волшебным образом, скорее наоборот, это помешает браузеру грамотно планировать работу.
Подробности
prefetch
Здесь тоже браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.
Синтаксис
href указывает на ресурс, который вы хотите скачать.
as может быть чем угодно, что можно скачать в браузере:
Когда использовать
Для загрузки ресурсов с других страниц, если нужен ресурс с другой страницы, и вы хотите предварительно загрузить его, чтобы потом ускорить рендеринг этой страницы. Например:
Подробности
Необязательный тег. Браузер не обязан следовать этой инструкции, он может проигнорировать её, например, на медленном соединении.
preconnect
Браузер должен установить соединение, если извлекает какие-то ресурсы с нового стороннего домена. Например, если загружает шрифты Google Fonts, React из CDN или запрашивает ответ JSON с сервера API.
Установка нового соединения обычно занимает несколько сотен миллисекунд. Она производится один раз, но всё равно отнимает время. Если вы заранее установили соединение, то сэкономите время и быстрее загрузите ресурсы с этого домена.
Синтаксис
href указывает на доменное имя, для которого нужно определить IP-адрес. Можно указывать с префиксом ( https://domain.com ) или без него ( //domain.com ).
Когда использовать
Используйте для доменов, которые скоро понадобятся для загрузки оттуда важного стиля, скрипта или изображения, но вы пока не знаете URL ресурса. Например:
Не злоупотребляйте. Установка и поддержание соединения — дорогостоящая операция как для клиента, так и для сервера. Используйте этот тег максимум для 4-6 доменов.
Подробности
Необязательный тег. Браузер не обязан следовать этой инструкции и может проигнорировать её, например, если уже установлено много соединений или в каком-то другом случае.
Что включает в себя процесс подключения. Для подключения к каждому сайту браузер должен выполнить следующие действия:
dns-prefetch
Браузер должен определить IP-адрес домена, если будет извлекать какие-то ресурсы с нового стороннего домена. Например, загружать шрифты Google Fonts, React из CDN или запрашивать ответ JSON с сервера API.
Для каждого нового домена разрешение записи DNS обычно занимает около 20−120 мс. Это влияет только на загрузку первого ресурса с данного домена, но всё равно представляет задержку. Если осуществить разрешение DNS заранее, то мы сэкономим время и загрузим ресурс быстрее.
Синтаксис
href указывает на доменное имя, для которого нужно установить IP-адрес. Можно указывать с префиксом ( https://domain.com ) или без него ( //domain.com ).
Когда использовать
Используйте для доменов, которые скоро понадобятся для загрузки оттуда ресурсов, о которых браузер не знает заранее. Например:
Подробности
Необязательный тег. Браузер не обязан следовать этой инструкции, поэтому может не выполнять резолвинг DNS, например, если на странице много таких тегов или в каком-то другом случае.
Чтобы определить IP-адрес, браузер должен выполнить запрос к DNS-серверу. Он занимает 20−120 мс при подключении к новому стороннему домену.
DNS кэшируется, хотя и не очень надёжно. Некоторые ОС и браузеры кэшируют DNS-запросы: это сэкономит время при повторных запросах, но на кэширование нельзя полагаться. В Linux оно обычно вообще не работает. У Chrome есть кэш DNS, но он живёт только минуту. Windows кэширует DNS-ответы в течение пяти дней.
prerender
Синтаксис
href указывает на URL, для который вы хотите запустить рендеринг в фоновом режиме.
Когда использовать
Подробности
Необязательный тег. Браузер не обязан следовать этой инструкции и может проигнорировать её, например, на медленном соединении или при недостаточном объёме свободной памяти.
Ради экономии памяти Chrome не выполняет полный рендеринг, а только предзагрузку NoState. Это означает, что Chrome загружает страницу и все её ресурсы, но не делает рендеринг и не выполняет JavaScript.
Firefox и Safari вообще не поддерживают этот тег. Это не нарушает спецификацию, так как браузеры не обязаны выполнять данную инструкцию; но всё равно печально. Баг реализации в Firefox был открыт в течение семи лет. Есть сообщения, что Safari тоже не поддерживает этот тег.
Резюме
Предсказывающие страницы: Использование dns-prefetch, preconnect, prefetch, preload и prerender для повышения производительности страницы
Разработчики постоянно пытаются повысить производительность глобальной сети, начиная с браузеров, заблаговременно загружающих страницы еще до того, как будет введен поисковой критерий, до приоритизации контента на видимой части страницы. HTML уже сделал несколько шагов в сторону упрощения этого процесса с помощью rel=«next» и rel=«previous» для создания подсказок для браузера, который сможет с их помощью заранее скрыто загружать страницы еще до совершения какого-либо действия со стороны пользователя.
Не так давно W3C добавили несколько новых функций в link как части спецификации Resource Hints, которые обеспечивают более разумную предварительную загрузку контента сайта, потенциально повышая скорость загрузки страницы на сайтах, на которых они используются.
Кто стучится в дверь ко мне
Поиск DNS – процесс поиска доменного имени в сети и его перевода в IP-адрес – может занимать от десяток до сотен миллисекунд. Если пользователь уже на вашем сайте, его браузер уже знает его положение… но если вы загружаете ресурсы с других сайтов на свой страницу, браузеру нужно время на обработку информации DNS по каждому из них, так как он находит их в HTML. Вы можете предвосхитить этот процесс, поместив dns-prefetch для внешних сайтов в своей страницы.
Пример использования dns-prefetch
Одним из общепризнанных внешних ресурсов является скрипт Google Analytics, который используется для отслеживания поведения посетителей на вашем сайте. Вызов скрипта обычно размещают в самом конце страницы:
Мы видим, что скрипт обращается к google-analytics.com. Вместо того, чтобы пытаться получить это доменное имя в момент обнаружения скрипта, мы можем дать браузеру подсказку, что будет использоваться URL, и что он должен проверить, знает ли он, как связаться с этим сайтом, пока остальная часть страницы будет отрисовываться. Добавьте в вашего документа следующее:
Обратите внимание, что значение href не содержит протокола, т.е. оно не начинается с http: или https:. Это отличный вариант для нашей цели. Это значение эффективно в данном случае, так как оно обеспечивает максимальную гибкость для получения доступа к сервису 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.
Подсказки по ресурсам как инвестиция
Крайне важно понимать, что все это просто подсказки для браузера, а не точные указания. Браузер может последовать или не последовать таким подсказкам, основываясь на пропускной способности сети, использовании памяти, поддержке поставщика и прочих факторах. Как таковые, их следует рассматривать как инвестиции, а не как гарантию повышения эффективности, и, конечно же, не как «панацею» от всех проблем сайта или низкой скорости загрузки страницы.
Учитывая все это, существует несколько факторов, которые могут улучшить поведение страницы в процессе предзагрузки:
Заключение
Будучи частью постоянного стратегического акцента на производительность сайта, подсказки по ресурсам могут оказаться достаточно эффективной техникой для повышения скорости загрузки страницы; для достижения оптимального результата их можно комбинировать со всесторонней профессиональной контент-стратегией, которая сообщит вам, какая информация и в каком месте сайта должна находиться.
Мета теги: dns-prefetch, preconnect, prefetch, prerender, preload
Коротко о метатегах для браузера preconnect, dns-prefetch, prefetch, preload, prerender.
Докуметация на w3.org:
dns-prefetch
Просит браузер в фоновом режиме получить информацию об указанном домене (узнать его ID), чтобы затем использовать её при реальных запросах к указанному домену.
Для каждого нового домена резолвинг DNS обычно занимает около 10−120 мс. Это влияет только на загрузку первого ресурса с данного домена, тем не менее если осуществить днс-префетч заранее, то мы немного сэкономим время.
Необязательная инструкция — браузер может её игнорировать если она мешает выполнению других более важных операций.
Использование
Когда использовать
Когда указанный домен будет использован дальше на странице, но пока браузер об этом не знает.
Например, в HEAD документа мы можем попросить узнать инфу о домене, а затем в подвале у нас подключается скрипт с этого домена. Браузер уже будет знать информацию о домене и за счет этого получит данные скрипта немного быстрее.
Поддержка браузерами
preconnect
Преконнект просит браузер в фоновом режиме создать соединение (рукопожатие, коннект) с указанным доменом.
Процесс подключения включает в себя:
Все эти операции примерно занимают 300 мс.
Необязательная инструкция — браузер может проигнорировать её, например, если уже установлено много соединений или в каком-то другом случае.
Не рекомендуется использовать более чем с 4−6 доменами, так как установка и поддержание соединения — дорогостоящая операция.
Использование
Когда использовать
Используйте для доменов, которые скоро понадобятся для загрузки оттуда важного стиля, скрипта или изображения, но вы пока не знаете URL ресурса. Например:
Ваше приложение размещается на my-app.com и делает AJAX-запросы к api.my-app.com: вы не знаете заранее конкретные запросы, потому что они делатся динамически из JS. Здесь вполне уместно использование тега для предварительного подключения к домену.
Поддержка браузерами
prefetch
Префетч просит браузер в фоновом режиме загрузить и положить ресурс в кэш.
В отличии от preload. загрузка происходит с низким приоритетом, поэтому не мешает более важным ресурсам.
Необязательная инструкция — браузер может проигнорировать её, например, при медленном интернете. Выполняется с низким приоритетом, т.е. после загрузки всего важного. См. таблицу приоритетов.
Браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и предоставляется по требованию.
Использование
Атрибут использоваться для передачи типа ресурса, чтобы браузер мог оптимизировать обработку перфетч, например, установить соответствующие заголовки запроса, приоритет обработки и так далее. as может быть:
Когда использовать
Для загрузки ресурсов с других страниц. Т.е. Когда ресурс понадобится на другой странице, а вы хотите заранее добавить его в кэш. Например:
У вас интернет-магазин, и 40% пользователей уходят с главной страницы на страницу товара. Используйте prefetch, загружая файлы CSS и JS для рендеринга страниц с продуктом.
Поддержка браузерами
preload
Прелоад говорит браузеру загрузить и положить ресурс в preload кэш.
Это обязательная инструкция — браузер обязан её выполнить, в отличии от prefetch или других подобных инструкций (они могут быть проигнорированы, например, при плохом интернете).
Браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто предоставляется из preload кэша по запросу.
Не злоупотребляйте предзагрузкой. Если загружать всё подряд, сайт не ускорится волшебным образом, скорее наоборот, это помешает браузеру грамотно планировать работу.
Использование
href(обязательный) URL. Может быть относительный или указан без протокола. as
Важно указать атрибут as — это помогает браузеру правильно расставлять приоритеты и планировать загрузку. as может быть:
Когда использовать
Когда ресурс обязательно будет использован и его нужно загружать сразу (чтобы не блокировать парсинг HTML).
Поддержка браузерами
prerender
Просит браузер загрузить URL-адрес и обработать его в фоновом режиме. Когда пользователь нажимает на ссылку, страница должна отобразиться моментально.
Необязательная инструкция — браузер может проигнорировать её, например, на медленном соединении или при недостаточном объёме свободной памяти.
Несмотря на исключительную эффективность этого тега (или из-за неё), в 2021 году prerender плохо поддерживается основными браузерах.
Не злоупотребляйте. Предварительный рендеринг чрезвычайно дорого обходится с точки зрения трафика и памяти. Не используйте prerender более чем для одной странице.
Использование
Когда использовать
Когда вы действительно уверены, что пользователь перейдёт на определённую страницу. Если у вас «туннель», по которому 70% посетителей страницы A переходят на страницу Б, то prerender на странице А поможет очень быстро отобразить страницу Б.