Как браузер разделяет ресурсы на важные и неважные?

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

1. Встроенные приоритеты браузера

Браузер автоматически расставляет приоритеты в зависимости от типа ресурса:

Высокий приоритет (High):

• HTML документ
• CSS в head (блокирует рендеринг)
• Критический JavaScript (синхронный скрипт в head)
• Шрифты (если используются критические шрифты)
• Изображения выше fold line (видимой части страницы)

Средний приоритет (Medium):

• JavaScript (асинхронные скрипты)
• Изображения ниже fold line
• SVG графика

Низкий приоритет (Low):

• CSS фонового загрузчика
• Изображения, загружаемые лениво
• Скрипты с атрибутом defer
• Аналитика, отслеживание
• API запросы в фоне

<!-- Высокий приоритет - блокирует рендеринг -->
<link rel="stylesheet" href="critical.css">

<!-- Средний приоритет - загружается асинхронно -->
<script async src="analytics.js"></script>

<!-- Низкий приоритет - загружается в конце -->
<script defer src="non-critical.js"></script>

<!-- Изображение выше fold - выше приоритет -->
<img src="hero.jpg" alt="Hero">

<!-- Изображение ниже fold - ниже приоритет -->
<img src="footer.jpg" alt="Footer" loading="lazy">

2. Явное указание приоритета через атрибуты

2.1 rel="preload" vs rel="prefetch"

<!-- preload: загрузить критический ресурс в этой сессии -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2">
<link rel="preload" href="critical-image.jpg" as="image">

<!-- prefetch: загрузить в низком приоритете для следующей сессии -->
<link rel="prefetch" href="next-page.js">
<link rel="prefetch" href="next-page-image.jpg">

<!-- preconnect: установить соединение с доменом заранее -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://analytics.example.com">

2.2 fetchpriority атрибут (новый стандарт)

<!-- Высокий приоритет для изображения выше fold -->
<img src="hero.jpg" fetchpriority="high" alt="Hero">

<!-- Низкий приоритет для лениво загружаемого изображения -->
<img src="lazy.jpg" loading="lazy" fetchpriority="low" alt="Lazy">

<!-- Высокий приоритет для критического скрипта -->
<script src="critical.js" fetchpriority="high"></script>

3. Resource Hints (подсказки браузеру)

<!-- DNS Prefetch - разрешить доменное имя заранее -->
<link rel="dns-prefetch" href="//example.com">

<!-- Preconnect - установить TCP/TLS соединение -->
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- Prerender - загрузить всю страницу в фоне (осторожно!) -->
<link rel="prerender" href="https://example.com/next-page">

4. Стратегии для различных типов ресурсов

4.1 CSS - критический путь

<!-- Критический CSS - inline в head -->
<style>
  body { font-family: sans-serif; }
  .hero { background: blue; }
</style>

<!-- Остальной CSS - асинхронная загрузка -->
<link rel="stylesheet" href="main.css" media="print" onload="this.media='all'">

<!-- Fallback для старых браузеров -->
<noscript>
  <link rel="stylesheet" href="main.css">
</noscript>

4.2 JavaScript - отложенная загрузка

<!-- Критический скрипт - синхронно -->
<script src="critical.js"></script>

<!-- Асинхронные скрипты - загружаются в параллель -->
<script async src="analytics.js"></script>

<!-- Отложенные скрипты - загружаются после parsing -->
<script defer src="app.js"></script>

<!-- Очень низкий приоритет - загружается когда ничего не делает -->
<script src="non-critical.js" defer></script>

4.3 Изображения - lazy loading

<!-- Статическое изображение выше fold - обычная загрузка -->
<img src="hero.jpg" alt="Hero" width="1200" height="600">

<!-- Изображение ниже fold - ленивая загрузка -->
<img src="footer.jpg" loading="lazy" alt="Footer">

<!-- Высокий приоритет для важного изображения -->
<img src="important.jpg" fetchpriority="high" alt="Important">

<!-- Низкий приоритет для декоративного изображения -->
<img src="decoration.jpg" fetchpriority="low" alt="Decoration">

