Чому Elementor уповільнює сайт

Elementor генерує великий DOM, завантажує десятки CSS/JS файлів і за замовчуванням підключає шрифти Google через зовнішні запити. Все це збільшує час завантаження.

Налаштування Elementor → Performance

Параметр	Рекомендація	Вплив
Google Fonts	Disable / System Fonts	-200–500 мс
Font Awesome	Load only used icons	-80 КБ
CSS Print Method	Internal Embedding	-1 HTTP запит
Improved Asset Loading	Enable	-30–50%
Lazy Load Background Images	Enable	+LCP score

Вимкнення Google Fonts в Elementor

// functions.php — повне вимкнення Google Fonts
add_filter('elementor/frontend/print_google_fonts', '__return_false');
add_filter('elementor/fonts/print_google_fonts', '__return_false');

💡 Використовуйте системні шрифти -apple-system, BlinkMacSystemFont, Segoe UI — вони миттєво завантажуються без HTTP-запитів.

Зменшення розміру DOM

Elementor додає div-обгортки навколо кожного віджета. Для зменшення DOM:

Elementor Pro: увімкніть Improved Asset Loading
Використовуйте Container замість Section/Column (менше div-нестингу)
Видаліть невикористовувані віджети через Elementor → Tools → Regenerate Files

⚠️ Після змін у налаштуваннях Performance завжди очищайте кеш Elementor і кеш сторінок.

Розбір помилок Elementor

Elementor — важкий візуальний редактор, і частина його збоїв пов'язана саме з генерацією CSS і JS на льоту, а не з самим контентом.

Текст помилки або симптом	Причина	Що робити
There has been a critical error on this website після оновлення Elementor	Несумісність версії Elementor Pro з ядром Elementor або темою	Відкотити версію плагіна і подивитися wp-content/debug.log
Білий екран у редакторі, при цьому сайт зовні працює	Конфлікт JS у панелі адміністратора, зазвичай з іншим плагіном, що додає власні скрипти	Відкрити редактор із параметром ?safe_mode=1 і вимикати плагіни по одному
500 помилка під час Regenerate CSS	Немає прав на запис у директорію wp-content/uploads/elementor	Виставити права 755 на директорії та 644 на файли кешу
Верстка «стрибає» після Lazy Load Background Images	У контейнера з фоном не задано мінімальну висоту, браузер не резервує місце	Задати min-height контейнеру до моменту завантаження фонового зображення

Загальні принципи пришвидшення завантаження сторінки, застосовні і до Elementor, — у статті про швидкість WordPress.

Коли оптимізація Elementor не допоможе

Лендинги з десятками віджетів на одному екрані — DOM все одно буде великим, розумніше зібрати статичний HTML/CSS вручну
Дешевий shared-хостинг з одним ядром CPU — рендер самого редактора в адмінці важкий незалежно від налаштувань фронтенду
Теми, глибоко зав'язані на Elementor Theme Builder — вимкнення частини функцій Performance може зламати шаблони шапки й підвалу
Проєкти з частим додаванням нових блоків — Regenerate Files доводиться робити заново після кожної значущої зміни, це ручна операція
Сайти, де важлива доступність для скрінрідерів, — обгортки-div Elementor навколо кожного віджета ускладнюють семантику розмітки сильніше, ніж під час верстки вручну

Окремо варто перевірити, яка версія PHP використовується під капотом: сам рендер Elementor помітно виграє від PHP 8.2 і увімкненого OPcache, а як альтернативу важким плагінам кешу сторінок можна розглянути LiteSpeed Cache, якщо хостинг працює на LiteSpeed.

Кешування згенерованих файлів Elementor

CSS-файли, які Elementor генерує на льоту, варто віддавати з довгим терміном кешування на рівні вебсервера:

location ~* ^/wp-content/uploads/elementor/ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

💡 Після кожного Regenerate Files ім'я файлу змінюється завдяки версії у шляху, тому довгий кеш безпечний: браузер не побачить застарілий CSS.

Як перевірити, що Elementor більше не гальмує

Вкладка Coverage в DevTools показує відсоток невикористовуваного CSS і JS на сторінці
PageSpeed Insights: кількість ресурсів, що блокують рендер, має зменшитися після Improved Asset Loading
Розмір директорії wp-content/uploads/elementor до і після Regenerate Files — різке зростання свідчить про накопичення сміття
Кількість HTTP-запитів на вкладці Network — базова сторінка на Elementor не повинна перевищувати 40–50 запитів
Time to Interactive в Lighthouse — важкий JS Elementor часто тримає сторінку «неінтерактивною» довше 3 секунд на середньому мобільному пристрої

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

curl -sI https://example.com/wp-content/uploads/elementor/css/post-123.css \
  | grep -i cache-control