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


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

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

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

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

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

Все эти подсказки ресурсов используют 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 = "https://www.smashingmagazine.com/article/part3.html";
document.head.appendChild(hint);

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

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

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

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

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

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

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

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

Ресурсы

Сокрушительная редакция(иль)



Источник

Статьи по Теме

Как перестать тратить впустую драгоценные ресурсы разработки для Mac

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

Ответы

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