Ako zrýchliť načítanie firemného webu bez zbytočného hádania

Prečo sa firemný web načítava pomaly?

Najčastejšie nejde o 1 chybu, ale o súbeh 2 až 4 problémov naraz. Pri firemných weboch bývajú najprv príliš veľké obrázky a videá, zbytočné skripty, slabé cacheovanie a nevhodný hosting. Hlbšie príčiny, napríklad pomalé databázové dotazy alebo neefektívny kód, zvyčajne nasledujú až potom.

Pri bežnom firemnom webe sa príčiny oplatí preverovať v tomto poradí, od najpravdepodobnejších po menej časté:

1. Ťažké vizuály na úvode stránky
   Hero bannery, veľké PNG, fullscreen videá a obrázky nahrané vo vyššom rozlíšení, než web reálne potrebuje, dokážu spomaliť už prvý kontakt návštevníka so stránkou.

2. Priveľa JavaScriptu a externých doplnkov
   Chat, mapy, rezervačné widgety, cookie lišta, meracie kódy, popupy, formuláre a sociálne prvky sa často spúšťajú naraz. Samostatne pôsobia neproblematicky, spolu však výrazne zvyšujú záťaž prehliadača.

3. Chýbajúca alebo zle nastavená cache
   Ak sa stránka pri každej návšteve generuje od nuly, server aj prehliadač opakovane vykonávajú tú istú prácu bez potreby.

4. Nevhodný hosting alebo slabá konfigurácia servera
   Ak je pomalá už prvá odpoveď servera, kvalitný dizajn problém nevyrieši. Výrazne sa to prejaví pri kampaniach, vyššej návštevnosti alebo weboch s viacerými podstránkami a formulármi.

5. Neporiadok v CMS, pluginoch a téme
   Týka sa to najmä webov, ktoré sa roky rozširovali po častiach. Staré pluginy, duplicitné funkcionality a univerzálne témy často pridávajú veľa kódu, ktorý web reálne nepotrebuje.

6. Databáza, API a vlastná logika webu
   Ak web čerpá dáta z CRM, cenníkov, feedov alebo interných systémov, spomalenie môže vzniknúť až na tejto vrstve. V takom prípade už nejde o kozmetickú optimalizáciu, ale o technický návrh riešenia.

Preto sa oplatí nehodnotiť iba veľkosť obrázkov, ale celý reťazec od servera až po prvú interakciu používateľa.

Ako zistíte, čo web reálne spomaľuje?

Najrýchlejšie sa k príčine dostanete cez symptómy, nie cez odhady. Inak sa správa web brzdený obrázkami, inak web so slabým serverom a inak web zaťažený skriptami, formulármi alebo externými napojeniami. Keď presne určíte miesto spomalenia, okruh príčin sa výrazne zúži.

Tu je praktické mapovanie symptómov na pravdepodobné príčiny:

• Pomalá je hlavne domovská stránka, podstránky sú citeľne rýchlejšie
  Najčastejšie ide o veľký banner, video, slider alebo priveľa prvkov nad ohybom.

• Na desktope je web znesiteľný, na mobile pôsobí ťažkopádne
  Typicky sú príčinou veľké obrázky, veľa skriptov, webfonty a prvky, ktoré sa načítavajú skôr, než ich návštevník reálne potrebuje.

• Prvá návšteva je pomalá, druhá už výrazne lepšia
  To zvyčajne naznačuje, že časť obsahu sa ukladá do cache, no nie dostatočne, prípadne iba na niektorých úrovniach.

• Spomaľujú len formuláre, katalóg, filtrovanie alebo vyhľadávanie
  Pravdepodobnejší je problém v databáze, pluginoch, vlastnej logike alebo v napojení na externý systém.

• Web sa zhorší počas kampane alebo po náraste návštevnosti
  V takom prípade treba preveriť serverové limity, chýbajúce cache vrstvy alebo neškálovateľné riešenie.

• Administrácia je pomalá rovnako ako front-end
  Často ide o kombináciu slabšieho hostingu, preťaženej databázy a príliš veľa rozšírení.

Najpraktickejší postup je netestovať iba homepage, ale aj službovú podstránku, kontaktný formulár a 1 stránku s najvyššou návštevnosťou. Ak sa na webe objavujú aj ďalšie slabé miesta, často sa podobajú tým, ktoré rozoberáme v článku o najčastejších chybách firemných webov.

Čo viete zrýchliť hneď sami bez zásahu developera?

