База знаний

Röviden: Elementor alatt a gyors betöltődés kulcsa, hogy kevesebb DOM-ot, kevesebb (felesleges) CSS/JS-t generálj, és az oldalt mobile-first logikával építsd: egyszerű hero, kevés animáció, karcsú widget-használat, és csak a szükséges külső scriptek. Az alábbi útmutatóban lépésről lépésre végigmegyünk a legfontosabb Elementor-beállításokon és az “építési szabályokon”.

Tartalom

• Miért lassul be gyakran egy Elementor-oldal?
• Elementor beállítások, amik tényleg gyorsítanak
  • Improved Asset Loading: kevesebb JS oldalanként
  • Inline Font Icons: ikonok SVG-ként
  • Optimized DOM: kevesebb wrapper, tisztább kód
  • Container (Flexbox): gyorsabb, mint a Section/Column
  • Element Caching: TTFB gyorsítás statikus blokkoknál
  • Kép- és Gutenberg-optimalizálások
• Hogyan építsd fel az oldalt gyors betöltésre?
  • Above-the-fold (hero): mit kerülj, mit csinálj?
  • Szekciók és layout: kevesebb nesting, kevesebb “bloat”
  • Widget-diéta: a legegyszerűbb gyorsítás
  • Animációk és mozgó effektek: csak okosan
  • Külső scriptek: GTM, chat, heatmap, map
  • Betűtípusok: kevesebb font = gyorsabb oldal
• Gyors minták: bevált oldalszerkezetek
• Javasolt optimalizálási sorrend (gyors checklist)
• Hibakeresés: ha szétesik a design vagy lassú marad
• GYIK

Miért lassul be gyakran egy Elementor-oldal?

Elementorral nagyon gyorsan lehet látványos oldalakat építeni, de könnyű túlzásba esni. A lassulás tipikus okai:

• Túl nagy DOM: túl sok egymásba ágyazott szekció/konténer, sok “wrapper”, túl sok widget.
• Túl sok CSS és JS: slider, popup, animációk, add-on csomagok, felesleges frontend fájlok.
• Sok külső script: chat, heatmap, több tracking, map embed, 3rd-party űrlapok.
• Nehezen betöltő hero (LCP): túl nagy kép, videó, több kép/slideshow az első képernyőn.
• Editor-lassulás: túl sok plugin, kevés erőforrás, túl nagy oldalak, felesleges bővítmények.

Tipp: Ha egy oldalon “mindent is” látsz (slider + 3 animáció + popup + több add-on widget), az szinte biztosan lassabb lesz mobilon.

Elementor beállítások, amik tényleg gyorsítanak

Az Elementor teljesítményhez kapcsolódó opciói verziótól függően a következő helyeken találhatók (az elnevezések enyhén eltérhetnek):

1. WordPress admin → Elementor → Settings (Beállítások)
2. Features (Funkciók / kísérletek) és/vagy Performance (Teljesítmény) fül

Improved Asset Loading: kevesebb JS oldalanként

Mire jó? Csökkentheti az oldalon betöltődő JavaScript mennyiségét, mert az Elementor csak azt próbálja betölteni, amire tényleg szükség van az adott oldalon.

Hogyan használd biztonságosan?

1. Kapcsold be az opciót (ha elérhető nálad).
2. Teszteld a kulcsoldalakat: főoldal, landing, kapcsolat, shop/checkout (ha van), blogcikk.
3. Ha eltűnik egy funkció (pl. popup, lightbox, űrlap-validáció), ellenőrizd, hogy nem egy 3rd-party Elementor add-on okoz-e kompatibilitási gondot.

Inline Font Icons: ikonok SVG-ként

Mire jó? Ha az ikonokat inline SVG-ként jeleníti meg, csökkenhet a felesleges ikon-készlet betöltés (kevesebb kérés, kevesebb CSS/font).

Javaslat:

• Kapcsold be, ha sok ikont használsz (ikonboxok, listák, gombok).
• Ha egyedi Font Awesome Pro megoldásod van, ellenőrizd, hogy a beállításaid kompatibilisek-e (különösen, ha FA kitet használsz).

Optimized DOM: kevesebb wrapper, tisztább kód

Mire jó? A célja, hogy az Elementor kevesebb felesleges “burkoló” elemet (wrapper) generáljon, így kisebb DOM és egyszerűbb HTML jöhet létre.

Fontos: ha régebbi oldaladon egyedi CSS vagy egyedi kód olyan wrapper osztályokra épül, amelyek megváltoznak/eltűnnek, akkor a design “széteshet”.

Container (Flexbox): gyorsabb, mint a Section/Column

Miért éri meg? A Container (Flexbox) logika jellemzően kevesebb DOM elemmel oldja meg ugyanazt a layoutot, mint a klasszikus Section/Column felépítés.

Gyakorlati szabályok:

