Эта статья является частью серии, созданной в сотрудничестве с SiteGround . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.
В этой статье я расскажу о предварительной загрузке, что это такое и как разработчики могут использовать ее, чтобы удивить посетителей высокопроизводительными веб-сайтами.
Что такое предварительная загрузка?
Хотя оптимизация веб-сайта для начальной загрузки страницы — это замечательно, для пользователей с высокой степенью интерактивности, ожидаемых сегодня пользователями, этого может быть недостаточно.
Что если браузеры знали, по какой ссылке пользователи собирались перейти, или какую страницу они собирались посетить в следующий раз, чтобы контент мог автоматически появляться на их экране со скоростью света?
Ну, браузеры могут сделать это сейчас. Фактически, некоторые крупные браузеры достаточно умны, чтобы делать такие предположения на основе шаблонов просмотра посетителей, разметки и структуры документов, устройства пользователя, возможностей подключения и т. Д. Поэтому браузеры уже пытаются предвидеть ресурсы, необходимые для создания посетителей страницы. могут получить доступ к этим ресурсам, подготовить эти ресурсы и отобразить страницу с высокой скоростью, когда пользователи об этом попросят. Однако разработчики могут использовать свои знания веб-сайта или веб-приложения, чтобы помочь браузерам более точно выделить эти важные ресурсы.
Это и есть предварительная выборка, подсказка для браузеров, чтобы предвидеть каждое желание пользователей просматривать и воплощать их в жизнь.
Предварительную выборку можно найти в спецификации Resource Hints под руководством Ильи Григорика.
Далее я собираюсь обсудить:
- DNS-упреждающая выборка
- Предварительная выборка ссылки / ресурса
- Prerendering (Предварительная выборка страницы)
DNS-Предзагрузка
Интернет представляет собой сеть машиночитаемых IP-адресов (например, 87.87.87.87), на которые ссылаются читаемые человеком имена хостов (например, yoursite.com). DNS — это протокол, который преобразует имена хостов в IP-адреса.
Каждый раз, когда браузер делает HTTP-запрос для ресурса в другом домене, он может потратить несколько миллисекунд, чтобы преобразовать домен в связанный IP-адрес.
Если на веб-сайте есть виджет Twitter или Facebook, Google Analytics и, возможно, один или два пользовательских веб-шрифта, то на нем должны быть ссылки на другие домены. Это делает поиск DNS неизбежным.
Предварительная выборка DNS помогает сократить время ожидания посетителей, поскольку браузер выполняет поиск DNS перед отправкой запроса на ресурсы, расположенные в других доменах.
Итак, допустим, разработчики знают, что веб-сайт отправит запрос на somewidget.example.com. Они могут пропустить подсказку для браузера, предложив ему продолжить и предварительно выбрать DNS этого имени хоста, добавив атрибут reldns-prefetch
<link rel="dns-prefetch" href="//somewidget.example.com">
Теперь, когда происходит запрос к somewidget.example.com, браузер уже выполнил поиск DNS заранее, и пользователи получают результаты немного раньше.
Браузерная поддержка DNS-prefetch в настоящее время присутствует во всех основных настольных браузерах. Когда поддержка DNS-предварительной выборки отсутствует, браузеры просто получают ресурсы обычным способом. Ничего страшного.
Что если браузер никогда не запрашивает предварительно выбранный DNS-ресурс? К счастью, предварительная выборка DNS не является дорогостоящей операцией, поскольку она не отправляет более нескольких сотен байтов по сети. Еще раз, никакого вреда не сделано.
Предварительная загрузка ссылок
Согласно спецификации , предварительная загрузка ссылок…
используется для идентификации ресурса, который может потребоваться при следующей навигации, и что пользовательскому агенту СЛЕДУЕТ выбирать, чтобы пользовательский агент мог доставить более быстрый ответ, как только ресурс будет запрошен в будущем.
Другими словами, если у разработчиков есть основания полагать, что пользователи, вероятно, посещают определенную веб-страницу и знают, что браузеру нужны некоторые критические ресурсы для ее доставки, они могут использовать директиву prefetch Это указывает браузеру на ресурсы, которые он должен получить, прежде чем пользователи перейдут на эту страницу.
Помните, что предварительная выборка работает только с кэшируемыми ресурсами, такими как JavaScript, изображения и т. Д. Вот как выглядит код:
<link rel="prefetch" href="//example.com/future-image.jpg">
Теперь браузер знает, что изображение future-image.jpg В этот момент, поскольку браузер уже выполнил трудоемкую работу по загрузке ресурса в фоновом режиме, преимущество этого метода заключается в супер-быстром рендеринге, как только пользователи нажимают для доступа к соответствующей странице, требующей future-image.jpg
Предварительная выборка ссылок хороша для создания восприятия быстро загружаемого веб-сайта, но это намного более дорогая операция, чем предварительная выборка DNS. Если пользователи никогда не получат доступ к странице, для которой требуется предварительно выбранный ресурс, браузер загрузит ненужные данные и забьет свой кэш.
На момент написания статьи предварительная выборка ссылок поддерживалась последними версиями Chrome, Firefox, IE / Edge и Opera . Не поддерживающие браузеры будут просто игнорировать подсказку.
Предварительная выборка страницы
Реализация предварительной выборки или предварительной визуализации страницы — это просто вопрос добавления директивы prerenderrel
<link rel="prerender" href="//example.com/future-page.html">
Предварительный рендеринг проходит весь путь и буквально создает невидимую версию всей страницы, которую пользователи, вероятно, перейдут на следующую, включая применение CSS и выполнение JavaScript. Как только пользователи нажимают на соответствующую ссылку, страница-призрак мгновенно материализуется на их глазах, заменяя старый контент.
Если предварительная выборка ссылки может быть дорогостоящей операцией, предварительная визуализация тем более. В этом случае браузеры загружают всю веб-страницу и все ее ресурсы на основе ожидания того, что пользователи посетят эту страницу, что в конечном итоге может произойти или не произойти.
В настоящее время предварительный рендеринг поддерживается в IE / Edge, Chrome и Opera .
Варианты использования для предварительной выборки и предварительного рендеринга ссылок
Поскольку как предварительная выборка ссылок, так и (в большей степени) предварительный рендеринг не обходятся дешево, важно иметь четкое представление о том, когда целесообразно реализовать их на веб-странице.
Разработчики, которые планируют использовать подсказки о ресурсах, должны делать это, когда у них есть веские основания предполагать, какие ресурсы следует предварительно выбрать или отобразить на основе содержимого сайта, поведения пользователей, аналитики и т. Д.
Спецификация Resource Hints указывает на ряд случаев использования, в которых предварительная выборка ссылок могла бы улучшить пользовательский опыт:
- Результаты поиска. Разумно предположить, что пользователи заинтересованы в этих результатах, поэтому, скорее всего, они нажмут на ссылки, ведущие к содержанию, за которым они следуют.
- Содержание, разбитое на страницы. Когда пользователи читают первую страницу многостраничной статьи, можно не слишком надумать предположить, что они нажмут на ссылку, которая приводит их на следующую страницу.
- Галереи изображений — разработчики Google используют предварительную выборку в Веб-альбомах Picasa. Если пользователи просматривают фотографию, разработчики могут предположить, что к следующей фотографии также будет доступ, поэтому они просят браузер загрузить ее как можно скорее.
Точно так же Сантьяго Вальдаррама предлагает несколько полезных советов о том, когда разработчики могут разумно рассмотреть возможность внедрения предварительного рендеринга на веб-сайте:
Принимая решение о предварительном отображении целых страниц заранее, учтите, что Google показывает лучшие результаты на своей странице поиска, а Chrome отображает страницы на основе исторических шаблонов навигации пользователей. Используя тот же принцип, вы можете обнаружить общие шаблоны использования и соответственно отредактировать целевые страницы. Вы также можете использовать его, как предварительная выборка ресурсов, в анкетах или опросах, где, как вы знаете, пользователи будут выполнять рабочий процесс в определенном порядке.
Ресурсы
Если вы хотите копнуть глубже, необходимо прочитать следующие ресурсы:
- Спецификация подсказок ресурса
- Уловки Производительности Сети — Вне Основ
- Предварительная загрузка ресурсов
- Предварительная загрузка, предварительная загрузка, предварительный просмотр
- Один шаг вперед: повышение производительности с помощью предварительного просмотра
- Front-end производительность для веб-дизайнеров и front-end разработчиков
Вывод
Предварительная выборка DNS, предварительная выборка ссылок и предварительный рендеринг являются мощными методами оптимизации. Если реализация реализована ответственно , на основе знаний разработчиков веб-контента и поведения пользователя, предварительная выборка может значительно улучшить пользовательский опыт.