Ak web nie je technicky poškodený, prvé zrýchlenie často dosiahnete už v priebehu 1 dňa. Najväčší efekt zvyčajne prinášajú obrázky, nepotrebné skripty, preplnená úvodná stránka a zbytočné pluginy. Zmeny robte po 1 a po každej z nich výsledok znova zmerajte.

Začnite týmito krokmi:

1. Zmenšite a orežte obrázky podľa reálneho miesta na webe
   Nenahrávajte fotku širokú niekoľko tisíc pixelov na miesto, kde sa zobrazí iba v malom boxe. Pomôže aj prevod do modernejších formátov a odstránenie starých obrázkov, ktoré sa už nepoužívajú.

2. Odstráňte alebo odložte všetko, čo nie je kritické pri prvom načítaní
   Chat, mapy, pop-upy, feedy zo sociálnych sietí, nadbytočné animácie a video v pozadí málokedy musia bežať okamžite.

3. Prejdite pluginy a externé doplnky jeden po druhom
   Ak neviete presne pomenovať, na čo plugin slúži, je vhodný na revíziu. Pri firemnom webe sa často roky hromadia nástroje, ktoré už nik nepoužíva.

4. Zapnite cache možnosti, ktoré váš CMS alebo hosting už ponúka
   Mnohé weby ich majú pripravené, no nik ich nenastavil alebo sa po úprave webu prestali používať správne.

5. Zjednodušte prvý screen domovskej stránky
   Jeden silný odkaz, jasný text a primeraný vizuál. Každý ďalší slider, efekt a skript predlžuje čas do prvého dojmu.

6. Skontrolujte fonty a ich rezy
   Ak web načítava niekoľko rodín písma v mnohých hrúbkach, najviac to spomaľuje mobil.

Ak zároveň riešite, či vaša stránka nie je preplnená aj obsahovo a štruktúrne, pomôže vám aj prehľad, čo má mať kvalitná firemná webová stránka.

Kedy pomôže hosting, cache a CDN najviac?

Hosting, cache a CDN majú najväčší prínos vtedy, keď web nestráca výkon iba kvôli obsahu stránky, ale aj kvôli rýchlosti doručenia obsahu návštevníkovi. Ak je pomalá už prvá odpoveď servera, výkon klesá pri špičke alebo sa rovnaký obsah generuje opakovane, príčina býva skôr v infraštruktúre než v dizajne.

V praxi to býva najčastejšie v týchto situáciách:

• Web reaguje pomaly ešte predtým, než sa začnú sťahovať obrázky a skripty
  To poukazuje na server, databázu alebo konfiguráciu hostingu.

• Výkon kolíše podľa času a návštevnosti
  Ráno je všetko v poriadku, počas kampane alebo po newsletteri sa web spomalí. Ide o typický signál, že riešenie nemá rezervu.

• Na webe sa často opakuje ten istý obsah
  Stránky služieb, články, referencie a statické bloky sú presne typ obsahu, ktorý má zmysel doručovať efektívnejšie cez cache.

• Návštevníci prichádzajú z rôznych lokalít alebo sa na webe nachádza veľa médií
  CDN vie skrátiť cestu k statickým súborom a znížiť záťaž hlavného servera.

Dôležité je, že infraštruktúra nezachráni web, ktorý je sám o sebe ťažký. Ak má stránka priveľa skriptov, neefektívnu tému alebo zle navrhnuté šablóny, lepší hosting problém iba posunie o kúsok ďalej. Najlepší výsledok prichádza vtedy, keď sa technické úpravy webu spoja s rozumným serverovým nastavením.

Kedy už treba zásah do kódu a architektúry webu?

Keď ste upratali obrázky, pluginy aj cache a web je stále pomalý, problém býva hlbšie v kóde alebo architektúre riešenia. Typické je to pri weboch napojených na CRM, formulárové workflow, katalógy, filtre, vlastné administrácie alebo marketingové integrácie. Vtedy nepomáha ďalší zrýchľovací tip, ale technická analýza správania webu pod kapotou.

Tu už zvyčajne treba riešiť veci ako:

• neefektívne databázové dotazy,
• poradie načítania skriptov a štýlov,
• render blocking prvky v hornej časti stránky,
• duplicitné API volania,
• zle navrhnuté šablóny alebo moduly,
• nevhodné napojenie analytiky, formulárov a automatizácií,
• príliš ťažké CMS riešenie vzhľadom na reálnu potrebu firmy.

