Картинки, шрифты и скрипты: классическое трио производительности

Эта тема — про производительность. Картинки как канал трафика — alt, поиск по изображениям, схема ImageObject — разобраны в Image SEO.

Картинки. next/image даёт lazy loading, AVIF/WebP и правильные размеры — но только при честной настройке:

import Image from "next/image";

// LCP-картинка: priority, без lazy loading
<Image
  src="/hero.jpg"
  alt="Команда работает над роадмапом продукта"
  width={1200}
  height={630}
  priority
  sizes="(max-width: 768px) 100vw, 1200px"
/>;

• priority — только на LCP-картинке (обычно hero). Всё ниже первого экрана остаётся lazy.
• sizes должен соответствовать вашей вёрстке — без него мобильные устройства качают файлы десктопного размера.
• alt описывает картинку и для скринридеров, и для поиска по картинкам. Пустой alt="" — только для чисто декоративных изображений.

Шрифты. next/font селф-хостит Google Fonts, убирает сторонний запрос и сам ставит font-display: swap:

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin", "cyrillic"], display: "swap" });

Скрипты. Каждый сторонний скрипт конкурирует с вашим контентом за главный поток:

import Script from "next/script";

// Аналитика: после того как страница стала интерактивной
<Script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXX" strategy="afterInteractive" />

// Чат-виджеты, тепловые карты: только когда браузер простаивает
<Script src="https://widget.example.com/chat.js" strategy="lazyOnload" />

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

Чеклист:

• У hero-картинки есть priority, корректный sizes и осмысленный alt
• Все шрифты через next/font, никакого внешнего font-CSS
• Сторонние скрипты на afterInteractive или lazyOnload
• Картинки не вызывают сдвигов вёрстки (width/height всегда заданы)