• Új blokkokat már Containerrel építs.
• A régi, sok “Inner Section”-t tartalmazó részeket fokozatosan érdemes átültetni.
• Ne legyen túl sok egymásba ágyazott container – a cél a laposabb szerkezet.

Element Caching: TTFB gyorsítás statikus blokkoknál

Mire jó? Bizonyos (statikus) widgetek/elemek HTML kimenete gyorsabban kiszolgálható, ami javíthatja a szerver oldali válaszidőt (TTFB jellegű nyereség).

Aranyszabály: csak statikus tartalmakra használd.

• Jó jelöltek: USP sáv, garancia doboz, “miért minket” kártyák, statikus CTA blokk.
• Kerüld: dinamikus tag-ek, shortcode-ok, felhasználófüggő/személyre szabott részek, gyakran frissülő tartalmak.

Kép- és Gutenberg-optimalizálások

Ezek kisebb, de hasznos nyereséget adhatnak – főleg a hero képnél és vegyes szerkesztés (Elementor + Gutenberg) esetén:

• Optimalizált képfelöltés / lazy load beállítások: különösen a nem-hero képeknél.
• Optimized Gutenberg Loading: ha a webhelyen csak részben használt a Gutenberg, csökkentheti a felesleges betöltéseket.

Hogyan építsd fel az oldalt gyors betöltésre?

Az Elementor-beállítások mellett a legnagyobb gyorsulás sokszor az építési módszertanból jön. Az alábbi szabályokkal látványosan csökkenhet a DOM/CSS/JS terhelés.

Above-the-fold (hero): mit kerülj, mit csinálj?

Cél: az első képernyő (hero) legyen “kész” gyorsan, minimális erőforrásból.

• Kerüld: slider a hero-ban, több nagy kép, autoplay videó.
• Javasolt: 1 fő cím, 1 rövid alcím, 1 CTA gomb, 1 optimalizált kép.
• Ha kell videó: kattintásra induljon, külön szekcióban.

Szekciók és layout: kevesebb nesting, kevesebb “bloat”

• 1 szekció = 1 cél: ne építs “mindent egy blokkba”.
• Global spacing: lehetőleg globális beállításokkal (theme style / global) kezeld a térközöket.
• Kevesebb wrapper: ne legyen minden elem körül több felesleges container, ha nincs rá szükség.

Widget-diéta: a legegyszerűbb gyorsítás

Elementorban a “kevesebb widget” gyakran közvetlenül kevesebb CSS/JS-t jelent.

• Kerüld a túl sok Spacer widgetet – inkább konténer spacinget használj.
• Ikonboxok helyett sokszor elég: ikon + cím + 1 rövid bekezdés.
• Ne használj 3 külön headinget, ha elég 1 heading és egy normál szöveg.

Animációk és mozgó effektek: csak okosan

• Mobilon 1–2 finom animáció bőven elég.
• Kerüld a “minden elem mozog scrollra” megoldást.
• Ha interakció késik (kattintás után “gondolkodik”), csökkentsd az animációt és a JS-heavy elemeket.

Külső scriptek: GTM, chat, heatmap, map

Sok oldal nem az Elementor miatt lassú, hanem a külső scriptek miatt.

• Csak ami kell: amit nem használsz, ne töltődjön be.
• Chat / heatmap: lehetőleg késleltetve vagy csak bizonyos oldalakon.
• Térkép: ha lehet, kattintásra töltsön be (előnézeti kép + link).

Betűtípusok: kevesebb font = gyorsabb oldal

• 1–2 betűcsalád, 2–3 vastagság (weight) maximum.
• Kerüld, hogy 6–8 különböző weight töltődjön be ugyanazon az oldalon.
• Ha lehet, használj rendszerfontot vagy optimalizált, lokálisan hostolt fontot.

Gyors minták: bevált oldalszerkezetek

Az alábbi minták segítenek abban, hogy Elementorral is gyorsan betöltődő, mégis üzletileg hatékony oldalakat építs. A közös elv: blokkonként gondolkodj (1 szekció = 1 cél), és kerüld a túlkomplikált, túl “nested” felépítést.

Minta 1: Főoldal (gyors, üzleties)

Ajánlott felépítés:

1. Hero (cím + 1 kép + 1 CTA)
2. Bizalom (logósor / értékelések – statikus)
3. 3–6 előny (egységes “kártyák”, kevés widget)
4. Kiemelt szolgáltatás/termék (1 blokk)
5. Rövid GYIK (accordion/collapse jelleg, de ne legyen túl sok)
6. CTA + Footer

Miért gyors? Mert “blokkonként” épül: a böngészőnek kevesebb felesleges DOM-ot, CSS-t és JS-t kell kezelnie, mintha mindent egy túlkomplikált, sok elemből álló óriás szekcióba zsúfolnál.

Tipp: A főoldal hero részét tartsd “könnyűnek”: slider/videó helyett 1 optimalizált kép + 1 gomb sokszor látványosan javítja a betöltést.

