A contain CSS tulajdonság előnyeiből érthetetlenül kevés weblap profitál, pedig minden valamire való böngésző támogatja a lehetőségét. Jól használva jelentősen csökkenthetjük vele a weblapok erőforrásigényét, ami mobilon egyet jelent a Core Web Vitals mutatók javulásával.
Egy 2024-es, játékokhoz összerakott PC-nek egy weblap megjelenítése meg sem kottyan, de az alsó- vagy középkategóriás mobiloknál egyáltalán nem ilyen jó a helyzet. A legkomolyabb problémát a dinamikus tartalmak jelentik, amelyeknél a layout-thrashing probléma miatt a böngészőkkel gyakran a valóban szükséges feladatok többszörösét végeztetjük el.
A layout-thrashing jelenség
Nézzük röviden a probléma gyökerét. Egy weboldal megjelenítése során, amikor a böngésző úgy ítéli meg, hogy már elegendő tartalom áll rendelkezésre, akkor megkezdi az oldal elemeinek elrendezését, megrajzolását. A gond, hogy eközben is töltődhetnek be és futhatnak olyan javascriptek, amelyek a DOM fát módosítják. Például hirdetéseket jelenítünk meg, más oldalakról származó tartalmakat ágyazunk be.
A legnagyobb probléma, hogy a DOM módosításai után a böngésző a legtöbb esetben újrakezdi az elrendezés kiszámítását (reflow). Hiszen nem áll rendelkezésére információ arról, hogy egy DOM elem változása a többi elem méretére, pozíciójára is hatással van-e. A böngésző gyakorlatilag kidobja az addig elvégzett munka eredményét, és kezd mindent elölről.
Nem ritka, hogy a fenti probléma akár többször is jelentkezik már az első felhasználó számára látható pixelek megjelenítése előtt. Ha a kidobott munkamennyiség jelentős, esetleg a probléma többször ismétlődik, akkor máris a layout-thrashingről beszélünk. A Chrome DevTools Performance paneljén általában jól tetten érhető a jelenség.
A Performance panelen a Layout (lila) és a Paint (zöld) szakaszok érdekesek számunkra. Minél több van ezekből, annál esélyesebb, hogy a böngészőnkkel fölös köröket futtatunk.
Mit okoz a layout-thrashing?
Az oldal megjelenítését a layout-thrashing komolyan késlelteti, hiszen a böngésző erőforrásai fölöslegesen pazarlódnak el. Ez a késleltetés és a fölöslegesen elvégzett munka a CWV mutatók közül elsődlegesen az FCP, az LCP és az INP értékekre hat negatívan.
Itt kerülhet képbe a „contain” tulajdonság, amivel korlátozhatjuk, hogy egy adott HTML elem és a leszármazottai hogyan hathatnak a lap többi részére. A böngészőnek ezzel a tudtára adhatjuk, hogy az adott elem változásai hogyan hathatnak a lap más részeire.
Egy egyszerű példa a contain használatára
Az alábbi egyszerű példa jól szemlélteti a contain beállítás egyszerűségét és egyben nagyszerűségét. Lehetőséget ad rá, hogy elemeket szinte korlátozott „konténerbe” zárjunk. Ezzel a beállítással a böngészőnek már nem kell újraszámolnia valamennyi elem elrendezését lapon, csak mert egyetlen elem tartalma változik.
HTML
...
<div class="fixed">
<div id="div-gpt-ad-123123123-0"></div>
</div>
...CSS
.fixed {
width: 300px;
height: 250px;
contain: strict;
}A fenti példában a „contain” tulajdonság „strict” beállításával, egyetlen CSS sorral elértük, hogy a 300x250px méretű DIV egy zárt konténerré vált. Ezzel a hirdetési egységen belül bármi történhet később, az nem hat ki lap többi részére. A böngésző a hirdetés megjelenésekor és frissítésekor is tudni fogja, hogy nem kell a teljes oldalt újrarajzolnia.
Fontos, hogy a contain tulajdonságot nagyon óvatosan kell használni, hiszen indokolatlan korlátozások problémákat is okozhatnak. Ha azonban jól használjátok, akkor nagyon sokat megtakaríthattok vele a böngésző erőforrásaiból. Ez pedig esélyesen komolyan kihat a CWV (Core Web Vitals) mutatokra is, főképp komplexebb oldalaknál.
További információ:
