Skip to content

Всё для WordPress, веб-разработки — и не только

🚀 Как ускорить сайт на Elementor: 3 совета для PageSpeed Insights в 2026 году
Темы WordPressSEO и продвижение
5 мин1,030 слов3 007

🚀 Как ускорить сайт на Elementor: 3 совета для PageSpeed Insights в 2026 году

Elementor собирает страницы из виджетов, стилей и скриптов, и каждый запрос к внешнему ресурсу добавляет миллисекунды к загрузке. Google Fonts, Font Awesome, Eicons: три шрифтовых запроса, которые плагин создаёт по умолчанию, даже если вы их не используете осознанно.

Результат: падение баллов в PageSpeed Insights, раздутый водопад GTMetrix и посетители, которые уходят, не дождавшись полной отрисовки. При этом сам Elementor даёт инструменты для отключения каждого из этих запросов, нужно лишь знать, какие рычаги дёрнуть.

Ниже, три точечных оптимизации, которые суммарно срезают до секунды времени загрузки без плагинов кеширования и CDN. Каждая сопровождается готовым кодом для functions.php.

💡 Быстрый обзор:

  • Отключаем Google Fonts от Elementor, встроенной настройкой или хуком в теме, и хостим шрифты локально
  • Заменяем Font Awesome от Elementor на локальную Critical-версию, чтобы браузер грузил только реально используемые иконки
  • Подменяем Eicons (собственные иконки Elementor) на Font Awesome через CSS, один файл вместо двух шрифтовых пакетов

1. Отключите Google Fonts от Elementor

Запросы к Google Fonts из Elementor в панели Network

Elementor по умолчанию подгружает Google Fonts для каждого использованного в дизайне шрифта, даже если вы уже хостите эти шрифты локально. В водопаде запросов это выглядит как отдельный HTTP-вызов к fonts.googleapis.com, который блокирует рендеринг текста до полной загрузки.

Самый простой способ, встроенная настройка Elementor. Перейдите в Elementor → Settings → Performance и активируйте Disable Google Fonts. После этого плагин перестанет генерировать запрос к CDN Google, а вы сможете подключить шрифты локально через дочернюю тему или плагин вроде OMGF (Optimize My Google Fonts).

Если настройка по какой-то причине недоступна или вам нужен программный контроль, добавьте этот код в functions.php дочерней темы:

1add_action( 'wp_enqueue_scripts', function() {
2    wp_dequeue_style( 'google-fonts-1' );
3    wp_dequeue_style( 'google-fonts-2' );
4}, 99 );

Хук с приоритетом 99 срабатывает после того, как Elementor ставит свои стили в очередь, и снимает их до вывода в <head>. После деактивации подключите шрифты локально: скачайте нужные начертания в WOFF2, положите в папку темы и пропишите @font-face в стилях.

2. Замените Font Awesome от Elementor на локальную версию

Elementor грузит полный пакет Font Awesome, сотни иконок, из которых на конкретном сайте реально используется 5-7 штук. Остальные байты просто прожигают бюджет загрузки.

Решение, локальный Critical Font. Плагины кеширования (Swift Performance, LiteSpeed Cache) и специализированные инструменты (OMGF) умеют сканировать страницу, собирать список реально используемых иконок и собирать урезанный webfont.css только с нужными глифами. Файл кладётся в /wp-content/fonts/ вашего сервера, ноль внешних запросов.

Чтобы Elementor перестал грузить свою версию и подхватил локальную, добавьте в functions.php:

1add_action( 'wp_enqueue_scripts', 'replace_elementor_fa', 3 );
2add_action( 'elementor/frontend/after_enqueue_styles', function() {
3    wp_dequeue_style( 'font-awesome' );
4} );
5 
6function replace_elementor_fa() {
7    wp_enqueue_style(
8        'font-awesome-local',
9        get_stylesheet_directory_uri() . '/fonts/fontawesome/webfont.css',
10        array(),
11        '1.0.0'
12    );
13}

Первая строка ставит вашу локальную версию в очередь с высоким приоритетом. Вторая, снимает Elementor-версию с рукоятки font-awesome сразу после того, как плагин её зарегистрировал. Функция replace_elementor_fa указывает путь к файлу; замените его на тот, который сгенерировал ваш плагин кеширования.

После установки проверьте водопад в GTMetrix: запрос к font-awesome.min.css от Elementor должен исчезнуть, а локальный webfont.css, загружаться с вашего домена.

3. Замените иконки Elementor (Eicons) на Font Awesome

Запросы к шрифту eicons в водопаде GTMetrix

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

Детали HTTP-запроса к файлу eicons в отчёте GTMetrix

Раз у вас уже есть локальный Font Awesome (шаг 2), логично переключить Eicons на него, один шрифтовой файл вместо двух. Приём заменяет CSS-классы .eicon и .eicon-menu-bar на глифы из Font Awesome.

