Этап 12 из 19 · ≈ 8 ч

Скорость загрузки

Основа с Middle

Меньше байтов, раньше важное — сжатие, кэш, картинки, шрифты, разделение кода.

Что важно знать

  • Меньше JavaScript: разделение кода по маршрутам, ленивая загрузка тяжёлых компонентов, отказ от лишних библиотек — JS дороже картинок того же размера, его надо ещё разобрать и выполнить.
  • Картинки: современные форматы (AVIF, WebP), правильный размер через srcset, loading="lazy" ниже первого экрана, а главной картинке — fetchpriority="high". Явные width и height против сдвигов вёрстки.
  • Шрифты: font-display: swap, подмножества символов, предзагрузка основного начертания.
  • Кэширование: хеши в именах файлов и долгий Cache-Control, CDN.
  • Сжатие: Brotli или gzip на сервере.
  • Подсказки: preconnect к сторонним доменам, preload критичных ресурсов.
  • Критический путь: CSS блокирует отрисовку, синхронные скрипты — разбор HTML.
  • Серверный рендеринг или статическая генерация ускоряют первый показ содержимого.

Критерии освоения

Middle ≈ 8 ч

  • Улучшает LCP — приоритет главной картинки, современные форматы, меньше блокирующих ресурсов
  • Убирает сдвиги вёрстки (CLS) размерами картинок и резервированием места
  • Разделяет код по маршрутам и загружает тяжёлое лениво

Практика. Улучшить LCP и CLS страницы до «хороших» значений по Lighthouse на мобильном профиле и описать каждое изменение.

Senior ≈ 4 ч

  • Вводит бюджеты производительности с проверкой в CI

Практика. Внедрить size-limit и Lighthouse CI с бюджетами для ключевых страниц.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Чем отличаются атрибуты async и defer у тега script?Junior

Обычный <script> останавливает разбор HTML до загрузки и выполнения. defer — загрузка параллельно, выполнение после разбора HTML, по порядку подключения. async — загрузка параллельно, выполнение сразу по готовности, в произвольном порядке.

Полный разбор
Чем отличаются HTTP/1.1, HTTP/2 и HTTP/3?Middle

HTTP/1.1 — текст, один запрос за раз в соединении. HTTP/2 — бинарные кадры, много потоков в одном TCP-соединении. HTTP/3 — то же поверх QUIC (UDP), без общей блокировки при потере пакета.

Полный разбор
Что такое Core Web Vitals и как их улучшить?Middle

Три метрики Google, измеряемые на реальных пользователях: LCP — когда отрисован главный элемент (хорошо ≤ 2,5 с), INP — задержка реакции на действия пользователя (≤ 200 мс), CLS — сдвиги вёрстки при загрузке (≤ 0,1). LCP улучшают быстрым ответом сервера…

Полный разбор
Что такое разделение кода (code splitting) и ленивая загрузка?Middle

Вместо одного большого бандла код делят на части, которые грузятся по необходимости: по маршрутам (страница настроек не нужна на главной), по тяжёлым виджетам (редактор, графики, карта). Механизм — динамический import(), сборщик выделяет модуль в отдельный…

Полный разбор
Как оптимизировать изображения на сайте?Junior

Картинки — часто самая тяжёлая часть страницы. Приёмы: современные форматы (AVIF, WebP; SVG для иконок), размер под экран через srcset и sizes (телефону не нужна картинка 3000px), сжатие, loading="lazy" для картинок ниже первого экрана, width и height (или…

Полный разбор
Как разделить код по маршрутам через lazy и Suspense?Middle

lazy(() => import("./Page")) превращает компонент в отдельный чанк, который загрузится при первом показе. Пока он грузится, ближайшая &lt;Suspense fallback&gt; показывает запасной интерфейс. Делить код логично по маршрутам и тяжёлым редко нужным частям…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования