Урок 35

День 35 | Оптимизация производительности

55 мин

Почему важна производительность?

Производительность сайта напрямую влияет на:

  • ✅ Пользовательский опыт (UX) — медленный сайт раздражает
  • ✅ Конверсию — 53% пользователей покидают сайт, если он загружается дольше 3 секунд
  • ✅ SEO — Google учитывает скорость загрузки в ранжировании
  • ✅ Мобильный трафик — на мобильных важна каждая секунда

Метрики производительности

Google использует Core Web Vitals — набор метрик, которые измеряют реальный опыт пользователя:

1. LCP (Largest Contentful Paint)

Что измеряет: Время загрузки самого большого элемента на странице (изображение, видео, блок текста).

Хороший показатель: Меньше 2.5 секунд

Как улучшить:

  • Оптимизируйте изображения (сжатие, правильный формат)
  • Используйте CDN для статических ресурсов
  • Удалите неиспользуемый CSS/JS
  • Предзагружайте важные ресурсы (<link rel="preload">)

2. INP (Interaction to Next Paint) — новая метрика 2024

Что измеряет: Время от взаимодействия пользователя (клик, нажатие клавиши, тап) до визуального отклика страницы. Заменяет FID с 2024 года.

Хороший показатель: Меньше 200 миллисекунд

Как улучшить:

  • Минифицируйте JavaScript
  • Разбивайте большой JS на части (code splitting)
  • Используйте async/defer для скриптов
  • Удалите неиспользуемый JavaScript
  • Оптимизируйте обработчики событий (debounce, throttle)
  • Используйте Web Workers для тяжёлых вычислений

Примечание: FID устарел в 2024 году. Google теперь использует INP как основную метрику интерактивности.

3. CLS (Cumulative Layout Shift)

Что измеряет: Стабильность макета (насколько элементы "прыгают" при загрузке).

Хороший показатель: Меньше 0.1

Как улучшить:

  • Указывайте размеры для изображений (width, height)
  • Резервируйте место для рекламы, встраиваемого контента
  • Не добавляйте контент поверх существующего
  • Используйте font-display: swap для веб-шрифтов

Lighthouse — инструмент анализа

Lighthouse — это инструмент в Chrome DevTools для анализа производительности, доступности, SEO и лучших практик.

Как использовать:

  1. Откройте DevTools (F12)
  2. Перейдите на вкладку "Lighthouse"
  3. Выберите категории для проверки (Performance, Accessibility, Best Practices, SEO)
  4. Выберите устройство (Mobile или Desktop)
  5. Нажмите "Generate report"
  6. Дождитесь анализа (30-60 секунд)

Что показывает Lighthouse:

  • Общую оценку (0-100)
  • Метрики производительности (LCP, INP, CLS)
  • Рекомендации по улучшению
  • Возможности для оптимизации

Оптимизация CSS

1. Минификация

Vite автоматически минифицирует CSS при сборке для production:

// Запуск сборки для production
npm run build

// Vite автоматически минифицирует CSS и JS

Что делает минификация:

  • Удаляет пробелы и переносы строк
  • Удаляет комментарии
  • Сокращает названия (в некоторых случаях)

2. Критический CSS

Критический CSS — это стили, которые нужны для отображения контента выше сгиба (видимого без скролла).

Как использовать:

  1. Выделите стили, нужные для первого экрана
  2. Вставьте их в <style> в <head>
  3. Остальные стили загружайте асинхронно
<!-- Критический CSS в head -->
<style>
  /* Стили для header, hero секции */
  .header { ... }
  .hero { ... }
</style>

<!-- Остальные стили загружаются асинхронно -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

3. Удаление неиспользуемого CSS

Используйте инструменты для удаления неиспользуемых стилей:

  • PurgeCSS — удаляет неиспользуемый CSS
  • uncss — анализирует HTML и удаляет неиспользуемые стили

Оптимизация JavaScript

1. Минификация

Vite минифицирует JS при сборке для production:

// Было
function calculateTotal(price, quantity) {
  return price * quantity;
}

// Стало (минифицировано)
function a(b,c){return b*c}

2. Code Splitting (разделение кода)

Разбивайте большой JS на части, загружайте только нужное:

// Vite автоматически делает code splitting
// При использовании динамических импортов:

// Вместо
import { heavyFunction } from "./heavy.js";

// Используйте
const { heavyFunction } = await import("./heavy.js");
// Модуль загрузится только когда понадобится

3. Async и Defer

<!-- async — загружается параллельно, выполняется сразу после загрузки -->
<script src="script.js" async></script>

<!-- defer — загружается параллельно, выполняется после парсинга HTML -->
<script src="script.js" defer></script>

Разница:

  • async — выполняется сразу после загрузки (может прервать парсинг HTML)
  • defer — выполняется после парсинга HTML (не прерывает)

Оптимизация изображений

Изображения часто занимают больше всего места. Важно их оптимизировать:

1. Сжатие

  • Используйте инструменты: TinyPNG, ImageOptim, Squoosh
  • Цель: баланс между качеством и размером
  • Обычно можно сжать на 60-80% без видимой потери качества

2. Правильный формат

  • WebP — лучший формат (на 25-35% меньше JPG)
  • AVIF — ещё лучше, но поддержка меньше
  • Используйте <picture> для fallback

3. Lazy Loading

<img src="image.jpg" loading="lazy" alt="...">

Изображение загрузится только когда появится в viewport.

4. Responsive Images

<img 
  srcset="image-small.jpg 400w,
          image-medium.jpg 800w,
          image-large.jpg 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="..."
>

Браузер выберет подходящий размер автоматически.

Resource Hints (подсказки для браузера)

Resource Hints — это специальные теги, которые подсказывают браузеру, как загружать ресурсы эффективнее.

preload (предзагрузка критичных ресурсов)

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="critical.js" as="script">

Браузер загрузит ресурс с высоким приоритетом, даже если он ещё не используется.

prefetch (предзагрузка для будущего)

<link rel="prefetch" href="next-page.html">
<link rel="prefetch" href="image.jpg" as="image">

Браузер загрузит ресурс с низким приоритетом для будущего использования.

preconnect (предварительное подключение)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Браузер установит соединение заранее, ускоряя последующие запросы.

dns-prefetch (предварительный DNS lookup)

<link rel="dns-prefetch" href="https://api.example.com">

Браузер выполнит DNS lookup заранее.

Кэширование

Кэширование позволяет браузеру сохранять файлы и не загружать их повторно.

HTTP заголовки

# .htaccess (Apache)
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

Проверка производительности

Инструменты:

  • Lighthouse (Chrome DevTools) — комплексный анализ
  • PageSpeed Insights (pagespeed.web.dev) — онлайн анализ
  • WebPageTest (webpagetest.org) — детальный анализ
  • Chrome DevTools Performance — профилирование

Практическое задание

  1. Откройте свой сайт в Chrome
  2. Запустите Lighthouse анализ
  3. Посмотрите оценку производительности
  4. Изучите рекомендации по улучшению
  5. Оптимизируйте изображения (сожмите, выберите формат)
  6. Минифицируйте CSS и JS (npm run build)
  7. Добавьте lazy loading к изображениям
  8. Проверьте метрики снова — должны улучшиться!

Что дальше?

Отлично! Теперь вы знаете, как оптимизировать производительность. В следующем уроке мы начнём работу над дипломным проектом, применяя все изученные техники.

Материалы по теме

Мы используем файлы cookie для улучшения работы сайта и персонализации контента. Продолжая использовать сайт, вы соглашаетесь с использованием cookies в соответствии с нашей Политикой конфиденциальности.