Web je vizitka. U reklamní agentury dvojnásob – těžko někoho přesvědčíte, že mu postavíte rychlý a promyšlený web, když ten váš se načítá jako přes modem. Tak jsme si ho postavili znovu.
Odkud jsme šli
Původní prezentace běžela na WordPressu s Elementorem. Nebylo to špatné řešení – v době, kdy vznikala, dávalo smysl. Jenže se to časem podepsalo:
- úvodní stránka posílala přes 330 kB HTML a k tomu třicet dalších souborů
- písma se tahala z Google Fonts, tedy z cizího serveru
- každá drobná úprava znamenala klikání v editoru a čekání, než se stránka přerenderuje
- struktura webu žila jen v databázi, takže se nedala verzovat ani rozumně přenášet
Co bylo cílem
Zadání jsme si dali jednoduché a nekompromisní: vzhled zůstane na pixel stejný, všechno ostatní se změní. Klientům se web líbil, nebyl důvod ho překreslovat. Problém byl pod kapotou.
Vedle toho tři věci, na kterých jsme trvali:
- Obsah musíme spravovat sami, bez zásahu do kódu.
- Web musí být připravený na vyhledávače, ne to řešit dodatečně.
- Nesmí odesílat data návštěvníků nikam, kam nemusí.
Jak jsme postupovali
Vzhled jsme nepřekreslovali od oka. Odměřili jsme původní web přímo v prohlížeči – rozměry sekcí, řádkování, velikosti písma, odsazení. Tyhle hodnoty jsme přenesli do nového kódu a pak zpětně ověřovali, že sedí. Sekce dnes odpovídají originálu na jednotky pixelů.
Základ tvoří Winter CMS a Tailwind CSS. Winter stojí na Laravelu, takže struktura webu žije v repozitáři a dá se verzovat jako každý jiný kód. Obsah zůstává v administraci, kde má být.
Dynamické části běží na vlastních pluginech, které jsme pro tenhle web napsali:
- Co umíme – bloky služeb na úvodní stránce
- Projekty – reference včetně detailů a galerií
- Tým – lidé, kteří to dělají
- Klienti – loga s odkazy
- Slovník pojmů – rejstřík s českým řazením, včetně spřežky CH
- SEO – metadata, strukturovaná data, sitemapa
- Blogísek – sekce, kterou právě čtete
Co z toho má návštěvník
Stránka se načte znatelně rychleji. Úvodní strana dnes posílá 76 kB HTML místo původních 330 kB a všechny styly se vejdou do jediného souboru o 31 kB.
Písma hostujeme sami. Special Elite, DM Sans i Inter leží na našem serveru. Prohlížeč tak neposílá žádný požadavek na Google – návštěvník o sobě nedává vědět nikomu, koho si nevybral.
Obrázky se zmenšují samy. Cokoli nahrajeme do administrace, se automaticky zmenší na rozumnou velikost a překomprimuje. Nemůže se stát, že do článku propašujeme čtyřmegový snímek z foťáku.
Cookies řešíme poctivě. Lišta se ptá dopředu, nic se nenačte bez souhlasu a odmítnout jde stejně snadno jako přijmout – jedním kliknutím, stejně velkým tlačítkem. Souhlas jde kdykoli změnit.
Co z toho máme my
Obsah spravujeme sami. Nový projekt, člen týmu, klient nebo pojem do slovníku je otázka na minutu v administraci. Zbytek webu žije v Gitu, takže víme, kdo co kdy změnil, a nasazení je jeden příkaz.
Co dál
Tohle není hotová věc, ale základ, na kterém se dá stavět. Chystáme rozšíření referencí a chceme sem psát pravidelně – o projektech, o tom, co se povedlo, i o tom, co ne. To druhé bývá zajímavější.
Kdyby vás na webu něco zaujalo nebo naopak zarazilo, ozvěte se. Rádi si o tom popovídáme.