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

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.

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.