# Villogás és stílus nélküli tartalom (FOUC)

> Mi okozza a stílus nélküli tartalom felvillanását, és hogyan szünteted meg oldalátmenettel, belépési animációval és a gyorsítótár-bővítmények beállításával.

A FOUC (flash of unstyled content, stílus nélküli tartalom felvillanása) az, amikor a böngésző előbb kirajzolja a nyers HTML-t, és csak utána tölti be és értelmezi a CSS-fájlokat. A megoldás három lépésből áll: bekapcsolod az **Oldalátmeneteket** a **Webhely beállításai** között, a főszakasz-konténerekre belépési animációt teszel, és a gyorsítótár- vagy CDN-bővítményben kizárod az Elementor CSS-fájljait az aszinkron betöltésből.

## Mi okozza?

- **Késve betöltődő stílusfájlok.** A böngésző letölti a HTML-t, mielőtt megkapná a külső CSS-fájlokat.
- **Halasztott CSS.** A gyorsítótár- és teljesítményoptimalizáló bővítmények aszinkron töltik a stíluslapokat, vagy az oldal aljára teszik őket.
- **Nehéz, optimalizálatlan elemek az oldal tetején.** A nagy hero képek késleltetik a megjelenítés kiszámítását és a CSS feldolgozását.

## 1. módszer: oldalátmenet vagy betöltésjelző

Az oldalátmenet vagy a betöltésjelző elfedi a megjelenítés késéseit, amíg az oldal betöltődik.

1. Nyiss meg egy oldalt az Elementor szerkesztőben.
2. Kattints a bal felső sarokban az Elementor-ikonra, és válaszd a **Webhely beállításai** menüpontot.
3. Nyisd meg az **Oldalátmenetek** szakaszt.
4. Válassz az alábbiak közül:
   - **Belépési animáció:** válassz egy animációt (például beúszást) a legördülő listából, hogy az oldal simábban jelenjen meg.
   - **Betöltésjelző:** nyisd ki a **Betöltésjelző** szakaszt, és állíts be animációs típust és stílust (például kört).
5. Kattints a **Módosítások mentése** gombra.

![A Webhely beállításai panel Oldalátmenetek szakasza a Belépési animáció legördülővel](./kepek/teljesitmeny-villodzas-oldalatmenetek.webp)

*A Webhely beállításai panel Oldalátmenetek szakasza a Belépési animáció legördülővel* (https://minta-bolt.hu/wp-admin/post.php?post=31&action=elementor&active-document=4)

Az **Oldalátmenetek** szakaszban a **Háttér** mező a betöltési animáció mögötti oldal színét adja meg (**Klasszikus** szín vagy **Színátmenet**).

## 2. módszer: belépési animáció a villogó elemre

1. Jelöld ki a villogó hero konténert.
2. Menj a **Haladó → Mozgási hatások → Belépési animáció** részhez.
3. Válassz egy animációt (például beúszást) a legördülő listából.

## 3. módszer: külső optimalizáló eszközök beállítása

Ha egy gyorsítótár-bővítmény vagy CDN késlelteti a stíluslapokat, zárd ki belőlük az Elementor CSS-fájljait:

1. Nyisd meg a gyorsítótár-bővítményed beállításait (például WP Rocket, LiteSpeed Cache vagy Autoptimize).
2. Keresd meg a **CSS halasztása**, **CSS aszinkron betöltése** vagy **Nem használt CSS eltávolítása** jellegű beállításokat.
3. A kizárt CSS-fájlok mezőbe vedd fel az `/wp-content/plugins/elementor/assets/css/` útvonalat.
4. Generáld újra a kritikus CSS-t az optimalizáló bővítményben, hogy a hajtás feletti stílusszabályok is benne legyenek.
5. Cloudflare esetén nyisd meg a **Speed → Optimization** lapot, és kapcsold ki a **Rocket Loader** kapcsolót.
6. Kapcsold be a betűtípusok előtöltését az optimalizáló bővítményben, hogy ne villanjon fel a stílus nélküli szöveg (FOUT).
7. Ürítsd ki a szerver és a böngésző teljes gyorsítótárát, hogy az új beállítások érvényesüljenek.

> **Megjegyzés**
>
> A FOUT (a betűtípus felvillanása) onnan jön, hogy az egyéni betűtípus letöltése késik, a böngésző pedig addig rendszer-tartalék betűtípussal jelenít meg. A betűtípusok előtöltése megoldja.

## Diagnosztikai eszközök

Ezekkel találhatod meg a megjelenítést blokkoló erőforrásokat és a stíluslapok betöltési sorrendjét:

- **Google PageSpeed Insights:** kiemeli a „Megjelenítést blokkoló erőforrások eltávolítása” hibát, és követi a legnagyobb tartalmas kirajzolás (LCP) késéseit.
- **GTmetrix:** vízesésdiagramon mutatja az egyes CSS-fájlok betöltési sorrendjét.
- **WebPageTest:** képkockánkénti filmszalag-nézetben mutatja, mikor jelenik meg a stílus nélküli tartalom.

## Gyakori kérdések

**Beállítsam a CSS előállításának módját „Belső beágyazás”-ra a FOUC megszüntetéséhez?**
Nem. A **CSS előállításának módja** beállítás **Belső beágyazás** értéke ütközhet a gyorsítótárazással, és rontja a teljesítményt, főleg összetett webhelyeken. Hagyd **Külső fájl** értéken.

**Beállítja az Elementor ügyfélszolgálata a külső optimalizáló bővítményeket?**
Nem. A külső gyorsítótár-bővítmények, a szerver teljesítményhangolása és a CDN-optimalizálás nem tartozik az Elementor támogatásába.

**Miért villan fel rövid ideig a szöveg egyéni betűtípusnál?**
Mert a böngésző addig tartalék betűtípust mutat, amíg az egyéni betűtípus-fájl letöltődik. A betűtípusok előtöltése megszünteti.