Урок 49. Обзор урока: Оптимизация и производительность

📁 Раздел: Качество вёрстки ⏱️ Время изучения: ~85 мин 🎯 Сложность: Продвинутая
#loading #picture #font-display #will-change

⚡ Кратко

Производительность — это меньше байтов по сети (минификация, PurgeCSS, WebP/AVIF, lazy-load) и меньше работы для браузера (transform/opacity вместо reflow). Измеряем через Lighthouse и Core Web Vitals (LCP/CLS/INP).

О чём урок

Оптимизация и производительность: как ускорить загрузку и отрисовку страницы. Разбираем render pipeline (style → layout → paint → composite), разницу reflow vs repaint, дешёвые анимации на transform/opacity, Critical CSS и минификацию, оптимизацию изображений (WebP/AVIF, loading="lazy"), шрифты (font-display) и метрики Core Web Vitals.

Дальше — финальный урок 50, справочники и активация курса.

Ключевые понятия

  • render pipeline (style/layout/paint/composite)
  • reflow / repaint
  • transform / opacity (дёшево)
  • will-change
  • Critical CSS
  • минификация / PurgeCSS
  • loading="lazy"
  • WebP / AVIF / <picture>
  • font-display: swap
  • Lighthouse · Core Web Vitals (LCP, CLS, INP)

Структура урока

📖 Теория

Понятия, правила и практическая логика.

🔖 Справочник

Инструменты проверки и короткие примеры.

💻 Примеры

Рабочая HTML/CSS связка.

⚖️ Старый vs Новый

Антипаттерн и исправление.

📝 Задания

Практика для самостоятельной проверки.

✅ Решения

Один из корректных вариантов.

🐛 Ошибки

Типовые проблемы и исправления.

🏠 Домашнее задание

Итоговая мини-практика урока.

🔗 Ресурсы

Документация и повторение.

Навигация