Месяц назад я начал эксперимент: взял реальный сайт, который тормозил, и методично тестировал каждую оптимизацию.
CSS, шрифты, JavaScript, сторонние скрипты - всё по отдельности.
Результат оказался неожиданным.
Половина "обязательных" советов из гайдов вообще не работает. А то, что реально ускоряет - занимает 10 минут.
Вот что я узнал после 30+ тестов в PageSpeed Insights.
С чего началось
Клиент прислал сайт: "Тормозит, исправь".
Открываю PageSpeed:
- Скорость загрузки: 8.3 секунды
- Time to Interactive (TTI): 11 секунд
- Оценка: 23/100 (красная зона)
Классика. Куча плагинов, 15 шрифтов, jQuery, слайдеры, анимации.
План был простой:
Убирать элементы по одному. Замерять. Смотреть, что даёт эффект, а что - пустая трата времени.
Тест 1: CSS и шрифты
Что все советуют:
- Минифицировать CSS
- Удалить неиспользуемые стили
- Объединить файлы
- Оптимизировать шрифты
Что я сделал:
Шаг 1: Убрал лишние шрифты
Было: 15 кастомных шрифтов (разные начертания, языки, иконки)
Стало: 2 шрифта (обычный и жирный)
Результат: −0.4 секунды загрузки
Шаг 2: Минифицировал CSS
Запустил autoprefixer и cssnano.
Результат: −0.1 секунды (почти ничего)
Шаг 3: Отложил загрузку второстепенных стилей
Критичные стили (первый экран) - inline в `<head>`
Остальное - через `<link rel="preload">`
Результат: −1.2 секунды (первый экран загрузился быстрее)
Вывод по CSS:
Что работает:
- Отложенная загрузка стилей (реально ускоряет первый экран)
- Меньше шрифтов (каждый шрифт = задержка)
Что НЕ работает:
- Полная очистка CSS (эффект минимальный, время потрачено зря)
- Объединение файлов "для красоты показателя"
Тест 2: JavaScript и сторонние скрипты
Вот где началась жесть.
Было подключено:
- jQuery
- Слайдер (Slick)
- Анимации (AOS.js)
- Форма обратной связи (сторонний виджет)
- Метрика + Google Analytics
- Чат-бот
Шаг 1: Отключил всё по очереди
Что отключил и Сколько сэкономил
jQuery (не использовался) −0.8 сек
Слайдер (был на одной странице, грузился везде) −1.1 сек
AOS.js (анимации при скролле) −0.5 сек
Чат-бот (грузился 4 секунды!) −4.2 сек
Чат-бот съедал половину времени загрузки.
Владелец сайта даже не знал, что он там есть. Подключили год назад "на пробу" - забыли выключить.
Шаг 2: Отложил загрузку оставшихся скриптов
Метрику и аналитику перенёс в `async`:
Результат: −0.7 секунды
Вывод по JavaScript:
Главный враг скорости - сторонние скрипты.
Не твой код. Не плагины. А виджеты, метрики, чаты - то, что ты подключил "для удобства".
Тест 3: Визуальные эффекты
Остались анимации и переходы.
Что проверил:
- Parallax-эффекты
- Fade-in при загрузке
- Smooth scroll
Результаты:
Эффект, Влияние на скорость, Нужен ли?
Parallax −0.3 сек Нет, никто не замечал
Fade-in −0.1 сек Оставил (выглядит норм)
Smooth scroll 0 сек Оставил (нативный CSS)
Вывод: Большинство эффектов не нужны. Пользователи их не замечают, но они тормозят сайт.
Итоговый результат
Было:
Скорость: 8.3 секунды
TTI: 11 секунд
Оценка: 23/100
Стало:
- Скорость: 1.2 секунды
- TTI: 2.1 секунды
- Оценка: 89/100 (зелёная зона)
Что убрал:
- Чат-бот (никто не использовал)
- jQuery (не нужен был)
- Лишние шрифты
- Ненужные анимации
Что изменил:
- Отложил загрузку CSS
- Перенёс скрипты в `async`
Главный вывод
Скорость сайта зависит не от объёма кода, а от порядка загрузки.
Ты можешь минифицировать CSS сколько угодно - это даст 0.1 секунды.
Но если выключишь один чат-бот - сэкономишь 4 секунды.
Приоритеты:
1. Сторонние скрипты - главный тормоз (метрики, чаты, виджеты)
2. Шрифты - чем меньше, тем быстрее
3. Отложенная загрузка - CSS и JS не для первого экрана
4. Минификация - последнее, что стоит делать
Мой чек-лист ускорения сайта (что реально работает)
1. Проверь сторонние скрипты
Открой DevTools → Network → отсортируй по времени загрузки.
Вопросы:
- Какой скрипт грузится дольше всего?
- Он вообще нужен?
- Можно ли отложить его загрузку?
2. Сократи шрифты
Оставь 2-3 начертания. Остальное - в топку.
3. Отложи загрузку CSS
Критичные стили - inline.
Остальное - через `<link rel="preload">`.
4. Async для JS
Если скрипт не нужен для первого экрана - `async` или `defer`.
5. Убери ненужные эффекты
Parallax, сложные анимации, авто-проигрывание видео - проверь, нужно ли это.
Что дальше
После оптимизации конверсия выросла на 18%.
Почему? Люди не уходили, пока сайт грузится.
Следующий шаг:
Проверить, как скорость влияет на поведение пользователей (время на сайте, глубина просмотра).
Но даже без этого - ускорение в 7 раз за 2 часа работы того стоило.
Главное
Не гонись за идеальными 100/100 в PageSpeed.
Гонись за ощутимым эффектом для пользователя.
Маленькое улучшение первого экрана важнее, чем оптимизация 500 строк CSS, которые никто не видит.
Начни с чек-листа выше - и увидишь результат через час.
📖 Читайте также:
→ От чего на самом деле зависит скорость сайта: начинаю эксперимент
→ JavaScript и сторонние библиотеки: что действительно тормозит сайт
→ CSS и шрифты, ускоряют сайт или создают иллюзию оптимизации