Сначала уберите Eicons из очереди. Код идёт в functions.php:

1add_action( 'elementor/frontend/after_enqueue_styles', 'js_dequeue_eicons' );
2 
3function js_dequeue_eicons() {
4    if ( is_admin() || current_user_can( 'manage_options' ) ) {
5        return;
6    }
7    wp_dequeue_style( 'elementor-icons' );
8}

Функция пропускает админку, чтобы редактор Elementor продолжал работать без сбоев, и снимает рукоятку elementor-icons только на фронте.

Теперь пропишите CSS-замену, можно через Appearance → Customize → Additional CSS или в таблице стилей дочерней темы:

1.eicon,
2.eicon-menu-bar {
3    display: inline-block;
4    font: normal normal normal 14px/1 FontAwesome;
5    font-size: inherit;
6    text-rendering: auto;
7    -webkit-font-smoothing: antialiased;
8    -moz-osx-font-smoothing: grayscale;
9}
10 
11.elementor-menu-toggle i:before {
12    content: "\f0c9";
13    font-family: FontAwesome;
14}
15 
16.elementor-menu-toggle.elementor-active i:before {
17    content: "\f00d";
18    font-family: FontAwesome;
19}

Первый блок переназначает базовые классы Eicons на гарнитуру FontAwesome. Второй и третий задают конкретные глифы: \f0c9 для иконки гамбургера (fa-bars) и \f00d для крестика закрытия (fa-times). Остальные иконки подменяются по тому же принципу: открываете devtools, смотрите класс виджета и прописываете content с кодом нужного глифа из шпаргалки Font Awesome.

После внедрения проверьте консоль браузера на отсутствие ошибок загрузки шрифтов и прогоните страницу через PageSpeed Insights, запрос к eicons.woff2 должен исчезнуть из отчёта.

⁉️🤔 Частые вопросы

Работает ли этот метод на актуальных версиях Elementor?

Да, все три совета актуальны для текущей линейки Elementor. Хуки elementor/frontend/after_enqueue_styles и wp_enqueue_scripts, часть публичного API плагина и сохраняют обратную совместимость. В официальной документации Elementor по отключению Google Fonts описан встроенный тумблер в разделе Elementor → Settings → Performance, для совета №1 используйте его в первую очередь, а код оставьте как запасной вариант для нестандартных тем.

Что делать, если после замены Eicons в редакторе пропали иконки?

Код деактивации Eicons обходит админку, проверка is_admin() и current_user_can( 'manage_options' ) гарантирует, что в редакторе Elementor шрифт остаётся на месте. Если иконки всё равно пропали, убедитесь, что вы добавили код именно в functions.php активной темы, а не через плагин сниппетов, который может выполняться и на админ-страницах.

Нужно ли устанавливать плагин кеширования для этих оптимизаций?

Для советов №1 и №3 плагин кеширования не обязателен, хватит кода в functions.php. Для совета №2 (Critical Font) нужен инструмент, который соберёт урезанный Font Awesome: Swift Performance, LiteSpeed Cache, OMGF Pro или ручная сборка через утилиту fonttools. Без этого шага вы просто переключите загрузку полного Font Awesome с CDN Elementor на свой сервер, экономии почти не будет.

Сколько реально выигрыша в PageSpeed Score дают эти три совета?

Каждый случай индивидуален, но ориентир такой: отключение Google Fonts снимает 200-400 мс загрузки, локальный Font Awesome экономит ещё 150-300 мс, а замена Eicons убирает один HTTP-запрос и экономит 50-150 мс. Суммарно, до секунды времени полной загрузки, что на типичном хостинге за $10-20 в месяц поднимает мобильный счёт PageSpeed Insights на 5-15 баллов.

Можно ли вообще отказаться от Font Awesome и Eicons?

Можно, если вы готовы пересобрать все иконки в Elementor на SVG. Для этого в виджетах вручную заменяете иконки на загруженные SVG-файлы или используете плагин вроде Iconic. Трудоёмкость высокая, десятки виджетов на сайте, но результат даёт самый лёгкий фронт. Для большинства проектов локальный Critical Font (шаг 2), достаточный компромисс.

Что дают эти правки на реальном сайте?

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

Если вы ещё не проходили базовую оптимизацию WordPress, начните с полного руководства по ускорению сайта, которое охватывает кеширование, сжатие CSS/JS и оптимизацию изображений. А когда доберётесь до шрифтов, возвращайтесь к этим трём шагам и внедряйте по одному, проверяя PageSpeed Insights после каждого.

Тестируйте на копии сайта, делайте бэкап перед правкой functions.php, и выжмите из Elementor максимум скорости.

Редакция
РедакцияРедакционная команда→ Все публикации

Профессиональная команда авторов и редакторов, специализирующихся на создании качественного контента.