Оптимизация фронта — чек-лист

Сводный чек-лист по серии «Оптимизация Frontend приложений (23 совета)» и разборам PageSpeed/Lighthouse у AsForJS. Что реально двигает метрики.

Network (TTFB, FCP)

  • HTTP/2 или HTTP/3.
  • Brotli/gzip — статика всегда сжата.
  • CDN для статики и Cache-Control: immutable.
  • Preconnect / dns-prefetch к критичным origins.
  • Subresource preload для шрифтов и hero-картинок.

Critical rendering path (FCP, LCP)

  • Critical CSS инлайнить в <head>, остальное defer.
  • JS — defer или async, не блокирующий парсинг.
  • Шрифты — font-display: swap, preload .woff2.
  • Hero-картинка — <img fetchpriority="high">.

Bundle size (TBT, JS load)

  • Code splitting по роутам.
  • Tree shaking.
  • Замена тяжёлых зависимостей (Moment → date-fns/dayjs, lodash → lodash-es per-method).
  • Dynamic import для редких функций.

Rendering perf (CLS, INP)

  • width/height на <img> для предотвращения CLS.
  • Виртуализация длинных списков.
  • content-visibility: auto для off-screen блоков.
  • will-change точечно (не на всём подряд).
  • Throttle/debounce для частых событий.

JavaScript runtime (TBT, INP)

  • Web Worker для тяжёлых вычислений.
  • Не парсить JSON > 1MB на main thread.
  • requestIdleCallback для неприоритетной работы.
  • requestAnimationFrame для визуальных апдейтов.

Images

  • AVIF + WebP fallback.
  • srcset / sizes для responsive.
  • Lazy loading: loading="lazy" для off-screen.
  • Imgproxy / Cloudinary для on-demand resize.

Источники

См. также