Защо Elementor забавя сайта Ви и какво можете да направите

# ЕтикетиСкоростWordPress

Екипът на WPhost3 окт 202615 мин четене

Сайтът Ви е направен с Elementor и изглежда добре, но PageSpeed Insights показва червено за мобилни, а на телефон страниците се отварят бавно. Elementor забавя сайта по няколко познати начина и повечето от тях можете да ограничите, без да започвате отначало.

В това ръководство обясняваме откъде идва тежестта, кои вградени настройки на Elementor помагат днес и какво можете да махнете самостоятелно. Накрая ще знаете как да измерите разликата и кога е по-разумно сайтът да се преработи на лека тема, вместо да го настройвате още.

Накратко

Тежестта идва от вложените секции и контейнери, от шрифтовете и иконите и от пакетите с допълнителни уиджети.
Elementor зарежда стиловете и скриптовете на своите уиджети само там, където се използват. Пакетите от други разработчици не винаги го правят.
Включвайте настройките Optimized Image Loading, Lazy Load Background Images, Inline Font Icons и Load Google Fonts Locally една по една и проверявайте сайта след всяка.
Мерете с PageSpeed Insights преди и след и правете промените първо на копие на сайта.
Ако след това мобилните числа остават лоши, помислете за преработка на лека тема.

Може ли сайт с Elementor да е бърз?

Може. Elementor е утвърден инструмент и според wordpress.org има над 10 милиона активни инсталации. От години работи и по скоростта. Олекотил е HTML кода, въвел е контейнерите и зарежда стиловете и скриптовете на уиджетите само на страниците, където се използват. Сайт, сглобен внимателно, с малко добавки и снимки с разумен размер, може да има приличен резултат.

Проблемът е, че с конструктора е много лесно да добавите още един контейнер, още една анимация и още един пакет с уиджети. Всяко от тях струва нещо на телефона на посетителя, а сметката идва чак когато сайтът е готов. Затова два сайта с Elementor могат да се различават много по скорост. Тя зависи най-вече от това как е сглобен сайтът.

Как Elementor забавя сайта с вложени секции и контейнери

Всеки елемент, който подреждате в Elementor, добавя свои обвивки в HTML кода. Секцията има колони, в колоната може да има вътрешна секция, а в нея още колони и уиджети. Браузърът трябва да изгради всички тези елементи, да изчисли стиловете им и да ги подреди на екрана. Колкото са повече и колкото по-дълбоко са вложени, толкова повече работа има процесорът на телефона.

Документацията на Chrome обяснява, че големият DOM, тоест дървото от елементи на страницата, удължава изчисляването на стиловете и подредбата, забавя реакцията на страницата и заема повече памет. В Lighthouse 13 това се вижда в препоръката Optimize DOM size. Тя се задейства, когато голямо преизчисляване на стиловете или на подредбата отнеме над 40 милисекунди, и показва колко елемента има страницата и колко дълбоко са вложени.

От версия 3.0 нататък Elementor махна излишни обвивки на няколко етапа, а от 3.19 олекотеният код вече не може да се изключи. Контейнерите, включени по подразбиране в новите сайтове, подреждат съдържанието с по-малко обвивки от секциите и колоните. Документацията на Elementor съветва страницата да има възможно най-малко контейнери. Ако вложен контейнер съдържа само един елемент, той вероятно не е нужен.

По-старите сайтове, сглобени със секции и колони, не се преобразуват сами. Elementor може да преобразува секция в контейнер, но предупреждава, че това е необратимо. Затова го правете на копие на сайта и проверявайте всяка страница след това.

Стиловете и скриптовете на уиджетите и пакетите с добавки

Всеки уиджет има свои стилове и скриптове. Помощният център на Elementor казва, че те се зареждат само на страниците, където уиджетът се използва, с изключение на малко основен CSS и JavaScript. За скриптовете функцията се казва Improved Asset Loading и засяга уиджетите на Elementor и Elementor Pro. Затова неизползваните уиджети на самия Elementor не забавят страниците.

Страница с много различни уиджети обаче зарежда кода на всеки от тях. Слайдер, табове, броячи, анимации при скролиране и галерия с лайтбокс на една начална страница означават отделен код за всеки от тях, а телефонът трябва да го изтегли и изпълни.

