Gyorsabb oldal konténerekkel

A konténerek megfelelő használata látványosan javíthatja az oldal teljesítményét. A korábbi szakasz, oszlop és belső szakasz felépítés sok elválasztó elemet (div) hozott létre, a konténer ezeket kiváltja, így kisebb lesz az oldal DOM-ja, vagyis kevesebb elemet kell a böngészőnek feldolgoznia.

Egy példa az optimalizálásra

Az eredeti kialakításban két szakasz volt: az elsőben egy középre igazított cím, a másodikban oszlopokba tett, képaláírásos képek. Ugyanez az eredmény egyetlen konténerrel is elérhető. Az öt widget a Flexbox tulajdonságokkal (irány, igazítás, elosztás, sortörés) helyezkedik el a konténeren belül. Ez az optimalizáltabb kialakítás, és sokkal kevesebb elválasztót tartalmaz.

Összehasonlítás: szakasz és konténer

Vegyünk egy öt elemes felépítést: egy cím widget alatt egy belső szakasz négy oszloppal, mindegyik oszlopban egy ikondoboz widget, belső térközzel beállítva.

Hagyományos módszer (szakasz, oszlopok, belső szakasz). Ez elérte a kívánt eredményt, de sok egymásba ágyazott div elemet hoz létre a DOM-ban. Mivel a teljesítmény a keresési találatok rangsorolásának fontos tényezője, érdemes csökkenteni a számukat.

Konténerrel. Az öt elem egyetlen konténerbe kerül, és ugyanaz a megjelenés jön ki. A Szerkezet ablakban már látható, hogy kevesebb az elem. A Flexbox vezérli a gyermekelemek elrendezését és szélességét, ezért kevesebb div kell.

A HTML-kimenet összehasonlítása (a CSS csökkenését nem vizsgáltuk):

DOM	Div elemek	Kódsorok
Szakasz	37	105
Konténer	23	76
Összes csökkenés	14	29

A konténer tehát ugyanahhoz a megjelenéshez 14-gyel kevesebb div elemet és 29-cel kevesebb kódsort használ, ami jobb oldalteljesítményt eredményez.

Az optimalizált DOM-kimenet és az egyéni kód

Az optimalizált DOM-kimenet azzal gyorsítja az oldalt, hogy csökkenti az Elementor által előállított HTML-ben a burkoló elemek számát. Kevesebb elem egyszerűbb kódot, jobb olvashatóságot és gyorsabb oldalt jelent.

Fontos: a változás a jelölést is módosítja, ezért hatással lehet a webhelyeden használt egyéni CSS-re és kódra. Ha az egyéni kódod érintett, írd át a CSS-t az új HTML-szerkezethez igazítva.

Az Elementor 3.0-tól kezdve több burkoló elemet távolítottak el a kimenetből:

Elementor-verzió	Eltávolított burkoló osztályok
3.0	.elementor-inner, .elementor-row, .elementor-column-wrap
3.2	.elementor-image, .elementor-text-editor
3.6	elementor-section-wrap

A 3.19-es verziótól ezek a DOM-fejlesztések az Elementor alapjába kerültek, vagyis már nem kapcsolhatók ki. Ha az egyéni CSS-ed vagy kódod valamelyik fenti osztályra épül, át kell írnod olyan osztályokra, amelyek megmaradtak, különben a stílusaid és a kódod nem fog működni.

Kapcsolódó fejezetek

• Hány konténer legyen az oldalon?
• Kattintható konténer