Preload и prefetch

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

Preload

<link rel="preload"> сообщает браузеру, что определённый ресурс будет необходим в ближайшее время, и его следует загрузить как можно скорее, даже если обычный HTML или CSS ещё не требуют его напрямую.

Основные характеристики

  • Загружается с высокой приоритетностью.

  • Используется для ресурсов, которые критически важны для текущей страницы (например, шрифты, скрипты или стили).

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

  • Атрибут as указывает тип ресурса, например:

    <link rel="preload" href="/styles/main.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/fonts/Roboto.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Практические рекомендации

  1. Использовать preload для критических ресурсов, без которых страница не может быть правильно отображена.
  2. Всегда указывать атрибут as, чтобы браузер мог применить правильные политики кеширования и приоритизации.
  3. Для шрифтов указывать crossorigin, если шрифт загружается с внешнего источника, чтобы избежать ошибок при CORS.

Prefetch

<link rel="prefetch"> используется для ресурсов, которые могут понадобиться в будущем, но не критичны для текущей загрузки страницы.

Основные характеристики

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

Пример использования:

<link rel="prefetch" href="/scripts/future-feature.js">
<link rel="prefetch" href="/images/next-page-banner.jpg">

Практические рекомендации

  1. Использовать для скриптов и ресурсов, которые вероятно понадобятся, например, при переходе на следующую страницу.
  2. Объединять с динамической подгрузкой скриптов или ленивой загрузкой изображений.
  3. Не использовать для ресурсов, критичных для первичной загрузки страницы — это уменьшает эффективность prefetch.

Различия между Preload и Prefetch

Характеристика Preload Prefetch
Приоритет загрузки Высокий Низкий
Цель Ресурсы для текущей страницы Ресурсы для будущего использования
Влияние на рендер Может ускорить критический рендеринг Не влияет на текущий рендер
Типичные ресурсы Шрифты, CSS, скрипты для первой отрисовки Скрипты, изображения для следующей страницы

Взаимодействие с Lighthouse

Lighthouse оценивает производительность страницы и обращает внимание на правильное использование preload и prefetch:

  • Preload помогает улучшить метрики LCP (Largest Contentful Paint) и FCP (First Contentful Paint), поскольку браузер быстрее получает критические ресурсы.
  • Prefetch влияет на показатели PWA и пользовательский опыт при навигации между страницами, уменьшая время ожидания для вторичных ресурсов.

Lighthouse может выдавать рекомендации по:

  • Определению ресурсов, которые стоит prefetch или preload.
  • Оптимизации порядка загрузки критических CSS и JavaScript.
  • Минимизации блокировки основного потока рендеринга.

Интеграция в современные проекты

В современных сборщиках и фреймворках (Webpack, Vite, Next.js) можно автоматически генерировать теги preload/prefetch:

  • Webpack поддерживает PreloadWebpackPlugin для добавления preload тегов к критическим бандлам.
  • Next.js использует стратегию <link rel="preload"> для критических скриптов и шрифтов автоматически.
  • Ручное добавление prefetch полезно для SPA, чтобы заранее загружать ресурсы, которые пользователь может открыть через роутер.

Выводы по использованию

  • Preload — для критических ресурсов текущей страницы, влияет на LCP и FCP.
  • Prefetch — для будущих ресурсов, улучшает навигацию между страницами, минимизирует задержки вторичных запросов.
  • Комбинированное использование позволяет оптимизировать загрузку и улучшить показатели Lighthouse без перегрузки сети.

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

Оглавление