Elementor spor sajt: kako da izmeriš i popraviš

Elementor ti je spor, barem tako svi kažu. Prvi savet sa foruma je da ga baciš, drugi da kupiš još jedan plugin za keširanje, treći da pređeš na neki "lakši" builder. Pre nego što uradiš bilo šta od toga, izmeri. Većina sajtova koje viđamo nije spora zbog Elementora kao takvog, nego zbog nekoliko konkretnih stvari koje se vide u petnaest minuta merenja.

Ovaj tekst ti daje taj postupak: šta da izmeriš, koje brojeve da gledaš, šta je Elementorova krivica, a šta nije. Na kraju dobiješ redosled popravki, od onih koje koštaju pet minuta do onih koje traže malo više posla.

Prvo razdvoji dve vrste sporosti

Kad kažeš "sajt je spor", možeš da misliš na dve sasvim različite stvari. Prva je da server dugo odgovara pre nego što pošalje ijedan bajt. Druga je da stranica stigne brzo, ali browseru treba večnost da je složi i prikaže. Elementor utiče skoro isključivo na ovu drugu. Prva je posao servera, keša i baze.

Zato prvi test ne uključuje Elementor uopšte. Otvori PageSpeed Insights ili Chrome DevTools, karticu Network, klikni na prvi zahtev (sam HTML dokument) i pogledaj vreme čekanja, takozvani TTFB. Ako je on visok i kad otvoriš običnu stranicu bez ijednog Elementor elementa, problem nije builder. U tom slučaju prvo pročitaj najčešće razloge zašto je WordPress sajt spor kad keš nije glavni problem, jer tamo ćeš naći uzrok pre nego što dirneš i jedan widget.

Merenje 1: koliko elemenata ima tvoja stranica

Elementor gradi stranicu od slojeva: sekcija, kolona, widget, a u starijim verzijama i dodatni omotači oko svakog widgeta. Što više slojeva, to browser ima više posla da izračuna raspored. To se vidi u jednom broju.

Otvori stranicu koju želiš da proveriš, pritisni F12, pređi na Console i ukucaj:

document.querySelectorAll('*').length

Dobiješ broj čvorova u DOM-u. Lighthouse počinje da upozorava kad telo stranice pređe oko 800 čvorova, a prijavljuje grešku iznad oko 1.400. To su pragovi iz Googleove dokumentacije za Lighthouse, ne moja procena. Naslovna koja ima 3.000 čvorova nije normalna, bez obzira koji builder koristiš.

Ako si ispod 1.000, DOM ti nije problem i možeš da preskočiš sledeći odeljak. Ako si blizu 2.000 ili više, evo gde se to obično skriva.

Zašto DOM naraste

Najčešći razlog nije Elementor nego način na koji se koristi. Sekcija u sekciji u sekciji, po jedna kolona za svaki pasus, pojedinačni widget za svaku ikonicu i svaki razmak. Razmaci se prave praznim widgetom umesto paddingom, tekst se deli na pet tekstualnih widgeta umesto jednog. Kad to pomnožiš sa dvadeset sekcija na naslovnoj, dobiješ hiljade čvorova.

Druga stvar je razlika između starog sistema sekcija i kolona i novijih kontejnera. Kontejneri prave manje omotača za isti raspored, pa je prelazak na njih jedna od retkih promena koja odmah smanji DOM. Elementor je i ranije radio na čistijem izlazu: optimizovani DOM izlaz je od verzije 3.19 ušao u osnovno ponašanje umesto da bude opcija koju moraš da uključiš. Ako radiš na starom sajtu koji nikad nije prelazio sa sekcija na kontejnere, tu verovatno ima najviše prostora.

Treća stvar su dodaci. Paketi dodatnih widgeta često ubacuju svoje omotače, svoj CSS i svoj JavaScript, čak i kad na stranici koristiš samo jedan njihov element. O tome više kod drugog merenja.

Merenje 2: šta Elementor stvarno učitava

U istom DevTools prozoru, kartica Network, osveži stranicu sa uključenim filterom na CSS pa posle na JS. Gledaš tri stvari: koliko fajlova dolazi sa Elementor putanje, koliko su veliki i da li se učitavaju na stranicama gde Elementor uopšte nije potreban.

U Elementor podešavanjima, u delu za performanse, postoji nekoliko opcija koje vredi proveriti jednu po jednu, a ne sve odjednom:

• način ispisa CSS-a: spoljni fajl se kešira u browseru, ugrađeni CSS se ponovo šalje uz svaku stranicu;
• keširanje elemenata, koje smanjuje posao koji server radi pri izgradnji stranice;
• odloženo učitavanje pozadinskih slika;
• učitavanje Gutenberg stilova samo tamo gde ih stvarno koristiš.

Tačni nazivi i položaj opcija se menjaju od verzije do verzije, pa ih traži pod karticom Performance ili Features u Elementor podešavanjima. Promeni jednu, izmeri, pa tek onda sledeću. Ako promeniš pet stvari odjednom, nećeš znati šta je pomoglo, a šta pokvarilo izgled.

Posebno pazi na widgete koje ne koristiš. Dodatni paketi sa stotinu widgeta često učitavaju sopstvene skripte na svakoj stranici, čak i kad koristiš jedan jedini widget iz njih. Isključi sve što nikad nisi upotrebio, pa ponovi merenje.

Merenje 3: slike, fontovi i ono što Elementor ne kontroliše

Kad otvoriš PageSpeed izveštaj, pogledaj koji element je označen kao LCP, najveći vidljivi sadržaj. Na većini Elementor sajtova to je hero slika ili pozadina naslovne sekcije. Ako je ta slika pozadina sekcije, browser je otkriva kasno, jer mora prvo da pročita CSS. Ako je obična slika u widgetu, može da se učita mnogo ranije.

