Мигающие шрифты — это не дизайн, а сигнал
Наткнулся на обсуждение о том, как шрифты мигают при загрузке — и понял, что это не просто «дизайн», а вопрос, который влияет на доверие и скорость. На мой взгляд, это не мелочь, а часть того, как сайт работает в реальности.
О чём речь и почему я считаю это важным для сайта
Речь о том, как шрифты загружаются: текст сначала показывается в стандартном шрифте, потом мигает — и становится тем, что задумано. Это не просто «неловко» — это сигнал: сайт не готов к показу. На моём опыте, такие мигания сбивают с тонуса, особенно на сайтах с высокой конверсией. Пользователь не видит «ошибки», но уже не доверяет. Это не про дизайн, а про восприятие. Я считаю, что даже мигание — это утрата внимания. И если сайт не стабилен в первые секунды, он проигрывает.
Скорость — не только технический параметр. Это канал, который ИИ-ассистенты и поисковики учитывают. Сайт, который «не думает» о загрузке, воспринимается как неподготовленный. А это уже не про дизайн — это про бизнес.
Как это устроено — что тут вообще происходит
Когда страница грузится, браузер сначала показывает текст на базовом шрифте — serif или sans-serif. Только потом загружаются кастомные шрифты. Пока они не пришли, текст «сбивается». Это называется FOIT — Flash of Invisible Text, или, в нашем случае, Flash of Unstyled Text. В реальности это не «баг», а поведение по умолчанию. Браузер не ждёт шрифты, он показывает то, что есть. И только потом заменяет.
Современные методы позволяют задержать отображение текста до загрузки шрифтов. Это не про «быстрее», а про «правильно». И да, это можно настроить. Но не в каждом проекте это делают — потому что не знают, что это важно.
Как понять, что это касается вашего сайта
Я проверяю это первым делом, когда смотрю сайт. Открываю в браузере, включаю режим отладки, смотрю, как загружается страница. Если текст мигает — значит, шрифты не настроены правильно. Особенно это заметно на загрузке главной страницы, в блоках с текстом. У меня есть проверка: если текст в первые 1–2 секунды меняет шрифт — это сигнал.
Если у сайта есть кастомные шрифты — даже один — это уже повод проверить. Даже если сайт работает. Ибо стабильность начинается с мелочей.
Что с этим делать
Я начинаю с анализа: какие шрифты используются, как подключены. Если через Google Fonts — можно использовать `preconnect` и `display=swap`. Если в файле — нужно проверить, как загружается, и добавить `font-display: swap` в CSS. Это не сложная настройка, но она требует внимания. Если шрифты загружаются с задержкой — можно включить `font-display: optional` для тех, что не критичны.
Объём работы зависит от количества шрифтов и способа подключения. Упрощённо: один шрифт — 15 минут. Пять — чуть больше. Но это не про «сделай» — это про «проверь и закрой». Потому что мигание — это не проблема одного сайта, а симптом.
Что здесь даёт поддержка
На нашей поддержке это закрывается заранее. Мы не ждём, пока пользователь заметит мигание. Проверяем шрифты как часть регулярной проверки скорости. Если шрифт — кастомный, проверяем, как он загружается. Если Google Fonts — добавляем оптимизации по умолчанию. Это не отдельная задача — это часть системы.
Главный итог не «мы починим», а «вы перестанете думать о сайте». Сайт работает, как надо, без лишних мыслей. Мы работаем с 2002 года, более 100 клиентов по всему миру. Приглашаю на бесплатный аудит сайта — проверим, как он ведёт себя в первые секунды.