5. Сетевой приоритет (Network Priority)

Открой DevTools -> Network и посмотри столбец "Priority":

Request        | Type      | Priority
------------------------------------
index.html     | Document  | Highest
style.css      | Stylesheet| High
app.js         | Script    | High
icon.jpg       | Image     | Medium
footer.jpg     | Image     | Low (below fold)
analytics.js   | XHR       | Low

6. HTTP/2 Server Push

// На сервере (Node.js)
res.setHeader('Link', '</app.js>; rel=preload; as=script, </styles.css>; rel=preload; as=style');

// Это говорит браузеру: "Я буду отправлять эти файлы, готовься!"
// Браузер загружает их с высоким приоритетом

7. Практические примеры оптимизации

Пример 1: Критический путь рендеринга (CRP)

<!DOCTYPE html>
<html>
<head>
  <!-- Критический CSS inline -->
  <style>
    html { font-size: 14px; }
    body { margin: 0; font-family: sans-serif; }
    .hero { width: 100%; height: 400px; background: blue; }
  </style>
  
  <!-- Некритический CSS - асинхронно -->
  <link rel="stylesheet" href="app.css" 
        media="print" onload="this.media='all'">
</head>
<body>
  <div class="hero"></div>
  
  <!-- Скрипты в конце body -->
  <script defer src="app.js"></script>
</body>
</html>

Пример 2: Приоритизация изображений

<!-- Hero image - высокий приоритет -->
<img src="hero.jpg" 
     fetchpriority="high" 
     alt="Hero">

<!-- Product images - средний приоритет (явно не указан) -->
<img src="product-1.jpg" alt="Product 1">

<!-- Thumbnail images ниже fold - низкий приоритет -->
<img src="thumb-1.jpg" 
     loading="lazy" 
     fetchpriority="low" 
     alt="Thumbnail 1">

Пример 3: Оптимизация шрифтов

<!-- Preload критические шрифты -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

<!-- Шрифты для fallback - prefetch -->
<link rel="prefetch" href="/fonts/fallback.woff2" as="font">

<!-- CSS использует шрифты -->
<link rel="stylesheet" href="fonts.css">

8. Разблокирование критического пути

// React пример - отложить загрузку некритического компонента
import { lazy, Suspense } from 'react';

const HeavyChart = lazy(() => import('./HeavyChart'));

export function Dashboard() {
  return (
    <>
      {/* Критический контент */}
      <h1>Dashboard</h1>
      <p>Loading...</p>
      
      {/* Некритический контент с fallback */}
      <Suspense fallback={<p>Loading chart...</p>}>
        <HeavyChart />
      </Suspense>
    </>
  );
}

9. Метрики для проверки приоритизации

# Используй Google Chrome DevTools:
# 1. Lighthouse -> Performance
# 2. Network вкладка -> Sort by Priority
# 3. Performance вкладка ->看 критический путь

10. Типичные ошибки приоритизации

<!-- Плохо - CSS в конце body блокирует рендеринг -->
<script src="app.js"></script>
<link rel="stylesheet" href="styles.css">

<!-- Хорошо - CSS в head, скрипты в конце -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  ...
  <script defer src="app.js"></script>
</body>

<!-- Плохо - загружаем всё синхронно -->
<img src="huge-1.jpg">
<img src="huge-2.jpg">
<img src="huge-3.jpg">

<!-- Хорошо - ленивая загрузка -->
<img src="hero.jpg">
<img src="thumb-1.jpg" loading="lazy">
<img src="thumb-2.jpg" loading="lazy">

Заключение

Браузер использует комбинацию встроенных правил, явных подсказок (preload, prefetch) и стандартных атрибутов (async, defer, loading, fetchpriority) для определения приоритета ресурсов. Правильная приоритизация — это один из самых эффективных способов оптимизировать производительность. Критический путь рендеринга (HTML, CSS, выше fold изображения) должен загружаться в первую очередь, а остальное — отложено или загружено в фоне.