⚡ Оптимізація Elementor під Google PageSpeed: вимикаємо Google Fonts, Font Awesome та Eicons

Q: Що робити, якщо після заміни Eicons у редакторі зникли іконки?

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

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 дочірньої теми:

1 add_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:

1 add_action( 'wp_enqueue_scripts', 'replace_elementor_fa', 3 );
2 add_action( 'elementor/frontend/after_enqueue_styles', function() {
3     wp_dequeue_style( 'font-awesome' );
4 } );
5  
6 function 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:

1 add_action( 'elementor/frontend/after_enqueue_styles', 'js_dequeue_eicons' );
2  
3 function 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 максимум швидкості.