Все говорят: "Удали неиспользуемый CSS, и сайт полетит!" Я удалил. Почистил файлы, убрал мёртвые стили, оптимизировал всё, что можно. Результат? Скорость выросла на 0.1 секунды.
Зато когда убрал один кастомный шрифт - сайт ускорился на полторы секунды. Вот вам и "главная оптимизация".
Сейчас покажу, что реально тормозит загрузку сайта, а что просто создаёт иллюзию работы.
Что я тестировал
Задача была простой: убрать всё лишнее из CSS, не ломая дизайн. Проверить, насколько это ускорит сайт.
Сделал три вещи:
Удалил неиспользуемые CSS-правила - почистил стили, которые висят мёртвым грузом.
Отложил загрузку второстепенных стилей - вынес некритичный CSS из основного потока.
Поэкспериментировал со шрифтами - убрал лишние начертания, заменил кастомные шрифты системными.
Каждый шаг - отдельный тест с замерами до и после. Никаких комплексных изменений.
Неиспользуемый CSS: много шума из ничего
PageSpeed Insights кричит: "У вас 200 КБ неиспользуемого CSS! Удалите!" Звучит страшно.
Я удалил. Прошёлся по всем файлам, убрал стили, которые не применяются ни к одному элементу на странице. Размер CSS-файла уменьшился с 280 КБ до 180 КБ.
Казалось бы, серьёзная оптимизация. На бумаге - да. На практике?
Визуальная загрузка почти не изменилась. Страница появлялась в браузере с той же скоростью.
Показатели улучшились на 2-3 балла в PageSpeed. Технически лучше, но пользователь этого не почувствует.
Первый экран всё равно ждал других ресурсов - шрифты, JavaScript, картинки. CSS был готов раньше, но это ничего не решило.
Вывод: чистый CSS - это хорошо для порядка. Но сам по себе он редко даёт заметное ускорение.
Отложенная загрузка стилей: уже лучше
Следующий шаг: вынести второстепенные стили из критического пути.
Что это значит? Браузер грузит только те стили, которые нужны для первого экрана. Остальные - потом, когда основное уже отрисовалось.
Результат интереснее:
Первый экран появился на 0.4 секунды быстрее. Пользователь видит контент раньше, даже если страница ещё грузится.
Страница ощущается более отзывчивой. Это субъективно, но важно. Люди начинают взаимодействовать с сайтом раньше.
Метрики показали умеренное улучшение - Time to Interactive (TTI) сократилось на 15%.
Но эффект сильно зависит от структуры страницы. Если у вас простой лендинг - отложенная загрузка даст мало. Если сложный сайт с кучей блоков - результат заметнее.
Шрифты: вот где скрывался главный тормоз
Самое интересное началось, когда я добрался до шрифтов.
На сайте было три кастомных шрифта:
- Основной текст (4 начертания: regular, italic, bold, bold-italic)
- Заголовки (2 начертания)
- Декоративный для акцентов (1 начертание)
Итого: 7 файлов шрифтов, каждый по 50-150 КБ. В сумме - около 600 КБ.
Я сделал три теста:
Тест 1: убрал лишние начертания. Оставил только regular и bold. Italic и декоративный шрифт - долой.
Результат: минус 300 КБ, скорость выросла на 0.8 секунды.
Тест 2: заменил кастомные шрифты системными (Arial, Georgia, sans-serif).
Результат: страница стала загружаться на 1.5 секунды быстрее. Да, дизайн стал проще. Но скорость - wow.
Тест 3: оставил один кастомный шрифт, остальное - системные.
Результат: золотая середина. Скорость выросла на 1 секунду, дизайн сохранил характер.
Почему шрифты так сильно влияют?
Браузер не может отрисовать текст, пока шрифт не загрузится. Если шрифт тяжёлый или сервер медленный - страница висит с пустыми блоками текста.
Это называется FOIT (Flash of Invisible Text) - вспышка невидимого текста. Пользователь видит макет, но не видит контента. Раздражает и убивает скорость.
Конкретные цифры: до и после
Стартовые показатели:
- Размер CSS: 280 КБ
- Размер шрифтов: 600 КБ
- Время загрузки: 3.2 секунды
- PageSpeed: 68 баллов
После оптимизации CSS:
- Размер CSS: 180 КБ
- Время загрузки: 3.1 секунды (-0.1 сек)
- PageSpeed: 71 балл
После отложенной загрузки стилей:
- Время загрузки: 2.7 секунды (-0.5 сек от старта)
- PageSpeed: 74 балла
После оптимизации шрифтов:
- Размер шрифтов: 150 КБ (оставил один кастомный + системные)
- Время загрузки: 1.7 секунды (-1.5 сек от старта!)
- PageSpeed: 82 балла
Разница очевидна. CSS дал минимум, шрифты - максимум.
Главные выводы этапа
Очистка CSS полезна, но не критична. Если у вас 500 КБ неиспользуемых стилей - да, почистите. Но чудес не ждите.
Отложенная загрузка стилей работает, но эффект зависит от структуры сайта. На сложных страницах даст больше.
Шрифты - главный скрытый тормоз. Один кастомный шрифт с пятью начертаниями может тормозить сайт сильнее, чем весь CSS вместе взятый.
Визуальные мелочи дороже кода. Красивый декоративный шрифт стоит секунды загрузки. Стоит ли оно того - решать вам.
CSS-оптимизация создаёт иллюзию работы. Вы чистите стили, объединяете файлы, минифицируете - чувствуете себя профи. А на деле скорость растёт на доли секунды. Зато стоит убрать пару лишних шрифтов - и сайт взлетает. Я не призываю отказаться от красивого дизайна. Но если скорость важна - подумайте дважды, прежде чем добавлять третий кастомный шрифт с восемью начертаниями.
Как думаете, стоит ли жертвовать красивыми шрифтами ради скорости? Или лучше медленный, но стильный сайт? Пишите в комментариях.
📖 Читайте также:
→ Я ускорил сайт и понял главное: что действительно работает
→ JavaScript и сторонние библиотеки: что действительно тормозит сайт
→ От чего на самом деле зависит скорость сайта: начинаю эксперимент