Размеры ассетов (CSS/JS)

Что это?

Ассеты — это CSS-стили и JavaScript-скрипты, которые определяют внешний вид и поведение вашего сайта. Когда они весят слишком много, сайт грузится медленно, как перегруженный грузовик в гору.

Почему размер критически важен?

• Скорость загрузки: каждый лишний килобайт = +50-100мс. 53% пользователей уходят, если сайт грузится дольше 3 секунд.
• Core Web Vitals: большие файлы блокируют отрисовку страницы (LCP, FCP ухудшаются).
• SEO-позиции: медленные сайты теряют позиции, -5-10 мест при плохой скорости.

Целевые показатели

План оптимизации за 15 минут

1. Аудит текущей ситуации

• Откройте Chrome DevTools → Вкладка Network.
• Обновите страницу (Ctrl+F5).
• Отсортируйте файлы по размеру (столбец «Size»).

2. Минификация кода

/* БЫЛО */
.button {
    padding: 10px;
    margin: 5px;
    background: blue;
}

/* СТАЛО */
.button{padding:10px;margin:5px;background:blue}

Инструменты: CSSNano, CleanCSS для CSS; UglifyJS, Terser для JS; автоматизация через Webpack/Gulp.

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

• CSS: PurgeCSS, PurifyCSS
• JS: Webpack Bundle Analyzer
• Результат: -40-60% веса файлов

4. Разделение кода (Code Splitting)

Загружайте только нужные скрипты для каждой страницы:

• Главная: 30 КБ JS
• Личный кабинет: +50 КБ JS (только при входе)

5. Сжатие Brotli/Gzip

• Включите на сервере сжатие текстовых файлов.
• Эффект: дополнительно -60-80% веса.

Частые ошибки

• Загрузка всей библиотеки jQuery для одной функции.
• Неминифицированные файлы на продакшене.
• Использование 5 разных CSS-фреймворков одновременно.
• CSS-файлы блока «О компании» на странице «Контакты».

Реальный пример оптимизации

• До: style.css: 180 КБ, script.js: 250 КБ, общее: 430 КБ → загрузка 3.8с
• После: style.min.css: 42 КБ, script.min.js: 85 КБ, общее: 127 КБ → загрузка 1.2с

Итог

Оптимизация ассетов — самый простой способ ускорить сайт без потери функциональности. Начинайте с самых тяжёлых файлов и используйте автоматизацию — сайт станет быстрее уже сегодня!