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

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

⚡ Кратко

Перепиши дорогую анимацию на transform, добавь картинкам размеры и loading="lazy", прогони Lighthouse и составь чеклист оптимизации.

Задания

  1. Дёшево вместо дорогого. Дана анимация на наведение:
    📄 card.css
    .card { transition: top 200ms ease; position: relative; top: 0; }
.card:hover { top: -10px; }
    Перепишите её так, чтобы тот же эффект (карточка приподнимается) работал без reflow.
    Ожидаемый результат: при наведении карточка плавно сдвигается вверх, а в DevTools → Performance нет жёлтых меток Layout на кадрах анимации.
  2. Стабильная картинка. Есть тег <img src="banner.jpg" alt="Баннер">, из-за которого при загрузке «прыгает» вёрстка. Исправьте так, чтобы убрать скачок (CLS) и отложить загрузку, если баннер ниже первого экрана.
    Ожидаемый результат: место под картинку зарезервировано до её загрузки, контент не прыгает.
  3. Первый экран быстрее. Опишите словами (или кодом в <head>), как вынести Critical CSS и не блокировать рендер остальной таблицей стилей.
  4. Аудит. Прогоните любую свою страницу через DevTools → Lighthouse (режим Performance) и выпишите три метрики: LCP, CLS, INP.
  5. Чеклист. Составьте короткий чеклист оптимизации (5–7 пунктов), который можно применять перед сдачей проекта.
Сверьтесь с разделами 📖 Теория (render pipeline, reflow/repaint) и 💻 Примеры (transform vs top, lazy, форматы). Решения — в ✅ Решения.

Навигация