К постам Опубликовано: 2016-09-03

Ускорить сайт используя тег <LINK>

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

Refresher_Orb_hero_thumbnail Refresher для HTTP запросов

Пришло время, освежить нашу память о том, как типичный HTTP-запрос операции с загружаемым-файлом происходит. Скажем, кто-то по имени Джо хочет посетить веб-сайт. Вот что происходит дальше:
  1. Джо набирает по-человечески отзываемый адрес веб-сайта в адресной строке и нажимает "Enter".
  2. После того, как он получил этот адрес, браузер запрашивает DNS-сервер (комплименты ISP) для IP-адреса по адресу, указанному у Джо.
  3. Сервер DNS принуждает.
  4. Теперь, когда браузер знает IP-адрес, он посылает сообщение (в TCP диалекте) на сервер веб-сайта, с просьбой подключения.
  5. Если сервер жив и здоров, он посылает ответ с подтверждением запроса браузера, а браузер отвечает и подтверждает сообщение сервера. (Это версия TCP рукопожатия между клиентом и сервером.)
  6. Когда рукопожатия закончены, соединение устанавливается между ними.
  7. Теперь браузер меняет свой стиль диалект для HTTP и запрашивает сервер для веб-сайта.
  8. Сервер, зная домашнюю страницу веб-сайта возвращает только то, что получает от браузера и показывает Джо, который ждет очень терпеливо возле пк.
Типичный запрос HTTP проходит сквозь все что касается документа. По-этому если эти процессы могут быть запущены когда это возможно, мы можем уменьшить время ожидания, для доставки ресурсов которые нам необходимы.

Взаимосвязи ссылок HTML

W3C определил для 4 HTML ссылочные отношения (rel = relationship) которые называются dns-prefetch, preconnect, prefetch, и prerender. Вместе они называются ( W3C) "Подсказки Ресурсов". Теперь, мы можем видеть что они могут делать и где они могут быть использованы.

1. DNS Prefetch

DNS prefetch, разрешение доменных имен (взятие IP адреса из DNS сервера) выполняется раньше времени.
"Запросы DNS очень малы с точки зрения пропускной способности, но задержка может быть довольно высокой, особенно в сетях мобильной связи. По спекулятивно предварительной выборке результатов DNS, задержка может быть значительно уменьшена в определенное время, например, когда пользователь нажимает на ссылку. В некоторых случаях задержка может быть уменьшена в секунду. - Mozilla Developer Network "
Скажем, есть ссылка на страницу веб-сайта с большим количеством справочных ссылок на его дочернем сайте. Когда пользователь посещает страницу для справки, существует высокая вероятность того, что пользователь будет перемещен к дочернему сайту. Таким образом, ранний поиск DNS для дочернего сайта может уменьшить время, необходимое, чтобы открыть сайт (тем самым улучшая опыт пользователей). Это сокращение времени ожидания с помощью DNS prefetch может быть сделано путем добавления этого кода на соответствующей странице. [code]<link rel="dns-prefetch" href="//дочернийсайт.org">[/code] Когда браузер обрабатывает этот код в справочной странице, он будет добавлять DNS поиск дочернего сайта и его очереди задач, и когда она будет свободна от других приоритетных задач в очереди, он начнет разрешение DNS из дочернего сайта. Таким образом, когда пользователь наконец-то нажимает на одну из ссылок, которые перенаправляют их на дочерний сайт, разрешение DNS этого сайта, возможно, уже завершены, и браузер может сразу же начать установление соединения TCP клиент-сервер с сервером доч. сайта, что делает загрузку страницы быстрее. Эта возможность доступна всем современным браузерам кроме Safari.

2. Preconnect

Preconnect является шагом дальше чем DNS prefetch, он устанавливает соединение с сервером, к которому может быть запрос, отправленный позже в будущем.
"Preconnect является важным инструментом в вашей панели инструментов оптимизации ... это может устранить многие дорогостоящие из вашего туда и обратно пути запроса - в некоторых случаях сокращение запроса задержки сотни и даже тысячи миллисекунд
W3C перечисляет идеальный случай использования для preconnect: перенаправления. Разработчики используют редирект по целому ряду причин. В этом случае следующий запрос браузера (перенаправлен сайт) 100% предсказуемы, и могут быть preconnected для того, чтобы сократить время ожидания навигации. Представьте себе, что есть источник страницы сайта, который перенаправляет на "xyzsite", следующая HTML ссылка сделает пре-подключение браузера с сервером xyzsite, когда он только попадает в этот источник страницы. [code]<link rel="preconnect" href="//xyzsite.com">[/code] По состоянию на март 2016 года, это доступно в Chrome, Opera и Firefox.

3. Prefetch

С предзагрузкой, для ресурса, браузер начинает реализацию разрешения DNS доменного имени ресурса, а затем выполняет соединение TCP с сервером ресурса, делает запрос HTTP, и, наконец, извлекает и сохраняет prefetch ресурс в кэше браузера. Если вы уверены в том, какие ресурсы, будут необходимы позже, это ресурс заранее должен быть предзагружен; в этом и заключается загвоздка. Предзагрузка принимает догадки, и если вы угадаете неправильно, вы можете реально замедлить вместо того, чтобы ускорить ваш сайт.
"Этот метод имеет потенциал, чтобы ускорить множество интерактивных сайтов, но не будет работать везде. Для некоторых сайтов, это просто слишком сложно догадаться, что пользователь может делать дальше. Важно также, быть осторожным, чтобы не предзагрузить файлы слишком рано, или вы можете замедлить страницу которую пользователь уже смотрит. - Google Developers "
Для интернет-книг, галерей или портфолио, если пользователь, скорее всего перейдет к следующей странице, предварительная выборка ресурса, такая как изображения, может ускорить процесс значительно. Вот код, чтобы сделать это. [code]<link rel="prefetch" href="//сайтец.com/следизображение.jpg">[/code] Предзагрузка поддерживается в Chrome, Firefox и Opera.

4. Prerender

Только для HTML-страниц может быть сделано предварительная визуализация. HTML prepender страница рендерится в автономном режиме, и показана,тогда когда это действительно необходимо пользователю. Prepender стоит больше вычислительной работы и ресурсов памяти; плюс, для того, чтобы отобразить страницу, браузер может потребоваться дополнительные ресурсы (например, изображения, добавленные на страницу), которая приведет к большему количеству последующих запросов от браузера. Таким образом, PreRender следует использовать с осторожностью, и не злоупотреблять. Добавление следующего кода предварительно визуализирует страницу "О программе" заранее. [code]<link rel="prerender" href="//example.com/about.html">[/code]
"The PreRender может быть использована приложением для указания следующего вероятного HTML-навигации цели: агент пользователя будет получать и обрабатывать указанный ресурс в качестве ответа HTML. Для извлечения других типов содержимого с соответствующими заголовками запроса, или если HTML предварительной обработки не требуется, приложение может использовать prefetch подсказку. - W3C " Статья о факторах влияния - Скорость загрузки страницы