Быстрая предварительная загрузка Hero-изображений

Быстрая предварительная загрузка Hero-изображений

От автора: предварительная загрузка позволяет как можно скорее сообщить браузеру о критических ресурсах, которые вы хотите загрузить, до того, как они будут найдены в HTML. Если вы оптимизируете Отображение наибольшего контента (LCP), предварительная загрузка может изменить правила игры для повышения приоритета загрузки поздно обнаруживаемых Hero-изображений и ресурсов, загружаемых через JavaScript.

Примечание. Предварительная загрузка поддерживается в Chrome, Edge, Safari и Firefox 78+.

Предварительная загрузка может существенно улучшить LCP, особенно если вам нужно, чтобы критические изображения (например, Hero-изображения) имели приоритет над загрузкой других изображений на странице. Хотя браузеры изо всех сил стараются расставить приоритеты для загрузки изображений в видимом окне просмотра, <link rel=preload> может повысить приоритет.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Если в настоящее время у вас есть:

Hero-изображения, которые используют JavaScript для загрузки

Теги img для загрузки компонентов React, Vue или Angular на стороне клиента

HTML-код, отображаемый на стороне клиента, отвечающий за загрузку изображений

Фоновые Hero-изображения в CSS. Они обнаруживаются очень поздно.

Hero-изображения, которые используют JavaScript + загрузку из сети

например, требуется получение JSON из API для обнаружения изображений

Используете webpack-загрузчик для загрузки изображений

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

Я использую <link rel=preload> во многих одностраничных приложениях для оптимизации Core Web Vitals; в частности, как скоро загрузятся основные изображения, видимые в области просмотра.

Выше показан видеоролик WebPageTest, загруженный из приложения обзора фильмов на основе React. Приложение использует рендеринг на стороне клиента (app.js), а также полагается на извлечение из API для возврата потока изображений JSON (movies.json). Это означает, что браузеру, возможно, потребуется обработать app.js, прежде чем он начнет получать файл movies.json и сможет обнаружить Hero-изображение (poster.jpg).

Примечание. Метрика Largest Contentful Paint (LCP) измеряет время визуализации самого большого изображения или текстового блока, видимого в области просмотра.

Используя предварительную загрузку Hero-изображения, Largest Contentful Paint (оранжевая рамка) работает на 1 секунду быстрее в 4G. Это улучшает воспринимаемую пользователем производительность, поскольку меньше времени тратится на ожидание появления значимого контента в области просмотра.

<link rel=preload> может использоваться для оптимизации загрузки поздно обнаруживаемых изображений несколькими способами.

Предварительно загрузите Hero-изображение, чтобы оно было обнаружено до того, как JS выдаст img:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Теперь, когда поддержка WebP в браузерах улучшилась, вам может понравиться, что изображения WebP также могут быть предварительно загружены:

Предварительно загрузите адаптивное изображение, чтобы быстрее обнаружить правильный источник:

Предварительно загрузите JSON как выборку, чтобы он был обнаружен до того, как JS запросит его:

В моем случае для movies.json требуется выборка из разных источников, для которой вы можете использовать предварительную загрузку, если установите атрибут crossorigin в элементе link:

Для получения дополнительных преимуществ вы также можете предварительно подключиться к источнику, к которому будет подключена эта выборка:

Предварительно загрузите JS, чтобы сократить время, необходимое для обнаружения из HTML:

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

Подводя итоги

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

Автор: Addy Osmani

Источник: https://addyosmani.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.