Ak vytvárate weby na Divi, alebo ste práve začali, môžte sa stretnúť s tým, že stránka sa najprv zobrazý neštýlovaná a potom sa načíta správne. To isté sa môže stať aj pri webe, ktorý vôbec nepoužíva Divi, alebo dokonca nieje postavený na CMS WordPress. Tento efekt sa volá FOUC (Flash of unstyled content).
S týmto efektom, obsah bude skákať hore-dole a vyzerá to veľmi neprofesionálne
Ako sa to dá fixnúť, pomocou JavaScriptu?
Vo väčšine prípadov je riešenie, pridať tento kúsok kódu do hlavičky:
<script>
var elm = document.getElementsByTagName( 'html' )[0];
elm.style.display = 'none';
document.addEventListener( 'DOMContentLoaded', function( event ) {
elm.style.display = 'block';
} );
</script>V jednoduchosti:
- celý obsah tagu
htmla teda komplet stránka sa schová, pomocou štýludisplay: none - po načítaní celého obsahu dokumentu sa opäť obsah tagu
htmlzobrazí pomocou štýludisplay: block
Ako to fixnúť, aby to fungovalo aj na prehliadači, kde je JavaScript vypnutý?
V prvom rade, toto riešenie bude fungovať pre všetky prehliadače. Na jednej strane je zložitejšie, na druhej strane funguje podobne. Najprv sa obsah schová a potom zobrazí, pomocou css, iba prístup je iný.
Prvý krok
Do hlavičky našej témy pridáme štýl, ktorý schová obsah tagu html(pre príklad, použijem hlavičku z témy Twenty Twenty One)
<?php
/**
* The header.
*
* This is the template that displays all of the <head> section and everything up until main.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since Twenty Twenty-One 1.0
*/
?>
<!doctype html>
<html <?php language_attributes(); ?> <?php twentytwentyone_the_html_classes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>html{visibility: hidden;opacity:0;}</style>
<?php wp_head(); ?>
</head>Takto zabezpečíme, že sa obsah schová, pomocou vloženého štýlu: html{visibility: hidden;opacity:0;}
Druhý krok
Teraz príde tá zábavnejšia časť.
Najprv musíme používať vlastný stylesheet, ktorý by sa mal načítavať ako posledný a na úplne posledný riadok si pridáme štýl, pre zobrazenie obsahu:
html {
visibility: visible;
opacity: 1;
}Takto zabezpečíme, že sa nám obsah zobrazí až keď sú komplet štýly načítané a teda k vykresleniu stránky dôjde tak, ako si to predstavujeme.
Ak nepoužívate vlastný stylesheet, ale používate stylesheet témy, alebo child-témy, toto vložte na jeho koniec. Ak používate svoj vlastný stylesheet, tak si túto deklaráciu pridajte do neho.
Eliminované, ale…
Toto riešenie je super, ale má svoje limity. V prvom rade, pri 3G a rozsiahlej stránke, bude vidieť návštevník prázdnu stránku po celkom dlhú dobu (viete si to otestovať, pomocou „Google Chrome Inspector Network Tab“, kde si nastavíte „fast 3G mode“ a vypnúť Cache) a taktiež pri neoptimalizovanej stránke.
Ak máte na stránke veľa obrázkov, určite s týmto riešením použite lazy loading pre obrázky.
Pri použití WpRocket je lazy load súčasťou pluginu, ako aj CDN pre obrázky, čo tiež pomôže pri zrýchlení načítania stránky.
