Dns prefetch


Preconnect and prefetch-dns are both ways which you can ask your browser to do a DNS lookup and connection before you need any resources from that domain, but it helps shave time off the critical rendering path. This article looks at what difference the order of the tag makes. The short answer is none.

The concept

The very first thing that occurs when you request a page, let’s say this page at https://responsivedesign.is/articles/prefetch-preconnect-dns-priority/, is that your browser needs to work out where responsivedesign.is is located  — known as a DNS handshake. If you look at a Waterfall Chart you’ll notice the very first part of any request is aqua green and represents the DNS lookup.

Dns prefetch

The concept around preconnect and prefetch-dns is that the DNS lookup happens as soon as possible, long before there is any reference to a resource on that particular domain. By doing this you can shave off time when you do get around to requesting the resource (preconnect does a little more than that, but more on that later).

How much time? Well in the example Waterfall chart above the DNS lookup times are

  • 150 ms —//cdnjs.cloudflare.com
  • 185 ms —//production-assets.codepen.io
  • 167 ms — //s3-us-west-2.amazonaws.com

A hundred and a bit milliseconds each, but when you combine them and you get to 502ms which half a second of time that you are able to move outside of the critical loading path and thus gain half a second performance improvements.

Difference between dns-prefetch & preconnect

The difference between dns-prefetch and preconnect is dns-prefetch will only do the DNS lookup, while preconnect will do the DNS lookup, TLS negotiation, and the TCP handshake. This means that it avoids an additional 2 RTT once the resource is ready to be downloaded.

When it came to my tests on Web Page Test though it only seemed to result in the DNS lookup and I haven’t been able to account for that. It could be that support for dns-prefetch is much larger than support for preconnect. I assume that the Chrome version I was using on WPT didn’t support the feature fully but still provided the DNS lookup.

The question — does order priority matter?

The whole reason why this article came into existence was because I was reviewing the Victoria and Albert Museum Website for the examples section on this site. During the review I noticed that the site was using the below snippet to start the DNS lookup early and save time on future requests.

<link rel="dns-prefetch" href="//vanda-production-assets.s3.amazonaws.com" />  

This was done within the <head> tags but the site also used a <style> tag in the head to declare the page background-image in a series of media queries. These background-image declarations were actually placed before the dns-prefetch tag. This caused me to question which would fire first?

  1. Would the browser see an image URL and immediately begin to download the image asset, thus requiring the DNS lookup before reaching the dns-prefetch tag
  2. Would the browser parse everything in the HTML document before invoking any requests

Testing the order priority

To test this I created a series of Code Pens check when the DNS lookup would occur across five different scenarios. Each of the scenarios were then tested through Web Page Test using a chrome browser on a Fast 3G connection. I chose that connection because I assumed any differences in the request timings would show up best over a slower mobile connection (although I didn’t go as far as 2G)

The code pens all had a style tag in the header setting a background-image on the body, and the difference between them was the type and location of the ‘pre’ DNS lookup request, see these below

  1. dns-prefetch after styles
  2. dns-prefetch before styles
  3. preconnect after styles
  4. preconnect before styles
  5. No preconnect prefetch

No preconnect prefetch

