Proč web při načtení bliká: hlavička vložená přes fetch()

Web, který se při načtení „divně“ chová, je častý důvod, proč se na mě lidé obracejí. Stránka chvíli bliká, nahoře se na okamžik objeví prázdné místo a teprve potom naskočí hlavička. Někdy se navíc zobrazuje celoobrazovkový načítací efekt, který skryje obsah až do úplného načtení.

Za tím bývá obvykle jeden a týž postup.

Jak chyba vzniká

U statických webů se hlavička a patička opakují na každé stránce. Aby se nemusely kopírovat, někdo je dá do samostatného souboru a vloží je do stránek JavaScriptem:

<div id="header"></div>
<script>
fetch('/partials/header.html')
  .then(response => response.text())
  .then(html => {
    document.getElementById('header').innerHTML = html;
  });
</script>

Vypadá to elegantně a na serveru to funguje. Má to ale dva problémy.

Blikání. V HTML, které prohlížeč dostane jako první, hlavička není. Objeví se až po dalším požadavku. Do té doby je nahoře prázdné místo a obsah pod ním se po vložení hlavičky posune.

Nefunguje ze souboru. Když stránku otevřete přímo z disku, prohlížeč požadavek fetch() zablokuje. Web pak nemá hlavičku vůbec. Pro vývoj i předávání webu klientovi je to nepříjemné.

K tomu se často přidává načítací efekt, který čeká na událost load, tedy na načtení všeho včetně obrázků. Návštěvník pak čeká na něco, co mohl vidět hned.

Proč to vadí i vyhledávání

Vyhledávače umí JavaScript zpracovat, ale děje se to později a ne vždy spolehlivě. Pokud je součástí hlavičky navigace, odkazy v ní se v původním HTML nenacházejí. Čím více důležitého obsahu je přímo v HTML, tím méně je co pokazit.

Oprava u kořene

Hlavičku a patičku vložím přímo do všech stránek. Aby se přitom neopakovala ruční práce, napíšu jednoduchý skript, který je při úpravě zdrojových souborů znovu synchronizuje do všech stránek. Zdroj hlavičky je pořád jeden, ale výsledek je statické HTML.

Dále:

• odstraním celoobrazovkový načítací efekt, obsah je vidět hned,
• skriptům přidám atribut defer, aby neblokovaly zobrazení stránky,
• ověřím, že web funguje i po otevření ze souboru.

Při přestavbě webu s 26 stránkami jsem takto zbavil web blikání a načítací obrazovky a stránky se zobrazují okamžitě.

Co z toho vyplývá

Pokud váš web bliká nebo se načítá pomalu, nemusí být příčina v hostingu. Často stačí podívat se, co se děje při načítání, a opravit jednu věc na správném místě. Pokud je oprava složitější než přestavba, řeknu vám to rovnou.