Оптимизация производительности с помощью подсказок ресурсов

Опубликовано: 2022-03-10

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

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

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

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

Все эти подсказки ресурсов используют атрибут rel элемента <link> , который вам знаком в <head> ваших HTML-документов. В этой статье мы рассмотрим основные типы подсказок ресурсов, а также когда и где мы можем их использовать на наших страницах. Мы пойдем от маленьких и тонких намеков к большим пушкам в конце.

Еще после прыжка! Продолжить чтение ниже ↓

Предварительная выборка DNS

Поиск DNS — это процесс превращения удобного для человека доменного имени, такого как example.com , в удобный для машины IP-адрес, такой как 123.54.92.4 , который действительно необходим для получения ресурса.

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

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

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

Когда браузер встречает эту подсказку, он может начать разрешать доменное имя images.example.com как можно скорее, даже если он еще не знает, как оно будет использоваться. Это позволяет браузеру опережать игру и выполнять больше работы параллельно, уменьшая общее время загрузки.

Когда следует использовать `dns-prefetch` ?

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

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

Предварительное подключение

Один шаг от предварительной выборки DNS — это предварительное подключение к серверу. Установка соединения с сервером, на котором размещен ресурс, выполняется в несколько шагов:

поиск DNS (как мы только что обсуждали);
TCP-рукопожатие
Краткий «разговор» между браузером и сервером для создания соединения.
Согласование TLS на сайтах HTTPS
Это подтверждает, что информация о сертификате действительна и верна для соединения.

Обычно это происходит один раз для каждого сервера и занимает драгоценное время, особенно если сервер находится очень далеко от браузера и сетевая задержка велика. (Вот где действительно помогают глобально распределенные CDN!) Точно так же, как предварительная выборка DNS может помочь браузеру опередить игру, прежде чем он увидит, что произойдет, предварительное подключение к серверу может гарантировать, что, когда браузер доберется до части страницы, где нужен ресурс, медленная работа по установлению соединения уже прошла и линия открыта и готова к работе.

 <link rel="preconnect" href="https://scripts.example.com">

Когда я должен использовать `preconnect` ?

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

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

Предварительная загрузка следующей страницы

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

Первый из них — предварительная выборка, и его тег ссылки может выглядеть так:

 <link rel="prefetch" href="https://example.com/news/?page=2" as="document">

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

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

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

Атрибут `as`

В приведенном выше примере вы можете видеть, что мы устанавливаем для атрибута as значение as="document" . Это необязательный атрибут, который сообщает этому браузеру, что то, что мы извлекаем, должно обрабатываться как документ (т. е. веб-страница). Это позволяет браузеру устанавливать такие же заголовки запросов и политики безопасности, как если бы мы только что перешли по ссылке на новую страницу.

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

Значение `as`	Тип ресурса
`audio`	Звуковые и музыкальные файлы
`video`	видео
`Track`	Видео или аудио треки WebVTT
`script`	файлы JavaScript
`style`	Таблицы стилей CSS
`font`	Веб-шрифты
`image`	Картинки
`fetch`	Запросы XHR и Fetch API
`worker`	Веб-воркеры
`embed`	Мультимедийные `<embed>` запросы
`object`	Мультимедийные `<object>` запросы
`document`	интернет страницы

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

Когда следует использовать `prefetch` ?

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

Предварительный рендеринг следующей страницы

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

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

 <link rel="prerender" href="https://example.com/news/?page=2">

Это действительно может сделать загрузку следующей страницы мгновенной, с такой быстрой производительностью загрузки, которую вы можете увидеть, нажав кнопку « Назад » в браузере. Однако здесь риск еще больше, поскольку вы не только тратите время на запрос и загрузку файлов, но и выполняете их вместе с любым JavaScript и тому подобным. Это может израсходовать память и ЦП (и, следовательно, батарею), от чего пользователь не увидит выгоды, если в конечном итоге не запросит страницу.

Когда я должен использовать `prerender` ?

Браузерная поддержка prerender в настоящее время очень ограничена, и только Chrome и старый IE (не Edge) предлагают поддержку этой опции. Это может ограничить его полезность, если вы специально не ориентируетесь на Chrome. Опять же, это случай «ни вреда, ни фола», поскольку пользователь не увидит преимущества, но в противном случае это не вызовет у него никаких проблем.

Использование подсказок ресурсов

Мы уже видели, как можно использовать подсказки ресурсов в <head> HTML-документа с помощью <link> . Это, вероятно, самый удобный способ сделать это, но вы также можете добиться того же с заголовком Link: HTTP.

Например, для предварительной выборки с заголовком HTTP:

 Link: <https://example.com/logo.png>; rel=prefetch; as=image;

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

 var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint);

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

Что следует отметить

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

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

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

Важность технического обслуживания

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

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

Ресурсы

«Спецификация подсказок по ресурсам», W3C
«Ускорьте навигацию на следующей странице с помощью предварительной выборки», Эдди Османи.