With no reference to any performance enhancing elements you can see how a resource would usually be requested, notice the DNS lookup adding to the critical path.

  <style>  body {background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/Ayers-Rock-Australia.jpg')}  </style>  
Critical load path when no prefetch/preconnect of the DNS is included in the <head>
Critical load path when no prefetch/preconnect of the DNS is included in the <head>

dns-prefetch after styles

  <style>  body {background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/Ayers-Rock-Australia.jpg')}  </style>  <link href="https://s3-us-west-2.amazonaws.com" rel="dns-prefetch">    

As you can see from the image of the waterfall chart below that even though the background-image is declared before the link tag for the dns-prefetch the DNS lookup happens immediately after the HTML document has been parsed, and in parallel with the other DNS lookup for the first resource that Code Pen includes (normalise.css from //cdnjs.cloudflare.com.

Critical load path when preconnect is included in the <head> after the <style> tag
Critical load path when preconnect is included in the <head> after the <style> tag

dns-prefetch before styles

As you would expect, if the handshake happens when we want it to when declared after the image is works the same way when it’s declared before.

  <link href="https://s3-us-west-2.amazonaws.com" rel="dns-prefetch">  <style>  body {background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/Ayers-Rock-Australia.jpg')}  </style>  
Critical load path when dns-prefetch is included in the <head> before the <style> tag
Critical load path when dns-prefetch is included in the <head> before the <style> tag

preconnect after styles

In this test I wanted to see the overall difference between the two approaches and see how much time could be saved by performing all three initial connections up front. Unfortunately there was no difference which I need to look at further.


  <style>  body {background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/Ayers-Rock-Australia.jpg')}  </style>  <link href="https://s3-us-west-2.amazonaws.com" rel="preconnect" crossorigin>  
Critical load path when dns-prefetch is included in the <head> after the <style> tag
Critical load path when dns-prefetch is included in the <head> after the <style> tag

preconnect before styles

This test performed as expected with regards to the DNS lookup happening first, but again it didn’t complete the TCP or TLS handshakes.

  <link href="https://s3-us-west-2.amazonaws.com" rel="preconnect" crossorigin>  <style>  body {background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/Ayers-Rock-Australia.jpg')}  </style>    

Critical load path when preconnect is included in the <head> before the <style> tag
Critical load path when preconnect is included in the <head> before the <style> tag

Conclusion

As you see it doesn’t matter where the declaration of the link tag occurs in the <head>, as long as it is there it will perform the DNS lookup ahead of time and therefore save your users time when browsing your site.

This is certainly something that you should be including for any domains that are outside your own site, in particular CDN’s for your images, font locations (like Google Fonts) or any external JS you might have on the site.

responsivedesign.is

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


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

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

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

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

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

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)  })(window,document,'script','http://google-analytics.com/analytics.js','ga');  ga('create', 'UA-9896842-2', 'auto');  ga('send', 'pageview'); </script>   

Мы видим, что скрипт обращается к google-analytics.com. Вместо того, чтобы пытаться получить это доменное имя в момент обнаружения скрипта, мы можем дать браузеру подсказку, что будет использоваться URL, и что он должен проверить, знает ли он, как связаться с этим сайтом, пока остальная часть страницы будет отрисовываться. Добавьте в вашего документа следующее:

<link rel="dns-prefetch" href="//google-analytics.com/"> 

Обратите внимание, что значение href не содержит протокола, т.е. оно не начинается с http: или https:. Это отличный вариант для нашей цели. Это значение эффективно в данном случае, так как оно обеспечивает максимальную гибкость для получения доступа к сервису Google Analytics.

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

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

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

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

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

<link rel="preconnect" href="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">   

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

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

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

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

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

<link rel="prefetch" href="/190/Using-link-rel-to-preload-web-content-and-aid-accessibility"> 

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


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

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

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

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

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

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

<link rel="preload" href="libertad.woff2" as="font"> 

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

Отрисовка

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

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

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

<link rel="prerender" href="/samples/polina.html"> 

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

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

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

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

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

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

Заключение

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

habr.com

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

<link rel="dns-prefetch" href="https://cdn.varvy.com">

Приведенный выше код означает:

  • Я хочу получить доменное имя, перед загрузкой
  • Имя домена «cdn.varvy.com»

Цель

Основная цель использования 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. Могу ли я уменьшить кол-во доменов?

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

Если HTML файл лежит на домене example.com, а CSS на cdn.example.com, а картинки подгружаются с 1234bucket.cdn.com, значит вы делаете загрузку с трех разных доменов, а могли бы перенести все эти ресурсы на один.

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

Если один CSS файл грузится c «www.example.com», а другой с «example.com», нужно это исправить. Убедитесь, что оба ресурса вызываются либо с версии www либо без «www».

То же самое касается https vs http, довольно распространенная практика.

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

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

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

bcorrections.com

Синтаксис

X-DNS-Prefetch-Control: on X-DNS-Prefetch-Control: off 

Директивы

на
Включает предварительную выборку DNS. Это то, что делают браузеры, если они поддерживают эту функцию, когда этого заголовка нет
от
Отключает предварительную выборку DNS. Это полезно, если вы не контролируете ссылку на страницах или не знаете, что вы не хотите передавать информацию в эти домены.

Описание

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

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

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

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

В общем, вам не нужно ничего делать, чтобы управлять предварительной выборкой. Однако пользователь может отключить предварительную выборку. В Firefox это можно сделать, установив для параметра network.dns.disablePrefetch значение true .

Кроме того, по умолчанию предварительная выборка имен хостов встроенной ссылки не выполняется для документов, загружаемых через HTTPS . В Firefox это можно изменить, установив для параметра network.dns.disablePrefetchFromHTTPS значение false .

Примеры

Включение и выключение предварительной выборки

Вы можете либо отправить сервер заголовка X-DNS-Prefetch-Control , либо из отдельных документов, используя атрибут http-equiv в элементе <meta> , например:

<meta http-equiv="x-dns-prefetch-control" content="off"> 

Вы можете изменить этот параметр, установив content на « on ».

Принудительный поиск определенных имен хостов

Вы можете принудительно выполнять поиск определенных имен хостов без предоставления определенных привязок с использованием этого имени хоста, используя атрибут rel в элементе <link> с типом ссылки dns-prefetch :

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

В этом примере доменное имя « www.spreadfirefox.com » будет предварительно разрешено.

Аналогичным образом элемент ссылки может использоваться для разрешения имен хостов без предоставления полного URL-адреса, но только, предшествуя имени хоста двумя слэшами:

<link rel="dns-prefetch" href="//www.spreadfirefox.com"> 

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

code-examples.net

Syntax

X-DNS-Prefetch-Control: on X-DNS-Prefetch-Control: off 

Directives

on
Enables DNS prefetching. This is what browsers do, if they support the feature, when this header is not present
off
Disables DNS prefetching. This is useful if you don’t control the link on the pages, or know that you don’t want to leak information to these domains.

Description

DNS requests are very small in terms of bandwidth, but latency can be quite high, especially on mobile networks. By speculatively prefetching DNS results, latency can be reduced significantly at certain times, such as when the user clicks the link. In some cases, latency can be reduced by a second.

The implementation of this prefetching in some browsers allows domain name resolution to occur in parallel with (instead of in serial with) the fetching of actual page content. By doing this, the high-latency domain name resolution process doesn’t cause any delay while fetching content.

Page load times – especially on mobile networks – can be measurably improved in this way. If the domain names for images can be resolved in advance of the images being requested, pages that load many images can see an improvement of 5% or more in the time of loading images.

Configuring prefetching in the browser

In general, you don’t need to do anything to manage prefetching. However, the user may wish to disable prefetching. On Firefox, this can be done by setting the network.dns.disablePrefetch preference to true.

Also, by default, prefetching of embedded link hostnames is not performed on documents loaded over HTTPS. On Firefox, this can be changed by setting the network.dns.disablePrefetchFromHTTPS preference to false.

Examples

Turning on and off prefetching

You can either send the X-DNS-Prefetch-Control header server-side, or from individual documents, using the http-equiv attribute on the <meta> element, like this:

<meta http-equiv="x-dns-prefetch-control" content="off"> 

You can reverse this setting by setting content to «on«.

Forcing lookup of specific hostnames

You can force the lookup of specific hostnames without providing specific anchors using that hostname by using the rel attribute on the <link> element with a link type of dns-prefetch:

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

In this example, the domain name «www.spreadfirefox.com» will be pre-resolved.

Similarly, the link element can be used to resolve hostnames without providing a complete URL, but only, by preceding the hostname with two slashes:

<link rel="dns-prefetch" href="//www.spreadfirefox.com"> 

Forced prefetching of hostnames might be useful, for example, on the homepage of a site to force pre-resolution of domain names that are referenced frequently throughout the site even though they are not used on the home page itself. This will improve the overall performance of site even though the performance of the home page may not be affected.

developer.mozilla.org

Dns-prefetch

Перед тем, как начать загружать сожержимое сайта http://example.com, браузеру нужно установить его IP адрес. И только после этого он сможет загрузить от туда содержимое. Конечно, на это потребуется какое-то время.

Если вам нужно что-то загрузить с другого домена, укажите <link rel='dns-prefetch' href='//example.com'>. Браузер преобразует имя домена в IP адрес в фоне. Теперь, когда очередь дойдет до ресурсов, они загрузятся минуя стадию prepresolve. Поддержка браузерами и пример:

Пример для 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, то проигнорирует эти атрибуты, поэтому их можно безопасно использовать.

ymatuhin.ru

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

1) оптимизируют доставку ресурсов;
2) сокращают количество сетевых задержек;
3) доставляют контент быстрее,— в то время, пока пользователь смотрит страницу.

