«Я хотела “ускорить загрузку шрифтов”, а сайт стал выглядеть “прыгающим”: рассказываю, как оптимизировала шрифты без CLS и потери качества»

У меня был лендинг онлайн‑курса по дизайну: WordPress, кастомные шрифты (Montserrat + специальный акцидентный шрифт для заголовков), 15 страниц, формы заявок, всплывающие окна с промокодами, анимации при скролле. Клиент сказал: «На мобильных страница “прыгает” — сначала вижу простой текст, потом подгружается красивый шрифт, и весь блок сдвигается. Из‑за этого люди закрывают страницу. Сделай так, чтобы шрифт был сразу, но сайт не грузился по 10 секунд». Я кивнула, а внутри всё сжалось: «А если предзагружу все шрифты — они займут полмегабайта и убьют скорость? Если оставлю как есть — будет высокий CLS, и Google будет понижать позиции. Если уберу кастомные шрифты — сайт потеряет фирменный стиль».

До этого я либо вообще не трогала шрифты (думала: «Это задача дизайнера»), либо делала «по советам из интернета»: добавляла preload на все файлы, включала все начертания (Regular, Medium, Bold, Italic, Black и т. д.), убирала font-display — и в итоге получала либо «исчезновение текста» (FOIT), либо дикие скачки верстки (CLS). В одном проекте после такой оптимизации CLS вырос до 0.5 (критическое значение), а LCP ухудшился на 2–3 секунды. Тогда я поняла: оптимизация шрифтов — это не «включить preload», а выбор нужных начертаний, подмножеств, правильная стратегия загрузки и контроль метрик. Панель Timeweb с файловым менеджером, графиками нагрузки и возможностью развернуть тестовый поддомен дала мне безопасную среду для экспериментов без риска испортить конверсии.

Чего я боялась больше всего

Перед тем как трогать шрифты, я честно выписала свои главные страхи:

Убить скорость загрузки. Что предзагрузка тяжёлых шрифтов сделает LCP хуже, и люди будут уходить до появления контента.
Получить высокий CLS. Что при подгрузке шрифта блок будет «прыгать», и Core Web Vitals покажут критические значения.
Потерять фирменный стиль. Что уберу лишние начертания, и заголовки станут выглядеть не так, как задумано дизайнером.
Сломать отображение на мобильных. Что на слабых телефонах шрифты будут грузиться долго, а без них текст станет нечитаемым.
Не понять, что реально помогает. Что буду менять настройки, а метрики останутся прежними или станут хуже.

С этим списком я пошла в панель Timeweb и составила план: бэкап → тест на копии → аудит шрифтов → оптимизация файлов → настройка загрузки → проверка метрик → автоматизация контроля.

Шаг 1: сделать бэкап и подготовить тестовую площадку

В панели Timeweb я:

Нажала «Создать резервную копию» для файлов и базы. Статус «Готов» — теперь я могла откатиться за 10–15 минут.
Создала поддомен test-design.site.ru и развернула туда копию сайта.
Настроила в wp-config.php новый домен и проверила, что формы и всплывающие окна работают.
Зафиксировала текущие метрики: LCP, CLS, размер страницы, время загрузки шрифтов, CPU сервера.

Это была моя «песочница»: любые эксперименты со шрифтами я делала сначала здесь, а не на основном сайте.

Шаг 2: провести аудит шрифтов и понять, что реально используется

Я выписала все шрифты и начертания, которые реально встречаются на сайте:

Montserrat: на лендинге использовались только Regular (основной текст), Medium (подзаголовки) и Bold (акценты). Остальные (Light, Black, SemiBold и т. п.) нигде не встречались.
Акцидентный шрифт: только Bold для заголовков, остальные начертания не применялись.
Иконки и спецсимволы: в кастомных шрифтах были сотни глифов, но реально использовались только базовые буквы, цифры и несколько спецсимволов.

Для проверки я использовала:

