Перейти к основному содержимому

Ресурсы

Resource Hints​

SHOULD​

  • preload для критичных ресурсов текущей навигации.
  • prefetch для ресурсов будущих навигаций.
  • preconnect для внешних доменов на критическом пути.

FORBIDDEN​

  • Использовать hints без измеримого эффекта.

Next.js (Pages Router): preconnect​

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Next.js (App Router): preconnect​

// app/head.tsx
export default function Head() {
  return (
    <>
      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
    </>
  );
}

Изображения​

MUST​

  • Использовать современные форматы (WebP, AVIF).
  • Размер не более 2x от фактического отображения.
  • Для внеэкранных изображений — lazy loading.

FORBIDDEN​

  • Lazy-load для критических изображений первого экрана.
  • Изображения без размеров (приводит к CLS).

Next.js: next/image​

import Image from 'next/image';

export function Hero() {
  return (
    <Image
      src="/hero.avif"
      alt="Product hero"
      width={1200}
      height={640}
      priority
    />
  );
}

Astro: astro:assets​

---
import { Image } from 'astro:assets';
import hero from '../assets/hero.jpg';
---

<Image src={hero} alt="Product hero" width={1200} height={640} format="webp" />

Шрифты​

MUST​

  • WOFF2 + font-display: swap.
  • Использовать subsetting (только нужные глифы).

SHOULD​

  • Подключать локально через Google Webfonts Helper или Transformer.

Next.js: next/font​

// app/layout.tsx
import { Inter } from 'next/font/google';

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html className={inter.className}><body>{children}</body></html>;
}

Сжатие и передача данных​

MUST​

  • Все текстовые ресурсы сжимаются на сервере.
  • Используются современные алгоритмы (gzip, brotli).

Диаграмма: критический путь​

Процедуры контроля (Code Review)​

Ревьюер должен убедиться, что:​

  • images оптимизированы и имеют размеры
  • LCP-изображения не lazy-load
  • шрифты настроены через WOFF2 + swap
  • resource hints применяются осознанно