По-голям проблем са пакетите с допълнителни уиджети от други разработчици. В същата статия Elementor предупреждава, че уиджетите на някои плъгини от трети страни трябва да се изключат изрично, иначе плъгинът зарежда файловете им дори когато не се използват. Така пакет, от който ползвате един бутон, може да добавя стилове и скриптове на всяка страница. При два или три такива пакета ефектът се събира.

Шрифтове и икони

Elementor по подразбиране зарежда шрифтовете от Google Fonts, от сървърите на Google. Всяка връзка към външен сървър отнема време, а web.dev обяснява, че докато шрифтът не се зареди, браузърите обикновено задържат текста и понякога това забавя LCP. Всеки допълнителен шрифт и всяка допълнителна дебелина са още файлове за изтегляне.

Иконите са подобен случай. Font Awesome и собствените икони на Elementor (eicons) са шрифтове с икони, които идват със свой CSS. Elementor зарежда само семейството икони, което използвате, и само на страниците, където е нужно, но настройката Inline Font Icons отива по-далеч. Тя показва иконите като SVG код направо в страницата, без да зарежда библиотеките Font Awesome и eicons, техния CSS и шрифтовете им. Иконите от платения Font Awesome Pro тя не преобразува.

Ограничете шрифтовете до едно или две семейства и само до дебелините, които наистина ползвате. После включете Load Google Fonts Locally, за да идват шрифтовете от Вашия сървър. От версия 3.32.1 тази настройка е изключена по подразбиране, а ако сте я включили по-рано, след обновяването трябва да я включите отново. Elementor изтегля използваните шрифтове в папката wp-content/uploads/elementor/fonts/ и насочва CSS кода към тях. Така браузърът не се свързва с още един сървър, а според Elementor това улеснява и спазването на GDPR, защото към Google не се изпращат данни за посетителите.

В раздела Advanced има и настройката Google Fonts Load. При стойност Swap текстът се показва веднага с резервен шрифт и се сменя, когато шрифтът се зареди. Според web.dev swap е подходящ за текст, който трябва да се появи бързо, но шрифтът трябва да идва достатъчно рано, за да не размества съдържанието. Ако темата зарежда шрифтовете сама, в същия раздел можете да спрете Google Fonts в Elementor изцяло.

Кои настройки на Elementor помагат

Elementor събира настройките за скорост в два раздела. В администрацията на WordPress отворете Elementor, после Editor и Settings (в по-старите версии Elementor и Settings). В раздела Performance са стабилните функции, а в раздела Features са и тези, които още се тестват.

Настройка	Раздел	Какво прави
Optimized Image Loading	Performance	Дава приоритет на главната снимка в първия екран (`fetchpriority="high"`) и зарежда отложено снимките по-надолу
Lazy Load Background Images	Performance	Зарежда отложено фоновите снимки, освен първата
Optimized Gutenberg Loading	Performance	Не зарежда стиловете и скриптовете на редактора Gutenberg, които не се използват
Load Google Fonts Locally	Performance	Зарежда шрифтовете на Google от Вашия сървър
Inline Font Icons	Features, стабилна	Показва иконите като SVG, без библиотеките Font Awesome и eicons
Element Caching	Features, експериментална	Пази готовия HTML на елементите, вместо да го сглобява при всяко зареждане

Включвайте ги една по една и след всяка проверявайте сайта на телефон и в PageSpeed Insights. Ако плъгинът за кеш също зарежда снимките отложено, оставете тази работа само на едното място, за да не се застъпват.

CSS кодът трябва да остане в отделен файл, както препоръчва Elementor, затова не сменяйте CSS Print Method на Internal Embedding. Според Elementor вграждането може да създаде конфликти с кеша и да влоши скоростта, особено при сложни сайтове.

Element Caching е експериментална. Тя пази готовия HTML на уиджетите в базата данни и според Elementor намалява използваната памет на сървъра и времето до първия байт. Не бива да се ползва за елементи с динамично съдържание, например такива, които показват името на посетителя или ползват шорткод. Включвайте я само за статични елементи и само ако знаете какво съдържа всеки от тях.

Какво да махнете

Често най-много печелите, като махнете неща, които не използвате. Започнете от пакетите с добавки. В Elementor отворете Editor, после Home, и от менюто System изберете Element Manager. Бутонът Scan Element Usage показва кои елементи се използват в сайта и колко пъти, включително тези от други плъгини. Ако от цял пакет ползвате два уиджета, помислете дали не можете да ги замените с вградени уиджети на Elementor и да махнете пакета изцяло.