Просмотр стилей в браузере (F12 → Elements → Computed).
Поиск по CSS: искала, где прописаны font-weight и какие начертания реально применяются.
Визуальный осмотр страниц: отмечала, где какой вес шрифта виден.

Так я поняла, что можно смело убрать 60–70 % файлов шрифтов без потери стиля.

Шаг 3: оптимизировать файлы шрифтов и уменьшить их вес

Я действовала по такой схеме:

Конвертация в WOFF2. Все шрифты я конвертировала в формат WOFF2 — он даёт лучшее сжатие и поддерживается всеми современными браузерами.
Подмножества (subset). Для акцидентного шрифта я оставила только латиницу и кириллицу, убрав лишние символы (иероглифы, математические знаки и т. п.). Для этого использовала онлайн‑инструменты и консольные утилиты, а готовые файлы загружала через файловый менеджер Timeweb.
Удаление лишних начертаний. Убрала Light, Black, SemiBold — они нигде не использовались.
Контроль размера. В файловом менеджере Timeweb я видела точный размер файлов: суммарный вес шрифтов упал с ~420 КБ до ~130 КБ.

Важно: я не удаляла шрифты «на глаз», а сверялась с реальным использованием на макетах и в CSS.

Шаг 4: настроить правильную загрузку шрифтов и избежать CLS

Я отказалась от идеи «предзагрузить всё» и сделала точечную стратегию:

font-display: swap для всех кастомных шрифтов. Это решает проблему FOIT: текст сразу отображается системным шрифтом, а потом плавно заменяется на кастомный. Пользователь видит контент сразу, а «прыжки» верстки становятся минимальными.
Предзагрузка только критических шрифтов. Я предзагрузила только Montserrat Bold (заголовки первого экрана) и акцидентный Bold — они влияют на первый экран и LCP. Остальные начертания загружались «лениво» или по мере необходимости.
Отказ от загрузки всех вариаций сразу. Вместо того чтобы подключать все файлы в <head>, я оставила в основном CSS только то, что нужно для первого экрана, а остальное — через медиа‑запросы или асинхронно.

Пример безопасного подключения:

И в HTML только для самого важного:

Шаг 5: проверить, что нет «прыжков» и скорость реально выросла

На тестовой версии я прошла по чек‑листу:

PageSpeed Insights. Проверила LCP и CLS до и после: CLS должен снизиться, LCP — не вырасти.
Визуальная проверка на мобильных. Открывала сайт на телефоне с медленным интернетом (или в браузере с эмуляцией 3G) — текст должен быть читаемым сразу, а кастомный шрифт подгружаться без резких сдвигов.
Проверка FOIT/FOUT. Не должно быть «исчезновения» текста или резких замен, которые ломают восприятие.
Консоль браузера (F12 → Console). Не должно быть ошибок загрузки шрифтов.
Лог доступа и метрики в Timeweb. Если предзагрузка создаёт лишнюю нагрузку, это видно по всплескам запросов и CPU.

Только когда все сценарии работали стабильно, я переносила настройки на основной сайт.

Шаг 6: включить оптимизацию на основном сайте и проконтролировать метрики

На основном сайте я:

Заменила файлы шрифтов в папке /fonts/ через файловый менеджер Timeweb.
Обновила CSS и HTML с новыми подключениями и font-display: swap.
Проверила ключевые страницы: главная, страница тарифа, форма заявки.
Посмотрела графики нагрузки в панели Timeweb: CPU должен быть стабильным, а количество запросов — не расти из‑за лишней предзагрузки.
Замерила Core Web Vitals: CLS не должен превышать 0.1, а LCP — оставаться в зелёной зоне.

Результат: суммарный вес шрифтов снизился с ~420 КБ до ~130 КБ, CLS упал с 0.45 до 0.08, LCP улучшился на ~1.2 секунды, а визуально сайт перестал «прыгать»: текст сразу читаемый, кастомные шрифты подтягиваются плавно и не ломают верстку.

