Přestavba stavprofi.cz

Shrnutí pro zájemce o web

Stavební firma z Příbrami měla web o 26 stránkách, který byl pomalý na pocit: při načtení blikal, chvíli se zobrazovala prázdná obrazovka a obsah se objevil až po chvíli. Navíc obsahoval spoustu krátkých, podobných stránek, které si mezi sebou konkurovaly.

Přestavěl jsem ho tak, aby se zobrazoval okamžitě, měl méně a lepších stránek (z 26 na 14) a nový vzhled. A hlavně: nic ze starého webu nepřišlo v Googlu nazmar. Všechny staré adresy vedou na nové místo, takže zákazníci i vyhledávače trefí správně.

Web, který „divně“ naskakuje

Původní web byl postavený na šabloně s jQuery. Hlavička a patička se do stránek vkládaly až za běhu přes fetch(), takže stránka při načtení blikala bez hlavičky a při otevření ze souboru nefungovala vůbec. K tomu přidejte celoobrazovkový preloader, který odkryl obsah až po události load. Návštěvník tak čekal na to, co mělo být vidět hned.

Oprava u kořene

Hlavičku i patičku jsem vložil přímo do všech stránek a doplnil jednoduchý skript, který je při úpravě zdrojových souborů znovu synchronizuje. Preloader zmizel, skripty dostaly defer a obsah je vidět hned.

Proč ne „jen“ rychlejší fetch. Dynamické vkládání částí stránky vypadá elegantně, ale přesouvá práci do prohlížeče a po načtení způsobuje poskakování obsahu. Při otevření z disku navíc fetch() selže, protože prohlížeč takové požadavky blokuje. Statický HTML výstup je nejjednodušší a nejodolnější. Opakování hlavičky v každém souboru jsem vyřešil build skriptem v Pythonu, takže se udržuje na jednom místě.

Méně stránek

Web měl 26 stránek, z nichž osmnáct tvořily krátké stránky jednotlivých služeb, některé skoro duplicitní. Sloučil jsem je do šesti obsažnějších:

stavba rodinných domů,
zemní a výkopové práce,
zateplení a fasády,
rekonstrukce interiérů,
obkladačské práce,
exteriérové práce.

Každá má rychlé menu a sekce pro původní služby. Výpočet je jednoduchý: 26 − 18 + 6 = 14.

Pro vyhledávače jsou tenké, podobné stránky slabý signál a navzájem si konkurují. Jedna obsažná stránka na téma má větší šanci obstát. Pro návštěvníka je to přehlednější.

Cestou se našla i chyba: stránka nadepsaná „Fasáda“ byla obsahem celá o přípojkách inženýrských sítí. Přesunul jsem ji tam, kam patří.

Nic nezmizí z Googlu

Všech osmnáct starých adres dostalo v .htaccess přesměrování 301 na novou stránku i konkrétní sekci. Přesměrování 301 říká vyhledávači, že stránka se přestěhovala trvale, a hodnotu, kterou stará adresa nasbírala, přenáší na novou. Odkazy od jiných webů a uložené záložky tak dál fungují. Staré stránky jsou uložené stranou jako reference, mimo živý web.

Vzhled

Nová paleta vychází z cihlově červené a písečné, nadpisy sázím v Oswaldu a text v Inter pro čitelnost i v malém řezu.

Technický souhrn

Stack: HTML, jQuery, Apache .htaccess, build skript v Pythonu.
Načítání: hlavička a patička přímo v HTML, defer na skriptech, bez preloaderu.
Struktura: 26 stránek sloučeno na 14.
SEO: 18 přesměrování 301 na novou stránku a sekci.

Čísla

26 → 14 stránek webu po sloučení tenkých stránek
18 starých URL přesměrovaných pomocí 301
0 volání fetch() pro načtení hlavičky a patičky