Při načítání webových stránek vytvořených pomocí Divi Builderu se můžete setkat s jevem zvaným FOUC (Flash of Unstyled Content), tedy s krátkým zobrazením neformátovaného obsahu před načtením stylů. Tento článek vysvětluje, co FOUC je, proč k němu dochází a jak jej efektivně odstranit v prostředí Divi Builderu.
Co je FOUC?
FOUC je jev, kdy prohlížeč zobrazí obsah webové stránky bez aplikovaných stylů, než se načtou externí CSS soubory. To vede k tomu, že uživatelé krátce uvidí neformátovaný obsah, což působí neprofesionálně a rušivě. Problém nastává, když prohlížeč vykreslí HTML obsah dříve, než jsou načteny a aplikovány všechny styly.
Příčiny FOUC v Divi Builderu
V Divi Builderu může k FOUC docházet z několika důvodů:
- Statická generace CSS souborů: Divi standardně generuje statické CSS soubory pro zlepšení výkonu. Pokud tyto soubory nejsou správně aktualizovány, může dojít k FOUC.
- Cache: Ukládání starých verzí CSS souborů v prohlížeči nebo na serveru může způsobit zobrazení neaktuálních stylů.
- Zpožděné načítání externích stylů: Pokud jsou externí CSS soubory načítány asynchronně nebo s prodlevou, může dojít k FOUC.
Jak odstranit FOUC v Divi Builderu
1. Přidání JavaScriptového kódu pro skrytí obsahu během načítání
Jedním z účinných řešení je dočasné skrytí obsahu stránky pomocí JavaScriptu, dokud nejsou načteny všechny styly. Tento kód zajistí, že se obsah zobrazí až po úplném načtení DOM:
<script type="text/javascript">
var AllEle=document.getElementsByTagName("html")[0];
AllEle.style.display="none";
document.addEventListener("DOMContentLoaded",function(event){ AllEle.style.display="block"; });
</script>Tento kód vložte do sekce <head> vaší stránky. V Divi to provedete následujícím způsobem:
- Přejděte do Divi > Nastavení šablony.
- Vyberte záložku Integrace.
- V sekci Přidat kód do
<head>vašeho webu vložte výše uvedený skript. - Uložte změny.
Tímto zajistíte, že se obsah stránky zobrazí až po úplném načtení stylů, čímž eliminujete FOUC.
2. Zakázání statické generace CSS souborů v Divi
Dalším krokem je zakázání statické generace CSS souborů, to může pomoci předejít problémům s FOUC:
- Přejděte do Divi > Nastavení šablony.
- Klikněte na záložku Nástroj na tvorbu a poté na Pokročilé.
- Najděte možnost Generování statického souboru CSS a klikněte na tlačítko Zakázat.
- Uložte změny.
Tímto zajistíte, že Divi bude generovat aktuální CSS soubory při každém načtení stránky.
3. Vyčištění cache prohlížeče a serveru
Cache může způsobit, že prohlížeč nebo server zobrazují zastaralé verze CSS souborů. Doporučuje se:
- Vymazat cache prohlížeče.
- Pokud používáte pluginy pro cache (např. WP Super Cache, W3 Total Cache), vymazat cache i zde.
- Vyprázdnit cache na úrovni serveru, pokud váš hosting tuto funkci nabízí.
4. Aktualizace Divi a WordPressu
Ujistěte se, že používáte nejnovější verze Divi a WordPressu, protože aktualizace často obsahují opravy chyb a vylepšení výkonu, která mohou ovlivnit FOUC.
