Оптимизация изображений и шрифтов в React
Используйте next/image или отложенно загружаемый с правильными размерами, форматами (AVIF/WebP) и font-display.
«Оптимизация изображений и шрифтов в React» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Почему изображения так важны
Изображения обычно являются самыми крупными ресурсами на странице. Неоптимизированные изображения ухудшают LCP, замедляют загрузку страниц и увеличивают расходы на передачу данных, особенно на мобильных устройствах.
Компонент изображений Next.js
next/image автоматически оптимизирует изображения: по умолчанию загружает их лениво, поддерживает адаптивный srcSet, современные форматы (WebP/AVIF) и правильные размеры, предотвращающие CLS.
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={600}
priority // preload above-the-fold images
sizes="(max-width: 768px) 100vw, 50vw" // responsive sizing
/>Ленивая загрузка в обычном React
Добавляйте loading='lazy' к обычным элементам <img>. Браузер откладывает загрузку изображений за пределами экрана, пока они не приблизятся к области просмотра при прокрутке.
// Below-the-fold images:
<img src="/product.jpg" alt="Product" loading="lazy" />
// Above-the-fold (hero) — eager to avoid LCP delay:
<img src="/hero.jpg" alt="Hero" loading="eager" fetchPriority="high" />Современные форматы изображений
Используйте WebP или AVIF вместо JPEG/PNG. AVIF на 50% меньше JPEG при том же качестве. Используйте элемент <picture> для выбора формата с резервными вариантами.
<picture>
<source srcSet="/hero.avif" type="image/avif" />
<source srcSet="/hero.webp" type="image/webp" />
<img src="/hero.jpg" alt="Hero" width="1200" height="600" />
</picture>Адаптивные изображения с srcSet
Предоставляйте изображения нескольких размеров, чтобы браузер выбирал подходящее разрешение для экрана и не загружал изображение шириной 2000px для мобильного экрана шириной 400px.
<img
src="/photo-800.jpg"
srcSet="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Photo"
/>Размытые заполнители и каркасы
Показывайте размытый заполнитель, пока изображение загружается, чтобы предотвратить смещение макета и улучшить воспринимаемую производительность.
// With next/image blur placeholder:
<Image
src="/photo.jpg"
alt="Photo"
width={800}
height={600}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // tiny base64 blur
/>Стратегия загрузки шрифтов
Шрифты блокируют отрисовку. Используйте font-display: swap, чтобы показывать резервный шрифт, пока загружается пользовательский, и уменьшить FOIT (эффект невидимого текста).
/* In global CSS: */
@font-face {
font-family: 'MyFont';
src: url('/fonts/MyFont.woff2') format('woff2');
font-display: swap; /* show fallback, swap to MyFont when ready */
}Оптимизация шрифтов в Next.js
next/font загружает Google Fonts во время сборки, размещает их на вашем сервере и применяет font-display: optional, устраняя CLS при замене шрифтов.
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});
export default function RootLayout({ children }) {
return <html className={inter.variable}><body>{children}</body></html>;
}Выбор подмножеств шрифтов
Загружайте только нужные вам подмножества символов. Полный шрифт Unicode может занимать более 1MB, а подмножество для латиницы обычно занимает 30–80KB.
// Google Fonts URL with subset:
https://fonts.googleapis.com/css2?family=Roboto&subset=latin
// next/font:
const roboto = Roboto({ weight: '400', subsets: ['latin'] });Предварительная загрузка важных шрифтов
Предварительно загружайте шрифты, используемые в верхней части страницы, чтобы они загружались параллельно с разбором HTML и уменьшали время блокировки отрисовки.
<link
rel="preload"
href="/fonts/MyFont.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>CDN и кэширование
Размещайте изображения и шрифты в CDN с длительным временем хранения в кэше (Cache-Control: max-age=31536000, immutable). Имена файлов с хешем содержимого гарантируют, что обновлённые файлы обойдут кэш.
Быстрая проверка
Что делает font-display: swap для веб-шрифтов?
Итоги
Используйте next/image для автоматической оптимизации или обычные loading='lazy' и srcSet в React без дополнительных средств. Предоставляйте AVIF/WebP с резервными вариантами через <picture>. Применяйте font-display: swap для веб-шрифтов, используйте next/font для самостоятельного размещения Google Fonts и предварительно загружайте важные ресурсы в верхней части страницы.
Часто задаваемые вопросы
Урок «Оптимизация изображений и шрифтов в React» бесплатный?
Да — полный текст урока «Оптимизация изображений и шрифтов в React» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Оптимизация изображений и шрифтов в React»?
Используйте next/image или отложенно загружаемый с правильными размерами, форматами (AVIF/WebP) и font-display. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Оптимизация изображений и шрифтов в React»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Измерение основных веб-показателей в приложениях React
- Анализ сборки и стратегия разделения кода
- Оптимизация изображений и шрифтов в React
- Снижение INP: оптимизация обработчиков событий