Minta 2: Landing oldal (kampány)

Ajánlott felépítés:

1. Hero + 1 CTA
2. Probléma → Megoldás (egyértelmű, rövid szekció)
3. Social proof (1 sor: logók / értékelés / számok)
4. Részletek (max. 3–4 szekció, lényegre törően)
5. GYIK (max. 6 kérdés)
6. CTA (záró ajánlat, 1 fő célművelettel)

Miért gyors? Mert a landing oldal célja a fókuszált konverzió, ezért ideális esetben kevesebb menü, kevesebb “dísz”, kevesebb interaktív elem kerül rá. Így a betöltés és a felhasználói élmény mobilon is stabilabb.

Tipp: Landing oldalon különösen fontos, hogy ne tölts be mindent azonnal (chat, térkép, extra tracking, több külső script). Ami nem kell a konverzióhoz, azt érdemes késleltetni vagy elhagyni.

Minta 3: Blogcikk (SEO + gyors olvasás)

Ajánlott felépítés:

1. Minimál fejléc (ne legyen túl magas, ne legyen túl sok menüelem)
2. Tartalom (képek méretezve, a hajtás alatt lazy load)
3. Kapcsolódó cikkek (max. 3–4, ne legyen túl sok widget)
4. Footer

Miért gyors? A blogcikk elsődleges célja az olvasás, ezért a “kevesebb zavaró elem” elvvel a betöltés is gyorsabb: kisebb DOM, kevesebb JS, kevesebb extra szekció.

Tipp: Blogcikknél a túl sok “kapcsolódó doboz”, social widget és beágyazott külső elem (pl. több videó) könnyen lelassítja a mobilos élményt. Tartsd meg a fókuszt a szövegen és 3–4 kapcsolódó ajánláson.

Javasolt optimalizálási sorrend (gyors checklist)

Cél: gyors nyereség minimális kockázattal, majd fokozatos finomhangolás.

1. Elementor teljesítmény kapcsolók bekapcsolása (ha elérhető), majd kulcsoldalak tesztelése.
2. Inline ikonok használata, felesleges ikon-készletek kerülése.
3. Container alapú építés az új szekcióknál, a legnehezebb régi részek fokozatos átépítése.
4. Widget-diéta: kevesebb spacer, kevesebb “mindent tudó” widget, kevesebb felesleges elem.
5. Hero egyszerűsítése: 1 kép, 1 üzenet, 1 CTA – slider nélkül.
6. Külső scriptek rendbetétele: ami nem kell az oldalon, ne töltődjön.
7. Element Caching csak statikus blokkokra (óvatosan).

Hibakeresés: ha szétesik a design vagy lassú marad

1) Szétesett a design bekapcsolás után

• Gyakori ok: a custom CSS régi wrapper osztályokra épül, amelyek megváltoztak.
• Teendő: keresd meg a problémás részek CSS-szelektorait, és igazítsd az aktuális HTML struktúrához.

2) Lassú maradt a betöltés

• Nézd meg, nincs-e túl sok külső script (chat, heatmap, több tracking, map).
• Vizsgáld meg a hero (LCP) képet: méret, tömörítés, betöltés.
• Csökkentsd a DOM méretet: kevesebb nested container, kevesebb widget.

3) Lassú az Elementor szerkesztő (editor)

• Csökkentsd a felesleges pluginokat, és nézd meg az erőforrásokat (memória / PHP beállítások).
• Óriás oldalaknál bontsd kisebb, újrahasznosítható sablonrészekre a tartalmat (ahol lehetséges).

Elakadtál? Írj nekünk ticketet, és add meg: melyik oldalon jelentkezik a gond, milyen beállítást kapcsoltál be, és küldj képernyőképet a hibáról: https://ugyfeladmin.tarhely.eu/submitticket.php

GYIK

Kapcsolókat bekapcsoltam, és eltűntek stílusok/spacingek. Mitől lehet?

Leggyakrabban egyedi CSS vagy sablon módosítás épül olyan HTML/wrapper osztályokra, amelyek módosultak. Ilyenkor a custom CSS szelektorokat kell frissíteni az aktuális kimenethez.

Miért lassú mobilon, ha desktopon jónak tűnik?

Mobilon gyengébb a CPU és sokszor a hálózat is. A túl sok JS (slider, animációk, add-onok, külső scriptek) és a túl nagy DOM ott sokkal jobban “fáj”.

Element Caching mehet mindenre?

Nem javasolt. Statikus tartalomra jó lehet, de dinamikus tag-ek, shortcode-ok, személyre szabott részek esetén hibás vagy beragadt tartalmat okozhat.

Mi az egyetlen legnagyobb “instant” gyorsítás Elementorban?

Általában a hero egyszerűsítése (slider/videó helyett 1 optimalizált kép + 1 CTA) és a widget-diéta (felesleges widgetek, animációk, add-onok csökkentése).