Чем подсказки приоритета отличаются от атрибута rel=preload?

В мире веб-разработки оптимизация скорости загрузки веб-сайтов имеет первостепенное значение. В этой статье мы рассмотрим метод под названием fetchpriority=high, который может значительно ускорить загрузку ресурсов.

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

Понимание самой крупной отрисовки содержимого (LCP)

Самая большая отрисовка содержимого (LCP) — это ориентированная на пользователя метрика, которая измеряет время, необходимое для отображения самого большого видимого элемента в окне просмотра. В большинстве случаев этот элемент представляет собой изображение, видео или текстовый элемент блочного уровня.

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

Представляем подсказки приоритета

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

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

Усиление изображений LCP с помощью fetchpriority=high

Чтобы использовать fetchpriority=high и повысить скорость загрузки изображения LCP, вам необходимо включить этот атрибут в HTML-код элемента изображения. Вот пример:

<img src="image.jpg" fetchpriority="high" alt="Image">

В приведенном выше фрагменте кода мы установили для атрибута fetchpriority значение «high» для основного изображения LCP. Это говорит браузеру установить приоритет загрузки этого изображения, позволяя ему быстрее отображаться и улучшать общую воспринимаемую производительность вашей веб-страницы.

Уменьшение приоритета для изображений выше сгиба

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

<img src="image.jpg" fetchpriority="low" alt="Image">

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

Настройка приоритета для стороннего контента

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

<iframe src="https://www.youtube.com/embed/your-video" fetchpriority="low"></iframe>

В приведенном выше фрагменте кода мы установили атрибут fetchpriority на «низкий» для iframe, в который встроено видео YouTube. Тем самым мы указываем браузеру, что загрузке этого стороннего контента должен быть присвоен более низкий приоритет, что позволяет быстро загружать и отображать контент главной страницы.

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

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

<script src="critical-script.js" fetchpriority="high"></script>
<script src="non-critical-script.js" fetchpriority="low"></script>

Управление приоритетом выборки для вызовов API

Подсказки приоритета также могут быть полезны при выполнении вызовов выборки к API. Указав параметр priority в запросе на выборку, мы можем различать фоновые выборки и интерактивные с пользователем выборки. Вот пример:

fetch("/api/data", { priority: "high" })
  .then((response) => {
    // Process the API response
  })
  .catch((error) => {
    // Handle errors
  });

В приведенном выше фрагменте кода мы включили параметр fetchpriority со значением «высокий» в запрос на выборку. Это указывает браузеру, что вызов API является интерактивным для пользователя и должен иметь приоритет для более быстрого выполнения.

Чем подсказки приоритета отличаются от атрибута rel=preload?

Хотя и подсказки приоритета, и атрибут rel=preload используются для оптимизации загрузки ресурсов, они служат разным целям. rel=preload позволяет вам настроить, когда браузер обнаруживает ресурс, в первую очередь для ресурсов, невидимых анализатору. С другой стороны, подсказки по приоритету с атрибутом fetchpriority позволяют настроить приоритет загрузки ресурсов независимо от обнаружения. Подсказки приоритета особенно полезны для оптимизации загрузки видимого содержимого, например изображений LCP.

Заключение

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

Не забудьте правильно использовать атрибут fetchpriority в зависимости от важности каждого ресурса. Уменьшите приоритет для изображений в верхней части страницы или стороннего контента и увеличьте приоритет для важных изображений и интерактивных вызовов API.

Спасибо за чтение! Любите эти истории? Поддержите меня членством в ежемесячных подборках статей. Или присоединяйтесь к Medium по моей ссылке.

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 💰 Бесплатный курс собеседования по программированию ⇒ Просмотреть курс
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу