В последнем модуле об оптимизации загрузки ресурсов вы узнали, как различные ресурсы страницы, такие как CSS и JavaScript, могут влиять на скорость загрузки страницы и как можно оптимизировать их и их доставку, чтобы ускорить отрисовку страницы. Это идеальное время для перехода к более сложному аспекту загрузки ресурсов, который включает в себя помощь браузеру в их более быстрой загрузке с помощью подсказок по ресурсам.
Подсказки по ресурсам могут помочь разработчикам оптимизировать время загрузки страницы, сообщая браузеру, как загружать ресурсы и расставлять приоритеты. Первым был представлен первоначальный набор подсказок по ресурсам, таких как preconnect и dns-prefetch . Однако со временем preload и Fetch Priority API предоставили дополнительные возможности.
Подсказки ресурсов предписывают браузеру заранее выполнить определенные действия, которые могут улучшить производительность загрузки. Подсказки ресурсов могут выполнять такие действия, как выполнение раннего поиска DNS, заблаговременное подключение к серверам и даже извлечение ресурсов до того, как браузер обычно их обнаружит.
Подсказки по ресурсам могут быть указаны в HTML — чаще всего в начале элемента <head> — или установлены в виде заголовка HTTP . В рамках этого модуля рассматриваются preconnect , dns-prefetch и preload , а также поведение спекулятивной выборки, которое обеспечивает prefetch .
preconnect
Подсказка preconnect используется для установления соединения с другим источником, откуда вы извлекаете важные ресурсы. Например, вы можете размещать свои изображения или ресурсы на CDN или другом перекрестном источнике:
<link rel="preconnect" href="https://example.com">
Используя preconnect , вы ожидаете, что браузер планирует подключиться к определенному междоменному серверу в самом ближайшем будущем и что браузер должен открыть это соединение как можно скорее, в идеале, прежде чем ждать, пока парсер HTML или сканер предварительной загрузки выполнит эти действия. так.
Если на странице имеется большое количество ресурсов из разных источников, используйте preconnect для тех ресурсов, которые наиболее важны для текущей страницы.
preconnect соединение может облегчить, установив соединения раньше, а не во время обнаружения ресурса с перекрестным происхождением. Распространенным вариантом использования preconnect является Google Fonts . Google Fonts рекомендует preconnect к домену https://fonts.googleapis.com , который обслуживает объявления @font-face и к домену https://fonts.gstatic.com , который обслуживает файлы шрифтов.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Атрибут crossorigin используется, чтобы указать, должен ли ресурс быть получен с использованием совместного использования ресурсов Cross-Origin (CORS) . Если при использовании подсказки preconnect подключения ресурс, загружаемый из источника, использует CORS (например, файлы шрифтов), вам необходимо добавить атрибут crossorigin в подсказку preconnect подключения.
dns-prefetch
Хотя раннее открытие подключений к серверам с несколькими источниками может значительно сократить время начальной загрузки страницы, устанавливать соединения со многими серверами с несколькими источниками одновременно может оказаться неразумным или невозможным. Если вы обеспокоены тем, что можете злоупотреблять preconnect , гораздо менее затратным ресурсом является подсказка dns-prefetch .
Судя по названию, dns-prefetch не устанавливает соединение с перекрестным сервером, а просто заранее выполняет для него поиск DNS . Поиск DNS происходит, когда имя домена преобразуется в его базовый IP-адрес. Хотя уровни кэшей DNS на уровне устройства и сети помогают сделать этот процесс в целом быстрым, он все равно занимает некоторое время.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
Поиск DNS довольно недорог, и из-за его относительно небольшой стоимости в некоторых случаях он может быть более подходящим инструментом, чем preconnect . В частности, это может быть желательной подсказкой к ресурсу, которую следует использовать в случаях ссылок, ведущих на другие веб-сайты, на которые, по вашему мнению, пользователь может перейти. dnstradamus — один из таких инструментов, который делает это автоматически с помощью JavaScript и использует API Intersection Observer для внедрения подсказок dns-prefetch в HTML текущей страницы, когда ссылки на другие веб-сайты прокручиваются в область просмотра пользователя.
preload
Директива preload используется для инициирования раннего запроса ресурса, необходимого для рендеринга страницы:
<link rel="preload" href="/lcp-image.jpg" as="image">
Директивы preload должны быть ограничены поздно обнаруженными критическими ресурсами. Наиболее распространенными вариантами использования являются файлы шрифтов, файлы CSS, полученные с помощью объявлений @import , или ресурсы background-image CSS, которые, вероятно, будут кандидатами на наибольшую контентную отрисовку (LCP) . В таких случаях эти файлы не будут обнаружены сканером предварительной загрузки, поскольку на ресурс есть ссылка во внешних ресурсах.
Как и в случае с preconnect , директиве preload требуется атрибут crossorigin , если вы предварительно загружаете ресурс CORS, например шрифты. Если вы не добавите атрибут crossorigin (или не добавите его для запросов, отличных от CORS), тогда ресурс будет загружен браузером дважды , тратя впустую полосу пропускания, которую можно было бы лучше потратить на другие ресурсы.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
В предыдущем фрагменте HTML браузеру предлагается предварительно загрузить /font.woff2 с помощью запроса CORS, даже если /font.woff2 находится в том же домене.
prefetch
Директива prefetch используется для инициирования запроса с низким приоритетом для ресурса, который, вероятно, будет использоваться для будущей навигации:
<link rel="prefetch" href="/next-page.css" as="style">
Эта директива в основном соответствует тому же формату, что и директива preload , только вместо атрибута rel элемента <link> используется значение "prefetch" . Однако, в отличие от директивы preload , prefetch в значительной степени является спекулятивной, поскольку вы инициируете выборку ресурса для будущей навигации, которая может произойти, а может и не произойти.
Бывают случаи, когда prefetch может быть полезной — например, если вы определили поток пользователей на своем веб-сайте, которому большинство пользователей следуют до завершения, prefetch критически важного для рендеринга ресурса для этих будущих страниц может помочь сократить время их загрузки. .
API приоритета получения
Вы можете использовать Fetch Priority API через его атрибут fetchpriority , чтобы повысить приоритет ресурса. Вы можете использовать атрибут с элементами <link> , <img> и <script> .
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
По умолчанию изображения загружаются с более низким приоритетом. Если после компоновки изображение находится в пределах начальной области просмотра, его приоритет увеличивается до «Высокий ». В предыдущем фрагменте HTML fetchpriority немедленно сообщает браузеру загрузить большее изображение LCP с высоким приоритетом, в то время как менее важные миниатюры изображений загружаются с более низким приоритетом.
Современные браузеры загружают ресурсы в два этапа. Первый этап зарезервирован для критически важных ресурсов и заканчивается после загрузки и выполнения всех блокирующих сценариев. На этом этапе загрузка ресурсов с низким приоритетом может задерживаться. Используя fetchpriority="high" вы можете повысить приоритет ресурса, позволяя браузеру загрузить его на первом этапе.
Демо-подсказки по ресурсам
Проверьте свои знания
Что делает подсказка ресурса preconnect ?
Что позволяет API Fetch Priority?
<link> , <img> и <script> . Когда следует использовать подсказку prefetch ?
Далее: производительность изображения
К настоящему моменту вы, вероятно, начинаете чувствовать себя довольно уверенно в своих знаниях общих вопросов производительности, когда дело касается HTML-кода страницы, элемента <head> и подсказок по ресурсам. Однако существуют дополнительные оптимизации, специфичные для различных типов ресурсов, которые обычно загружаются страницами. Далее, производительность изображений рассматривается в следующем модуле, который поможет вам обеспечить максимально быструю загрузку изображений вашего веб-сайта, независимо от устройства пользователя.