Element Manager може и да изключи наведнъж всички неизползвани елементи с бутона Deactivate Unused Elements, но внимавайте. Ако изключите елемент, който се използва, той спира да работи и може да счупи страница. При уиджетите на самия Elementor ползата за посетителите е малка, защото те и без това не се зареждат, когато не се ползват. Смисълът е при пакетите, които зареждат файловете си навсякъде.

После минете през всички плъгини. Деактивирайте и изтрийте тези, които не ползвате, след като направите бекъп. Elementor съветва същото в своята документация за скоростта.

Накрая погледнете началната страница с очите на посетител на телефон. Слайдер с пет големи снимки, видео на фона, анимации при всеки скрол и вградена карта на Google в първия екран изглеждат добре на голям монитор, но телефонът плаща за всяко от тях. Elementor сам посочва вградените карти на Google, броячите на споделяния във Facebook и аватарите като външни скриптове, които чувствително забавят страницата.

Кеш и снимки

Elementor не замества плъгина за кеш и сам препоръчва кеш и CDN. Как да изберете плъгин за кеш, как да направите снимките по-леки и как да проверите версията на PHP, описваме в ръководството Как да ускорите WordPress с кеш, по-леки снимки и нов PHP. Тук добавяме само две бележки, свързани с Elementor.

Ако плъгинът за кеш обединява и отлага CSS, Elementor съветва да изключите от отлагането собствените му стилове, тоест папката /wp-content/plugins/elementor/assets/css/. Иначе страницата може за миг да се покаже без стилове.

Снимките в Elementor идват основно от фона на секциите и контейнерите и от уиджета Image. Elementor съветва да са във формат WebP и под 1 MB. За телефон това е горната граница, а не целта, затова качвайте снимките в размера, в който се показват.

Как да измерите разликата

Мерете преди всяка промяна и след нея, както е описано в ръководството Как да измерите скоростта на сайта с PageSpeed Insights. Накратко, гледайте мобилния резултат, пускайте теста по пет пъти на едни и същи страници и записвайте медианата на резултата, LCP, TBT и CLS.

Правете промените първо на копие на сайта, не на живия сайт. Ако нямате такова копие, в ръководството за бекъп е описано как да го направите в поддомейн.

Ако искате да разберете дали забавянето идва от Elementor, от темата или от друг плъгин, Elementor предлага прост тест. На копието деактивирайте всички плъгини освен Elementor и Elementor Pro и мерете отново. После сменете темата с Hello, леката тема на Elementor, и мерете пак. Накрая направете страница с шаблона Canvas и измерете и нея. Стъпката, след която разликата е най-голяма, показва къде да търсите.

Гледайте и данните от реални посетители. Ако сайтът има достатъчно трафик, те показват дали промените помагат на хората, но обхващат 28 дни и се променят постепенно.

Кога е време за преработка на лека тема

Настройките имат граница. Те олекотяват шрифтовете, иконите и снимките, но не махат вложените контейнери и пакетите, от които зависи дизайнът. Ако след всичко дотук мобилният резултат остава в оранжевата или червената зона, а страниците не минават Core Web Vitals при реалните посетители, всяка следваща настройка дава все по-малко.

Помислете за преработка, ако се познаете в някое от тези положения.

Страниците са сглобени с много вложени секции и преминаването към контейнери означава всяка да се направи наново.
Дизайнът зависи от два или три пакета с добавки.
Всяка нова страница или кампания добавя тежест и сайтът отново се забавя.
И без това планирате нов дизайн или нова структура.

В такъв случай е по-разумно сайтът да се преработи на лека тема, направена специално за него. При изработката на сайт на WordPress правим точно това. Сайтът е на класически WordPress, с лека тема, направена за Вас, без Elementor и Divi, а текстовете, снимките и страниците редактирате самостоятелно. Предаваме го с над 90 точки в Google PageSpeed Insights, измерени на мобилни в деня на предаването, при бърз хостинг и проверени от нас плъгини. Каква е разликата между готова тема и дизайн по мярка, обясняваме в ръководството Готова тема или дизайн по мярка, кое е по-добро за бизнеса.

Ако обаче сайтът Ви вече минава Core Web Vitals, преработка не Ви трябва, дори лабораторният резултат да не е 100.

Чеклист

