# Gyorsabb oldal konténerekkel

> Hogyan csökkenti a konténer a DOM méretét a szakasz/oszlop/belső szakasz felépítéshez képest, számokkal.

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?](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-hany-kontener/)
- [Kattintható konténer](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-kattinthato-kontener/)