Zato je jedna od najjeftinijih popravki da hero pozadinu zameniš običnom slikom, u WebP formatu i u veličini koja odgovara stvarnom prikazu, ne 4.000 piksela širine na ekranu od 1.200. Uz to isključi odloženo učitavanje za tu prvu sliku. Odloženo učitavanje je odlično za sve ispod prvog ekrana, a za LCP sliku je kočnica.

Fontovi su drugi čest krivac. Svaka Google font familija sa pet težina je pet dodatnih zahteva. Ostavi dve familije i najviše tri težine, a ako možeš, serviraj ih sa sopstvenog servera.

Ako ti ovi koraci nisu dovoljni, pogledaj i širi kontekst u tekstu o Core Web Vitals za WordPress, jer tamo su objašnjeni LCP, CLS i INP kao tri broja koja Google stvarno gleda.

Merenje 4: Elementor editor i admin

Posebna priča je spor editor. Ako se samo Elementor editor sporo otvara, a sajt za posetioce radi normalno, to nije problem kod posetilaca, ali jeste kod tebe. Editor troši mnogo više memorije i procesora nego obična stranica, pa tu server uopšte nije svejedno. Nedovoljno RAM-a po nalogu, previše istovremenih PHP procesa i preopterećena baza osećaju se najpre u editoru.

Ovde se hosting vidi i u brojkama. Na WordPress paketima na wphost.rs WP Start ima 4 GB RAM-a i 2 jezgra, WP Advanced 6 GB i 4 jezgra, a WP High-End 10 GB i 8 jezgara. Detalje po paketu nađi na stranici sa specifikacijama svih paketa. Ako ti se editor guši na nalogu sa 512 MB, nijedna optimizacija u builderu ti neće vratiti ono što ti server ne daje.

Šta je stvarno Elementorova krivica, a šta nije

Nakon merenja dobiješ jasnu sliku. Evo kako da je pročitaš.

Ako ti je DOM iznad 1.400 čvorova i stranica je puna ugnežđenih sekcija, to jeste posledica načina na koji je stranica sklopljena u Elementoru. Popravlja se prelaskom na kontejnere, spajanjem widgeta i brisanjem praznih razmaka.

Ako je CSS i JavaScript sa Elementor putanje velik, a stranica koristi tri widgeta, to je deo Elementora i dodataka koje si mu dodao. Popravlja se isključivanjem nekorišćenih widgeta i proverom opcija za performanse.

Ako je TTFB visok na svim stranicama, uključujući one bez Elementora, to nije builder. To je server, keš ili baza, a rešenje je drugo mesto i drugi alat.

Ako je spor samo editor, to je skoro uvek resurs. Više memorije i manje istovremenih procesa na nalogu menjaju više nego bilo koja postavka u builderu.

Redosled popravki, od najbrže do najsporije

1. Izmeri TTFB na stranici bez Elementora. Pet minuta.
2. Izbroj čvorove u konzoli na tri najvažnije stranice. Pet minuta.
3. Hero pozadinu zameni običnom WebP slikom i isključi odloženo učitavanje za nju. Deset minuta.
4. Skrati fontove na dve familije i tri težine. Deset minuta.
5. Isključi widgete i dodatke koje nikad ne koristiš, pa ponovi merenje. Petnaest minuta.
6. Proveri Elementor opcije za performanse jednu po jednu, uz merenje posle svake. Petnaest minuta.
7. Stare sekcije i kolone prebaci na kontejnere, stranicu po stranicu, počevši od naslovne. Nekoliko sati, radi na staging kopiji.

Poslednji korak radi na kopiji sajta, ne na živom. Ako na hostingu možeš da napraviš staging jednim klikom, iskoristi to, a ako ne možeš, vredi pročitati kako se staging sajt pravi bezbedno. Prelazak sa sekcija na kontejnere ume da pomeri razmake i responzivne prelome, a to želiš da vidiš pre posetilaca.

A šta sa Elementor 4 i novim editorom?

Elementor razvija novi, takozvani atomski editor (verzija 4), sa globalnim klasama i čistijim izlazom. Nezavisni vodiči ga opisuju kao lakšeg po broju čvorova i veličini CSS-a, ali brojke koje kruže različiti izvori navode različito, pa ih ne prepisujem kao činjenicu. Jedno upozorenje je, međutim, konkretno: ako na sajtu imaš sopstveni CSS koji cilja stare klase, na primer .elementor-widget-container, to u novom editoru neće raditi jer tih omotača više nema. Zato nadogradnju prvo probaj na staging kopiji, a ne na živom sajtu.

Ako se pitaš da li uopšte vredi ostati na Elementoru ili preći na Gutenberg, odgovor zavisi od toga šta praviš i ko uređuje sajt. Pišem o tome u tekstu Elementor vs Gutenberg za početnike. Kratko: brzina je retko jedini razlog za promenu buildera, a dobro sklopljen Elementor sajt sasvim lepo radi i bez selidbe.

Kad je dovoljno

Nemoj da juriš savršen rezultat u PageSpeed-u. Cilj je da posetilac vidi sadržaj brzo i da stranica ne skače dok se učitava. Ako ti je DOM ispod 1.400 čvorova, LCP slika se učitava odmah, fontovi su svedeni i TTFB je u redu, sajt je u dobroj formi, čak i ako ocena nije 100.

A ako posle svega ostane spor samo editor ili ceo sajt pod opterećenjem, ozbiljno razmisli o tome da li ti paket daje dovoljno resursa. Builder se tu ne može optimizovati iznad onoga što ima na raspolaganju.