Чекліст продуктивності для production

Перевірите застосунок перед релізом за чеклістом зображень, шрифтів, бандла, метрик і production-налаштувань.

Мета перевірки

Перед релізом потрібно перевірити не лише час завантаження сторінки, а весь ланцюжок:

браузер отримує HTML;
завантажує критичні ресурси;
відображає найбільший елемент першого екрана;
реагує на дії користувача;
не змінює розмітку під час завантаження;
не завантажує зайвий JavaScript, CSS, зображення та шрифти.

Перевірку виконуйте на production-збірці:

bash

npm run build
npm run start

tsx

// app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({
  subsets: ["latin", "cyrillic"],
  display: "swap",
  preload: true,
  variable: "--font-inter",
});

export const metadata: Metadata = {
  title: "Каталог",
  description: "Каталог товарів",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="uk">
      <body className={inter.variable}>{children}</body>
    </html>
  );
}

tsx

// app/page.tsx
import Image from "next/image";

export default function HomePage() {
  return (
    <main>
      <section className="hero">
        <div>
          <p className="eyebrow">Нова колекція</p>
          <h1>Оптимізований каталог</h1>
          <p>
            Критичне зображення має відомі розміри та завантажується без
            зайвої затримки.
          </p>
        </div>

        <Image
          src="/images/hero.webp"
          alt="Предмети з нової колекції"
          width={1280}
          height={800}
          sizes="(max-width: 768px) 100vw, 50vw"
          preload
        />
      </section>

      <section className="gallery" aria-label="Популярні товари">
        <Image
          src="/images/product-1.webp"
          alt="Чорний рюкзак"
          width={640}
          height={480}
          sizes="(max-width: 768px) 100vw, 33vw"
        />

        <Image
          src="/images/product-2.webp"
          alt="Шкіряний гаманець"
          width={640}
          height={480}
          sizes="(max-width: 768px) 100vw, 33vw"
        />
      </section>
    </main>
  );
}

javascript

// next.config.js
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

/** @type {import("next").NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  poweredByHeader: false,
};

module.exports = withBundleAnalyzer(nextConfig);

tsx

"use client";

import dynamic from "next/dynamic";
import { useState } from "react";

const Chart = dynamic(() => import("./chart"), {
  loading: () => <p>Завантаження графіка…</p>,
});

export default function StatisticsPanel() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <section>
      <button type="button" onClick={() => setIsOpen((value) => !value)}>
        {isOpen ? "Сховати статистику" : "Показати статистику"}
      </button>

      {isOpen && <Chart />}
    </section>
  );
}

Чекліст продуктивності для production

Мета перевірки

Базовий чекліст перед вимірюванням

Перевірка зображень

Формат і розмір

LCP-зображення

Приклад оптимізованої сторінки

Типові проблеми із зображеннями

Перевірка шрифтів

Перевірка JavaScript і бандла

Аналіз production-збірки

Bundle Analyzer

Dynamic import

Core Web Vitals і метрики

Лабораторні вимірювання

Польові вимірювання

Що перевірити для кожної метрики

LCP

INP

CLS

Production-налаштування Next.js

Збірка та запуск

Standalone output

Стиснення та проксі

Кешування

Сторонні скрипти

Фінальна перевірка перед релізом

Типові помилки

Summary