По поводу этих подсказок см. также статью «Предсказывающие страницы: Использование dns-prefetch, preconnect, prefetch, preload и prerender для повышения производительности страницы» на Хабрахабре.

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.

Dns prefetch

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

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

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

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

1.2. Примеры

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

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

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

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

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

Наконец, пример предварительной загрузки таблицы стилей, используя HTML разметку и 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";  appendChild(res);  </script>

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

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

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

Dns prefetch

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

2. Prefetch

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

1) ссылочный;
2) DNS;
3) prerendering.

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

Шаг 1 (Step 1). Загрузка сайта example.com (Load https://example.com). На изображении экрана надпись: ожидание загрузки example.com (Waiting for https://example.com).

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

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

Dns prefetch

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

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

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

  • HTML: <link rel=»prefetch» href=»/uploads/images/pic.png»>
  • HTTP Header: Link: </uploads/images/pic.png>; rel=prefetch

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

1. Для некоторых сайтов трудно угадать, что пользователь собирается делать.
2. Для других сайтов сохраненные в кэше данные устаревают, если пользователь быстро выбирает новые.
3. Опасно постоянно сохранять файлы в кэше — просмотр текущей страницы замедлится».

Google Developers.

Более подробно см. Prefetching resources, Google Developers

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

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

Dns prefetch

Рис. 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.

Более подробно см. X-DNS-Prefetch-Control, Mozilla Developer Network

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

<!-- Prefetch DNS for external assets -->  <link rel="dns-prefetch" href="//fonts.googleapis.com">  <link rel="dns-prefetch" href="//www.google-analytics.com">  <link rel="dns-prefetch" href="//opensource.keycdn.com">  <link rel="dns-prefetch" href="//cdn.domain.com">

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

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

Dns prefetch

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

Также можно использовать Pagespeed-фильтр insert_dns_prefetch, который помещает теги <link rel=»dns-prefetch»> в заголовок страницы автоматически для всех доменов или специализированные сервисы, такие как Айри.рф.

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

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

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

Dns prefetch

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

2.3. Prerender

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

<link rel=»prerender» href=»https://www.keycdn.com»>

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

W3C

Более подробно см. Resource Hints, W3C

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

1. Запуск тега <link rel=prerender>.
2. Заблаговременное создание невидимых страниц.
3. Загрузка пользователем другой страницы, включающей выполнение JavaScript.
4. После выбора пользователем новой страницы обмен текущей страницы на скрытую.
5. Удаление скрытых страниц через небольшой промежуток.

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

Dns prefetch

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

Эта схема взята с сайта The Chromium Projects

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

Отметим, что нельзя проверить наличие prerender с помощью Chrome DevTools. Наличие prerender на странице сайта можно посмотреть по адресу chrome://net-internals/#prerender. Кроме того, на prerender-test.appspot.com можно проверить на наличие prerender любую страницу сайта, указав ее адрес.

На рисунке 8 показан пример проверки наличия prerender с помощью chrome://net-internals/#prerender

Dns prefetch

Рис. 8. Пример проверки наличия prerender с помощью chrome://net-internals/#prerender

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

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

Dns prefetch

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

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

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

3. Preconnect

Наконец, рассмотрим preconnect. Preconnect позволяет браузеру установить соединение прежде, чем HTTP-запрос будет отправлен на сервер. Эта процедура включает поиски DNS, «переговоры» TLS и «рукопожатие» TCP. Что в свою очередь устраняет круговые задержки и экономит время пользователя.

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

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

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

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

Dns prefetch

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

Preconnect добавляется непосредственно к тегу link как атрибут HTML. А также в заголовок Link HTTP, и еще пользователем с помощью JavaScript. Вот пример возможного использования preconnect для URL CDN.

<link href=»https://cdn.domain.com» rel=»preconnect» crossorigin>

На рисунке 11 приведен пример использования preconnect со шрифтами Google. Добавление подсказки preconnect для сайта fonts.gstatic.com начинается с запроса шрифта параллельно с CSS-запросом. Что позволяет немедленно послать запрос шрифта.

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

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

Dns prefetch

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

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

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

Dns prefetch

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

www.searchengines.ru

DNS-prefetch

Эта техника уведомляет браузер, что на странице используются ресурсы с другого адреса и браузер может заранее преобразовать URL в IP-адрес. Например, нам нужен ресурс типа изображения или аудио с URL example.com. Нам надо добавить в <head> следующую запись:

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

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

В своем эпическом тексте о производительности фронтенда Гарри Робертс предлагает использовать эту технику:

Эта простая строчка дает команду поддерживающим браузерам начать поиск DNS для указанного домена до того, как это действительно понадобиться. Это означает, что процесс поиска DNS будет завершен к тому моменту, когда он потребуется, то есть браузер получает небольшую фору при загрузке ресурсов с “префетченного URL”.

Может показаться, что такой небольшой прирост производительности не имеет особого значения, но браузер Chrome делает так постоянно. Он автоматически ищет DNS, когда вы вводите URL в адресную строку (и иногда даже делает пререндеринг страницы) и сохраняет миллисекунды при каждом запросе.

preconnect

Этот метод очень похож на префетчинг DNS, но кроме разрешения DNS данный метод начинает TCP-соединение и согласование TLS при защищенном соединении.

<link rel="preconnect" href="http://css-tricks.com"> 

Подробно этот метод описан в недавней статье Ильи Григорика:

Современные браузеры стараются предвидеть, какие соединения потребуются сайту до совершения запросов. Инициируя ранние “предсоединения”, браузер может настроить необходимые сокеты заранее и удалить все затратные работы с DNS, TCP и TLS из критического пути текущего запроса. Но как бы не были продвинуты современные браузеры, они не смогут выделить подходящие цели предсоединения для всех сайтов. Хорошая новость состоит в том, что теперь мы можем подсказать браузеру, какие сокеты надо открыть перед инициацией запроса благодаря технологии предсоединения, реализованной в Firefox 39 и Chrome 46!

prefetch

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

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

В отличие от префетчинга DNS, браузер запрашивает и скачивает искомый ресурс и сохраняет его в кэше. Однако, это зависит от некоторых условий, префетчинг может быть и проигнорирован браузером. Например, если запрашивается большой файл со шрифтами при медленном интернет-соединении. А Firefox предзагружает ресурсы только находясь в ленивом режиме.

Брэм Стейн в своем посте по этому вопросу пишет, что это может дать заметное улучшение производительности при загрузке веб-шрифтов. На данный момент файлы со шрифтами перед загрузкой ждут построения DOM и CSSOM. Префетчинг позволяет обойти вызванные этим проблемы с производительностью.

Примечание: последние версии Chrome и Firefox показывают, какие из ресурсов были предзагружены на вкладке “Сеть” в инструментах разработчика. Также полезно помнить, что для префетчинга нет ограничений “same-origin”, то есть вы можете задать предзагрузку ресурсов с любого домена.

subresource

Еще одна техника префетчинга помогает идентифицировать ресурсы с максимальным приоритетом, которые должны запрашиваться в первую очередь. Например, в Chrome и Opera мы можем добавить в head следующую запись:

<link rel="subresource" href="styles.css"> 

Согласно документации Chrome эта запись работает следующим образом:

“LINK rel=subresource” предоставляет новый тип связи ссылок с отличной от LINK rel=prefetch семантикой. В то время как rel=prefetch задает приоритет для загрузки ресурсов для других страниц, rel=subresource дает раннюю загрузку ресурсов для текущей страницы.

Итак, если ресурс потребуется на текущей странице или же потребуется максимально скоро, лучше использовать subresource, а в остальных случаях prefetch.

prerender

Эта совершенно атомная опция — prerender позволяет превентивно загрузить все файлы и ресурсы для определенного документа:

<link rel="prerender" href="http://css-tricks.com"> 

Стив Судерс прекрасно описал эту технику:

Это как открытие URL в скрытой вкладке — все ресурсы скачиваются, строится DOM, раскладывается макет страницы, применяются стили и исполняются скрипты. И если пользователь переходит по указанному адресу, страница открывается мгновенно. Google Search использует этот механизм уже несколько лет (Instant Pages). Microsoft реализовал пререндеринг в Bing в IE11.

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

Судерс продолжает:

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

Наконец, Page Visibility API может использоваться для защиты от запуска скриптов до их рендеринга на странице.

Му уже обсудили все текущие разновидности префетчинга, пришло время заняться возможностями, которые будут реализованы в будущем.

Будущая возможность: preload

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

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

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

Заключение

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

prgssr.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.