Где я чуть не ошиблась (и что панель подсказала)

Хотела предзагрузить все шрифты сразу. Думала: «Так будет быстрее». Поддержка подсказала: «Предзагрузка всех файлов увеличивает вес страницы и может ухудшить LCP. Лучше только критические начертания для первого экрана».
Оставила все начертания «на всякий случай». Думала: «Вдруг дизайнер захочет использовать SemiBold». Но на практике это не пригодилось, а вес шрифтов вырос в 2 раза. Панель и замеры помогли увидеть, что лишние файлы не нужны.
Игнорировала font-display. Думала: «Главное — чтобы шрифт был красивым». Но без swap пользователи видели пустой экран, а CLS становился критическим.
Не проверяла на мобильных с плохим интернетом. Думала: «Если на десктопе всё ок, значит, везде ок». Но именно на слабых телефонах «прыжки» были самыми заметными. Панель с графиками и эмуляция 3G помогли быстро найти проблему.
Не следила за логами после замены файлов. Думала: «Файлы загрузились, значит, всё работает». Но в access.log были ошибки 404 по старым путям к шрифтам — это могло ломать отображение.

Что реально помогло на Timeweb

Бэкапы в один клик. Я могла откатиться за минуты, если шрифты ломали верстку или увеличивали CLS.
Файловый менеджер. Удобно видеть точный размер файлов, быстро заменять шрифты и проверять, что пути к ним корректны.
Поддомены для тестов. Развернула копию сайта и проверяла шрифты без риска для конверсий.
Графики нагрузки (CPU, запросы). Сразу видно, даёт ли предзагрузка реальный эффект или создаёт лишнюю нагрузку.
Логи (access.log, error.log). В них видно, какие файлы шрифтов загружаются, есть ли ошибки 404 и не пытаются ли браузеры тянуть старые версии.
Поддержка. Когда сомневалась, сколько начертаний оставить и как правильно настроить font-display, в чате быстро подсказывали безопасный вариант.

Практические советы, чтобы оптимизировать шрифты без потери качества и конверсий

Если вы тоже оптимизируете шрифты:

Всегда делайте бэкап перед заменой файлов. На Timeweb это пара кликов, а откатиться можно за минуты.
Сначала тестируйте на копии сайта. Любые изменения шрифтов — только на тестовой версии.
Оставляйте только реально используемые начертания. Проверьте CSS и макеты: если начертание нигде не встречается — удалите его.
Конвертируйте шрифты в WOFF2 и используйте подмножества. Это сильно снижает вес без потери внешнего вида.
Используйте font-display: swap. Так текст будет виден сразу, а кастомные шрифты подтянутся без FOIT.
Предзагружайте только критические шрифты для первого экрана. Не делайте preload для всех файлов сразу.
Проверяйте CLS и LCP до и после. Если CLS растёт — значит, шрифты ломают верстку, и нужно менять стратегию загрузки.
Тестируйте на мобильных и при медленном интернете. Именно там «прыжки» и задержки наиболее заметны.
Контролируйте логи и графики нагрузки. Если появляются ошибки 404 или растёт CPU — разбирайтесь сразу.
Держите реестр шрифтов и их использования. Какие начертания и где применяются — это экономит часы при будущих доработках.

Сейчас я спокойно оптимизирую шрифты: знаю, что у меня есть бэкап, тестовая площадка, понятные инструменты контроля и чёткий план, чтобы не потерять стиль и конверсии. А клиент получает быстрый сайт без «прыжков»: текст сразу читаемый, кастомные шрифты выглядят как задумано, CLS в норме, а LCP не страдает. И всё это благодаря тому, что я перестала надеяться на «одну волшебную настройку» и начала действовать системно. А Timeweb даёт для этого все нужные инструменты: бэкапы, поддомены, файловый менеджер, графики, логи и поддержку, которая помогает не сломать конверсии в погоне за скоростью.