От автора: предварительная загрузка позволяет как можно скорее сообщить браузеру о критических ресурсах, которые вы хотите загрузить, до того, как они будут найдены в HTML. Если вы оптимизируете Отображение наибольшего контента (LCP), предварительная загрузка может изменить правила игры для повышения приоритета загрузки поздно обнаруживаемых Hero-изображений и ресурсов, загружаемых через JavaScript.
<link rel="preload" as="image" href="hero-image.jpg">
Примечание. Предварительная загрузка поддерживается в Chrome, Edge, Safari и Firefox 78+.
Предварительная загрузка может существенно улучшить LCP, особенно если вам нужно, чтобы критические изображения (например, Hero-изображения) имели приоритет над загрузкой других изображений на странице. Хотя браузеры изо всех сил стараются расставить приоритеты для загрузки изображений в видимом окне просмотра, <link rel=preload> может повысить приоритет.
Примечание. 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:
<link rel="preload" as="image" href="poster.jpg">
Теперь, когда поддержка WebP в браузерах улучшилась, вам может понравиться, что изображения WebP также могут быть предварительно загружены:
<link rel="preload" as="image" href="poster.webp" type="image/webp">
Предварительно загрузите адаптивное изображение, чтобы быстрее обнаружить правильный источник:
<link rel="preload" as="image" href="poster.jpg" imagesrcset=" poster_400px.jpg 400w, poster_800px.jpg 800w, poster_1600px.jpg 1600w" imagesizes="50vw">
Предварительно загрузите JSON как выборку, чтобы он был обнаружен до того, как JS запросит его:
<link rel="preload" as="fetch" href="movies.json">
В моем случае для movies.json требуется выборка из разных источников, для которой вы можете использовать предварительную загрузку, если установите атрибут crossorigin в элементе link:
<link rel="preload" as="fetch" href="foo.com/api/movies.json" crossorigin>
Для получения дополнительных преимуществ вы также можете предварительно подключиться к источнику, к которому будет подключена эта выборка:
<link rel="preconnect" href="https://foo.com/" crossorigin>
Предварительно загрузите JS, чтобы сократить время, необходимое для обнаружения из HTML:
<link rel="preload" as="fetch" href="app.js">
Примечание. Не злоупотребляйте предварительной загрузкой (когда важны все ресурсы, ни один из них не получит приоритет). Зарезервируйте это для критических ресурсов, которые сканер предварительной загрузки браузера не может найти органически.
Подводя итоги
Предварительная загрузка помогает обеспечить максимально быстрый показ важных изображений и ресурсов для пользователей. Чтобы узнать, существуют ли возможности для оптимизации вашего приложения через предварительную загрузку, попробуйте Lighthouse или PageSpeed Insights, в которых есть аудит для предварительных загрузок.
Автор: Addy Osmani
Источник: https://addyosmani.com
Редакция: Команда webformyself.