Современные веб-браузеры используют всевозможные методы, чтобы помочь улучшить производительность загрузки страницы, угадывая, что пользователь может сделать дальше. Браузер не знает много о нашем сайте или приложении в целом, хотя, и часто лучшие идеи о том, что пользователь может быть, вероятно, делать от нас, разработчика.
Возьмем, к примеру, paginated содержание, как фотоальбом. Мы знаем, что если пользователь смотрит на фотографию в альбоме, вероятность того, что они нажмет на ссылку «следующая», чтобы просмотреть следующее изображение в альбоме, довольно высока. Браузер, однако, на самом деле не знаю, что из всех ссылок на странице, это тот, который пользователь, скорее всего, нажать. Для браузера все эти ссылки имеют равный вес.
Что делать, если браузер может как-то знать, где пользователь собирается дальше и может получить следующую страницу заранее, так что, когда пользователь нажимает на ссылку на страницу нагрузки гораздо, гораздо быстрее? Это в основном то, что ресурс Подсказки. Они способ для разработчика, чтобы рассказать браузеру о том, что может произойти в будущем, так что браузер может фактором, что в своем выборе того, как он загружает ресурсы.
Все эти подсказки ресурса используют rel атрибут <link> элемента, который вы будете знакомы с поиском в <head> ваших HTML-документах. В этой статье мы рассмотрим основные типы ресурсов подсказки и когда и где мы можем использовать их на наших страницах. Мы перейдем от маленьких и тонких подсказок до больших пушек в конце.
DNS Prefetching
Поиск 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 когда ваша страница использует ресурсы из другого домена, чтобы дать браузеру фору. Поддержка браузера действительно велика,но если браузер не поддерживает его, то никакого вреда — prefetch просто не произойдет.
Не prefetch каких-либо доменов вы не используете, и если вы окажетесь желающих prefetch большое количество доменов вы могли бы быть лучше посмотреть, почему все эти домены необходимы, и если что-нибудь можно сделать, чтобы уменьшить число.
Предподключение
Одним из шагов от DNS prefetching является предварительное подключение к серверу. Создание соединения с сервером, размещаемым ресурсом, занимает несколько шагов:
- Поиск DNS (как мы только что обсудили);
-
Рукопожатие TCP
Краткий «разговор» между браузером и сервером для создания соединения. -
Переговоры TLS на сайтах HTTPS
Это проверяет, что информация о сертификате является достоверной и правильной для соединения.
Это обычно происходит один раз на сервере и занимает драгоценное время — особенно если сервер очень далеко от браузера и задержка сети высока. (Это где глобально распределенных CDNs действительно помогают!) Таким же образом, что prefetching DNS может помочь браузеру опередить игру, прежде чем он видит, что идет, предварительное подключение к серверу может убедиться, что, когда браузер попадает на часть страницы, где ресурс необходим, медленная работа по установлению соединения уже состоялось, и линия открыта и готова к работе.
<link rel="preconnect" href="https://scripts.example.com">
Когда я должен preconnect использовать?
Опять же, поддержка браузера сильна, и нет никакого вреда, если браузер не поддерживает предварительное подключение — результат будет так же, как это было раньше. Рассмотрите возможность использования предварительного подключения, когда вы точно знаете, что будете получать доступ к ресурсу, и вы хотите получить вперед.
Будьте осторожны, чтобы не предварительно подключиться, а затем не использовать соединение, так как это будет как замедлить вашу страницу вниз и связать небольшое количество ресурсов на сервере вы подключаетесь к слишком.
Предварительная на следующая страница
Два намека мы смотрели на до сих пор в первую очередь сосредоточены на ресурсах в пределах страницы загружаются. Они могут быть полезны, чтобы помочь браузеру опередить изображения, скрипты или шрифты, например. Следующие пару подсказок больше связаны с навигацией и прогнозированием того, куда пользователь может пойти после загружаемых страниц.
Первый из них является prefetching, и его ссылка тег может выглядеть следующим образом:
<link rel="prefetch" href="https://example.com/news/?page=2" as="document">
Это говорит браузеру, что он может пойти дальше и получить страницу в фоновом режиме, так что он готов к работе по запросу. Там немного играть здесь, потому что вы должны упредить, где вы думаете, что пользователь будет перемещаться дальше. Получите это право, и следующая страница может показаться, чтобы загрузить очень быстро. Поймите это неправильно, и вы потратили время и ресурсы на загрузку чего-то, что не будет использоваться. Если пользователь находится на дозированном соединении, как ограниченный план мобильного телефона, вы можете фактически стоить им реальных денег.
Когда происходит prefetch, браузер делает поиск DNS и делает подключение к серверу мы видели в предыдущих двух типах подсказки, но затем идет дальше и на самом деле просит и загружает файлы. Однако в этот момент он останавливается, и файлы не разбираются и не выполняются, и они никоим образом не применяются к текущей странице. Они просто просили и держали готовыми.
Вы можете думать о prefetch как немного, как добавление файла в кэш браузера. Вместо того, чтобы выйти на сервер и скачать его, когда пользователь нажимает на ссылку, файл может быть вытащил из памяти и использовать гораздо быстрее.
asАтрибут
В приведенном выше примере можно увидеть, что мы устанавливаем as as="document" атрибут. Это дополнительный атрибут, который говорит, что браузер, что то, что мы извлечения должны быть обработаны в качестве документа (т.е. веб-страницы). Это позволяет браузеру устанавливать такие же заголовки запросов и политики безопасности, как если бы мы только что следовали ссылке на новую страницу.
Есть много возможных значений для as атрибута, позволяя браузеру обрабатывать различные типы prefetch соответствующим образом.
Значение 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 , мы видели, как браузер может скачать файлы в фоновом режиме готовы к использованию, но и отметил, что ничего больше не было сделано с ними в этот момент. Prerendering идет на один шаг дальше и выполняет файлы, делая почти всю работу, необходимую для отображения страницы, за исключением фактического отображения его.
Это может включать в себя разбор ресурса для любых подресурсов, таких как файлы и изображения JavaScript, и prefetching те также.
<link rel="prerender" href="https://example.com/news/?page=2">
Это действительно может сделать следующую загрузку страницы чувствовать себя мгновенно, с видом быстрой производительности нагрузки вы можете увидеть при нажатии кнопки обратно вашего браузера. Азартная игра здесь еще больше, однако, как вы не только тратить время на запрос и загрузку файлов, но выполнение их вместе с любым JavaScript и такие. Это может использовать память и процессор (и, следовательно, батареи), что пользователь не будет видеть выгоду, если они в конечном итоге не запрашивает страницу.
Когда я должен prerender использовать?
Поддержка браузера в prerender настоящее время очень ограничена, с действительно только Chrome и старый IE (не Край), предлагающих поддержку для опции. Это может ограничить его полезность, если вы не будете специально ориентированы 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, но не на примере целые ресурсы. Если память низкая, браузер может снова решить, что это не стоит извлечения следующей страницы, пока текущая была разгружена.
Реальность такова, что на настольном браузере, подсказки, скорее всего, все будут следовать, как разработчик предлагает, но имейте в виду, что это до браузера в каждом случае.
Важность технического обслуживания
Если вы работали с Интернетом более нескольких лет, вы будете знакомы с тем, что если что-то на странице невидно, то он часто может стать пренебречь. Скрытые метаданные (например, описания страниц) является хорошим примером этого. Если люди, ухаживая за сайтом не может легко увидеть данные, то он может легко стать пренебречь и дрейф устарели.
Это реальный риск с подсказками ресурсов. Как код скрыт и идет в значительной степени незамеченными в использовании, было бы очень легко для страницы, чтобы изменить и любые намеки ресурса, чтобы пойти ООН-обновлено. Следствием, скажем, prefetching страницы, что вы не используете, означает, что инструменты, которые вы поставили на место, чтобы улучшить производительность вашего сайта, то активно вредит ему. Таким образом, наличие хороших процедур на месте, чтобы ключ вашего ресурса намеки до настоящего времени становится очень, очень важно.
Ресурсы
Источник: smashingmagazine.com
