Удивительные посетители с высокопроизводительных веб-сайтов

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

Что такое предварительная выборка?

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

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

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

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

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

Предварительный рендеринг – это новая волшебная практика, позволяющая браузеру загружать ресурсы и отображать всю страницу в фоновом режиме. Возможность предварительно отобразить всю страницу, пока браузер вашего посетителя простаивает, очень эффективна. Когда они нажимают кнопку «следующая страница», страница отображается почти мгновенно. Ваши шаблоны, отображаемые на сервере, будут отображаться сразу же, как и на сайте на основе java-скрипта MVC. Если ваш сайт выполняет всю маршрутизацию на стороне клиента, предварительный рендеринг не очень практичен, но вы все равно можете получить ускорение, выполняя такие вещи, как кэширование шаблонов Angular в фоновом режиме.

Примеры предварительной выборки и предварительного рендеринга

Предварительная загрузка ссылок

<!-- full page -->
<link rel="prefetch" href="https://example.com/css-enhancements-user-experience" />

<!-- just an image -->
<link rel="prefetch" href="https://example.com/images/sprite.png" />

Предварительная выборка HTML5 выполняется с помощью тега LINK, в котором «предварительная выборка» указывается как rel, а href — как путь к документу. Mozilla также отвечает на несколько атрибутов LINK с разными именами:

<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" />
<link rel="next" href="2.html" />

Предварительная настройка DNS

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

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

<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- You can reverse this setting by setting content to "on". -->
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="http://example.com/">

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

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

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

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

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

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

Пререндеринг

<link rel="prerender" href="http://example.com/sign-up.html">

Рекомендации по предварительной выборке и предварительному рендерингу:

Когда использовать предварительную выборку (dns):

  • Когда вы отправляете AJAX-запросы к домену, отличному от того, на котором вы находитесь. Это включает в себя субдомены.
  • Когда вы динамически отображаете контент на странице из другого домена. Примеры случаев включают сгенерированные ссылки/кнопки и ленивую загрузку изображений.

Когда не следует использовать предварительную выборку (dns):

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

Когда использовать предварительную визуализацию:

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

Когда не следует использовать предварительную визуализацию:

  • Когда пользователь вряд ли зайдет на страницу.
  • Когда количество сетевых данных ограничено (вы не хотите, чтобы пользователи платили за страницы, которые они даже не посещают).

Вывод

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