Оптимизация изображений и шрифтов

↑ 7.2 Рендеринг и производительность · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: senior

Зачем это на собесе

Изображения и шрифты — основной вес страницы и главный вклад в LCP и CLS.

Изображения

• форматы: AVIF и WebP вместо JPEG и PNG; SVG для иконок;
• адаптивность: srcset и sizes, <picture> для смены формата;
• width и height для резервирования места (без CLS);
• loading="lazy" для изображений ниже сгиба, fetchpriority="high" для LCP-изображения;
• decoding="async";
• CDN с трансформацией на лету (размер, формат, качество).

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w">
  <img src="hero-800.jpg" width="800" height="450" alt="Панель управления"
       sizes="(max-width: 800px) 100vw, 800px" fetchpriority="high">
</picture>

Шрифты

• WOFF2 — основной формат;
• subset: оставить только нужные символы (кириллица, латиница);
• variable-шрифты вместо набора начертаний;
• font-display: swap (или optional) — не прятать текст;
• preload критичных шрифтов;
• размещать у себя, а не на стороннем домене (меньше DNS и TLS).

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

CLS от шрифтов

Смена fallback на веб-шрифт двигает текст. Подберите fallback с похожими метриками (size-adjust, ascent-override).

Вопросы с ответами

Как ускорить LCP-изображение?

Preload или fetchpriority="high", не ставить lazy, современный формат, правильный размер, CDN.

Зачем font-display: swap?

Чтобы показывать текст запасным шрифтом сразу, а не ждать загрузки (иначе невидимый текст).