Pri takomto stave sa oplatí prestať opravovať výkon po malých častiach a posúdiť web ako firemný nástroj. Ak má prinášať dopyty, prepájať sa s procesmi a rásť spolu s firmou, potrebuje primerane navrhnutý základ. Práve tu dáva zmysel profesionálna tvorba webových stránok, pri ktorej sa výkon rieši už v návrhu štruktúry, šablón a integrácií, nie až po spustení.

Ak váš web už zároveň plní úlohy interného nástroja, klientského portálu alebo zložitejšieho workflow, môže byť čas pozrieť sa aj na rozdiel medzi webom a webovou aplikáciou. Často práve nesprávne zvolený typ riešenia vysvetľuje, prečo sa výkon nedá dlhodobo stabilizovať.

Ako zabránite tomu, aby sa web po pár mesiacoch nespomalil znova?

Web sa zvyčajne nespomalí naraz, ale postupne. Pribudne nový merací kód, ďalší formulár, chat, pop-up, video, plugin alebo microsite sekcia a výkon sa potichu zhoršuje. Prevencia preto nestojí na jednorazovom audite, ale na jednoduchých pravidlách, ktoré držia pod kontrolou každú ďalšiu zmenu.

Zaveďte si tento krátky checklist:

• Každý nový skript musí mať dôvod
  Ak neviete pomenovať jeho prínos pre marketing, obchod alebo podporu, na webe pravdepodobne nemá opodstatnenie.

• Obrázky a videá majú mať schvaľovací štandard
  Nie nahrať všetko, čo prišlo od grafika, ale dodržať jasné pravidlá pre rozmery, formát a miesto použitia.

• Merajte výkon na 3 až 5 kľúčových stránkach pravidelne
  Nestačí iba homepage. Sledujte aj službovú podstránku, článok, formulár a stránku s najvyššou návštevnosťou.

• Pred nasadením zmien testujte na stagingu
  Najmä pri pluginoch, trackingu, formulároch a nových sekciách.

• Raz za čas urobte obsahové a technické upratovanie
  Odstráňte to, čo sa už nepoužíva. Staré knižnice, nepotrebné sekcie a zabudnuté doplnky sú častý tichý problém.

• Marketing a vývoj musia rozhodovať spolu
  Výkon webu sa najčastejšie zhoršuje vtedy, keď každé oddelenie pridáva svoje nástroje bez spoločných pravidiel. Tento problém býva blízky aj tomu, ako firmy riešia online marketing pre firmu, teda bez jasných priorít, merania a technickej disciplíny.

Ak sa tieto pravidlá dodržia, výkon zostane stabilný aj pri ďalšom raste webu.

Ak chcete vyriešiť, ako zrýchliť načítanie firemného webu nielen krátkodobo, ale aj na úrovni štruktúry, šablón a technických napojení, v BeCode vieme navrhnúť výkonný firemný web okolo reálnych procesov firmy. Výsledkom je riešenie, ktoré sa neopravuje po častiach, ale má technický základ pripravený na rast.

Časté otázky

Ako rýchly by mal byť firemný web?

Firemný web by mal pôsobiť rýchlo už pri prvej návšteve a nemal by používateľa zdržiavať pri čítaní ani pri odoslaní formulára. Dôležitejšie než 1 univerzálne číslo je to, či výkon zostáva stabilný na mobile, na kľúčových podstránkach a počas kampaní.

Spomaľujú web pluginy a externé skripty vždy?

Nie vždy, no veľmi často áno, najmä keď sa na webe roky hromadia bez kontroly. Problém nebýva v samotnej existencii pluginu alebo skriptu, ale v ich počte, kvalite, poradí načítania a v tom, či sa spúšťajú všade, aj keď ich daná stránka nepotrebuje.

Má zmysel CDN aj pre menší firemný web?

Áno, ak web obsahuje viac obrázkov, médií alebo má kolísavú návštevnosť, CDN vie pomôcť aj menšiemu firemnému webu. Sama o sebe však nezachráni zlý kód ani preťaženú homepage, preto funguje najlepšie ako súčasť širšej optimalizácie, nie ako jediné riešenie.

Kedy sa oplatí web prerobiť namiesto ďalšieho opravovania?

Prerábka sa oplatí vtedy, keď sa pomalosť vracia po každej úprave, web je poskladaný z výnimiek a doplnkov alebo už plní úlohy, na ktoré pôvodne nebol navrhnutý. Ak výkon blokuje obchodné výsledky a bežné opravy nepomáhajú, nový technický základ býva lacnejší než nekonečné záplaty.