Мобилният резултат, LCP, TBT и CLS са записани преди първата промяна.
Промените се правят на копие на сайта и има бекъп.
Optimized Image Loading и Lazy Load Background Images са включени, а отложеното зареждане на снимки е само на едно място.
Inline Font Icons е включена.
Шрифтовете са едно или две семейства и се зареждат от Вашия сървър.
CSS Print Method не е Internal Embedding.
Element Manager е показал кои пакети с добавки се ползват, а ненужните са махнати.
Ненужните плъгини са изтрити.
Първият екран на мобилни няма слайдер, видео на фона или карта, без които може.
Резултатът е измерен отново и е сравнен със старите числа.

Трябва ли да го правите сами?

Ако имате копие на сайта и няколко свободни часа, повечето стъпки можете да направите сами. Ако не искате да рискувате живия сайт или не знаете кои добавки са важни за дизайна, при ускоряването на сайта мерим преди и след и Ви показваме разликата в цифри. А ако стигнете до извода, че е време за нов сайт, вариантите са на страницата за изработка на сайтове и онлайн магазини.

Често задавани въпроси

Може ли сайт с Elementor да бъде бърз?

Да. Elementor има над 10 милиона активни инсталации според wordpress.org и от години работи по скоростта, като олекоти HTML, въведе контейнерите и зарежда стиловете и скриптовете на уиджетите само на страниците, които ги ползват. Внимателно направен сайт с малко добавки и разумни размери на изображенията може да има приличен резултат. Скоростта зависи най-вече от това как е сглобен сайтът.

Защо Elementor прави сайта бавен?

Тежестта идва основно от вложените секции и контейнери, от шрифтовете и иконите и от пакетите с допълнителни уиджети. Всеки елемент добавя свои обвивки в HTML, а според документацията на Chrome голямото DOM дърво удължава изчисляването на стиловете и подредбата и забавя реакцията на страницата. Слайдер, табове, броячи, анимации и галерия на една страница също значат отделен код, който телефонът трябва да свали и изпълни.

Забавят ли сайта неизползваните уиджети на Elementor?

Собствените уиджети на Elementor и Elementor Pro не забавят страниците, когато не се ползват, защото според Elementor стиловете и скриптовете им се зареждат само там, където ги има. Пакетите с уиджети от други разработчици са по-големият проблем. Elementor предупреждава, че някои от тях зареждат файловете си дори когато уиджетите не се ползват, така че пакет, който ползвате за един бутон, може да добави код към всяка страница.

Кои настройки на Elementor помагат за скоростта?

В раздела Performance това са Optimized Image Loading, Lazy Load Background Images, Optimized Gutenberg Loading и Load Google Fonts Locally, а в раздела Features стабилната Inline Font Icons. Включвайте ги една по една и проверявайте сайта на телефон и в PageSpeed Insights след всяка. Оставете CSS в отделен файл, както препоръчва Elementor, вместо да превключвате CSS Print Method на Internal Embedding.

Как да заредя Google шрифтовете от собствения сървър в Elementor?

Включете Load Google Fonts Locally в раздела Performance. От версия 3.32.1 настройката е изключена по подразбиране, така че ако сте я включили по-рано, трябва да я включите отново след обновяването. Elementor сваля шрифтовете в wp-content/uploads/elementor/fonts/, браузърът вече не се свързва с друг сървър, а според Elementor това улеснява и спазването на GDPR.

Как да разбера кои уиджети в Elementor не се използват?

Отворете Element Manager от менюто System в Elementor и натиснете Scan Element Usage, за да видите кои елементи се ползват и колко пъти, включително тези от други плъгини. Ако от цял пакет ползвате два уиджета, помислете дали да не ги замените с вградените в Elementor и да махнете пакета. Внимавайте с Deactivate Unused Elements, защото изключен елемент, който се ползва, спира да работи и може да счупи страница.

Мога ли да превърна старите секции на Elementor в контейнери?

Да. Elementor може да превърне секция в контейнер, но предупреждава, че превръщането не може да се отмени. Старите сайтове със секции и колони не се превръщат автоматично, затова го правете на копие на сайта и проверете всяка страница след това.

Кога е по-добре сайтът с Elementor да се направи наново?

Когато след всички настройки мобилният резултат остава в оранжевия или червения диапазон и страниците не минават Core Web Vitals за реалните посетители. Тогава вложените секции и пакетите с добавки, от които зависи дизайнът, остават, а всяка следваща настройка дава все по-малко. Ако сайтът вече минава Core Web Vitals, преработка не Ви трябва, дори лабораторният резултат да не е 100.

Източници