«Я хотела “ускорить загрузку шрифтов”, а сайт стал выглядеть “прыгающим”: рассказываю, как оптимизировала шрифты без 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 с файловым менеджером, графиками нагрузки и возможностью развернуть тестовый поддомен дала мне безопасную среду для экспериментов без риска испортить конверсии.
Читать далее ««Я хотела “ускорить загрузку шрифтов”, а сайт стал выглядеть “прыгающим”: рассказываю, как оптимизировала шрифты без CLS и потери качества»»