Оптимизация шрифтов в Elementor: как ускорить сайт на WordPress

Почему лишние шрифты замедляют сайт

Каждое семейство шрифта и его начертание могут быть отдельным ресурсом. Например, для основного текста может использоваться Roboto 400, для подзаголовков — Roboto 600, а для кнопок случайно остаётся другое семейство с начертанием 700. В результате страница создаёт ненужные запросы, даже если визуальная разница между шрифтами почти незаметна.

Шрифты особенно заметно влияют на мобильные устройства: там соединение медленнее, задержка сети выше, а ресурсы браузера более ограничены. Если нужный шрифт загружается с задержкой, сначала текст может отображаться системным шрифтом, а затем изменить свою ширину. Из-за этого контент смещается, и пользователь видит скачок текста.

Важно оценивать не только размер файлов, но и количество вариантов, которые страница действительно запрашивает. Один удачно выбранный шрифт с двумя начертаниями часто практичнее, чем три похожих семейства с несколькими начертаниями каждого.

• для основного текста чаще всего достаточно 400 или 400–500;
• для заголовков обычно достаточно 600 или 700;
• курсив, 300, 500 и другие варианты стоит оставлять только при реальной необходимости;
• отдельно проверьте шрифты, которые используются в кнопках, меню, формах и всплывающих окнах.

Проведите аудит шрифтов в Elementor

Начните с глобальных настроек. В редакторе Elementor откройте настройки сайта и раздел глобальных шрифтов. Названия пунктов могут немного отличаться в зависимости от версии Elementor или активной темы, но логика остаётся одинаковой: здесь задаются основные стили для заголовков, основного текста, акцентных и дополнительных элементов.

Проверьте, какие семейства и начертания назначены каждой роли. Если для основного текста используется одно семейство, а для заголовков — другое, это может быть оправдано дизайном. Однако три-четыре похожих шрифта без чёткого назначения обычно только увеличивают количество ресурсов и усложняют поддержку сайта.

После этого проверьте отдельные виджеты. Локальные настройки виджета могут переопределять глобальные стили. Именно там часто сохраняются случайные значения: другое семейство, жирность 800 или отдельный размер для мобильной версии.

• сравните глобальные шрифты с настройками заголовков и текстовых виджетов;
• проверьте кнопки, меню, формы, вкладки, попапы и шаблоны Theme Builder;
• найдите виджеты с ручным выбором семейства или начертания;
• удалите локальные переопределения, если они больше не нужны;
• убедитесь, что мобильные настройки изменяют размер, а не добавляют лишнее семейство или начертание.

Как сократить количество начертаний

До внесения изменений составьте простую типографическую систему. Например: один шрифт для всего текста, 400 для абзацев, 600 для заголовков и, при необходимости, 700 для отдельных акцентов. Такая схема не обязательна, но помогает избежать ситуации, когда у каждого виджета своё начертание.

Не стоит механически заменять все значения. Если в фирменном стиле используются тонкий шрифт или курсив для важных элементов, сначала проверьте дизайн на реальных страницах. Чрезмерное упрощение может ухудшить иерархию заголовков, контрастность и читаемость.

После изменения глобальных шрифтов проверьте страницы с длинными заголовками, таблицами, карточками и кнопками. Другое начертание может изменить ширину текста и переносы строк, поэтому важно проверять не только главную страницу.

• оставляйте только те начертания, которые используются в макете;
• не используйте 400, 500, 600 и 700 просто «на всякий случай»;
• не подключайте отдельный шрифт для кнопок, если он не даёт заметного дизайнерского преимущества;
• после очистки проверьте все состояния: обычное, при наведении, активное и мобильное.

Настройте Custom Fonts без лишних файлов

Если сайт использует собственные шрифты, загружайте только те файлы, которые действительно нужны. В большинстве современных случаев достаточно формата WOFF2: он хорошо сжимается и поддерживается актуальными браузерами. Старые форматы могут понадобиться только из-за конкретных требований к совместимости.

Для каждого семейства проверьте, какие файлы добавлены в Custom Fonts: normal, italic, разные начертания и языковые наборы. Файл для 300 не нужен, если начертание 300 нигде в Elementor не используется. Аналогично не стоит загружать italic, если курсив не применяется в тексте или дизайне.

Осторожно работайте с сабсетами и кириллицей. Если шрифт подготовлен только для латиницы, украинские символы могут отображаться системным шрифтом или некорректно. Перед удалением языковых наборов проверьте украинские, английские и другие символы, которые используются на сайте.

Также убедитесь, что одна и та же гарнитура не подключается одновременно из нескольких источников — например, как локальный Custom Font и через внешний сервис или настройки темы. Двойное подключение увеличивает количество ресурсов и может вызывать конфликты.

• используйте WOFF2, если нет отдельной необходимости в других форматах;
• загружайте только нужные начертания и стили;
• проверяйте наличие кириллицы в локальных файлах;
• не подключайте одно и то же семейство одновременно через Elementor, тему и сторонний плагин;
• используйте понятные названия файлов, чтобы не перепутать начертания при настройке.

Как проверить, какие шрифты действительно загружаются

После внесения изменений откройте страницу в режиме инкогнито или очистите кеш, если сайт использует плагин кеширования или CDN. Затем воспользуйтесь инструментами разработчика браузера. На вкладке Network можно отфильтровать запросы по типу Font и увидеть, какие файлы загружаются, из какого источника и какого они размера.

Проверку нужно выполнять не только на главной странице. Отдельные шрифты могут присутствовать только в шаблоне блога, корзине, форме, попапе или мобильном меню. Откройте несколько типичных страниц и сравните список запросов.

В Lighthouse или другом инструменте аудита обратите внимание на проблемы, связанные с отображением веб-шрифтов и смещением макета. Результаты тестов зависят от кеша, сервера и сети, поэтому оценивайте не одну цифру, а повторяющуюся картину на нескольких страницах.

• проверьте названия и количество запросов в категории Font;
• выясните, не загружается ли шрифт из двух разных источников;
• посмотрите страницу на мобильном устройстве или в мобильной эмуляции;
• сравните вид текста до и после загрузки шрифта;
• после значительных изменений очистите кеш Elementor, плагина кеширования и CDN.

Распространённые ошибки при оптимизации шрифтов

Первая ошибка — удалить начертание, не проверив все шаблоны. В результате часть текста может перейти на другой шрифт или потерять нужную визуальную иерархию. Изменения лучше вносить после аудита, а не случайным образом.

Вторая ошибка — оптимизировать только главную страницу. В WordPress разные типы записей и шаблоны Elementor могут иметь собственные стили. Проверяйте страницы услуг, блог, архивы, формы и служебные экраны.

Третья ошибка — подключить системный fallback, но не проверить разницу в ширине символов. Если резервный шрифт сильно отличается, после загрузки основного текста он может сместиться. Надёжнее выбрать близкий fallback и протестировать его на реальном контенте.

Четвёртая ошибка — использовать универсальные настройки производительности без проверки дизайна. Отключение внешних шрифтов или агрессивная оптимизация может ускорить отдельный тест, но нарушить фирменный стиль, поддержку кириллицы или отображение отдельных символов.

• не удаляйте файлы без проверки страниц и шаблонов;
• не путайте глобальные стили Elementor с фактическими локальными переопределениями;
• не оценивайте оптимизацию только по десктопной версии;
• не забывайте проверить кеш после изменений;
• не жертвуйте читаемостью ради минимального количества файлов.