Ako zrýchliť web: obrázky, písma, skripty

Ak chcete web zrýchliť, najprv zmerajte rýchlosť v PageSpeed Insights a Search Console, nájdite najväčšie príčiny spomalenia a opravujte ich postupne. Najčastejšie ide o ťažké obrázky, nadbytočné písma, skripty tretích strán a pomalú odpoveď servera. Po každej zmene výsledok zmerajte znova, aby bolo vidieť, čo presne pomohlo.

Stručne

• Začnite meraním: ukazovatele LCP, INP a CLS a reálne údaje používateľov sú dôležitejšie ako hodnotenie 100 v laboratórnom teste.
• Obrázky: moderné formáty, veľkosť podľa miesta na obrazovke, lenivé načítanie pod prvou obrazovkou.
• Písma: jedna-dve rodiny, niekoľko rezov, formát WOFF2 a správne správanie počas načítania.
• Skripty: odstrániť nadbytočné tagy, zvyšok odložiť alebo načítavať po interakcii.
• Server: cachovanie stránok, CDN pre statické súbory, aktuálna verzia PHP alebo platforma s rýchlou odozvou.
• Mobilná verzia sa kontroluje na priemernom telefóne a pomalej sieti.

Čo merať a ako čítať správu

Google hodnotí zážitok návštevníka podľa troch ukazovateľov, ktoré sa nazývajú Core Web Vitals.

Hodnotenie sa opiera o reálne návštevy (75. percentil) samostatne pre telefóny a počítače. PageSpeed Insights ukazuje dva typy údajov: terénne, zozbierané od skutočných návštevníkov, a laboratórne, získané simuláciou v Lighthouse. Laboratórny test je vhodný na hľadanie príčin, terénne údaje ukazujú reálny zážitok. V Search Console je správa Core Web Vitals, ktorá zoskupuje stránky podľa stavu.

Kontrolujte typické stránky: hlavnú stránku, kategóriu, kartu produktu alebo služby a stránku s formulárom. Začnite mobilnou verziou, lebo práve na nej sú problémy výraznejšie. Zapíšte si základné hodnoty, aby ste mohli porovnať výsledok po zmenách.

Obrázky

Obrázky často tvoria väčšiu časť hmotnosti stránky, preto je vhodné začať práve nimi.

Veľkosť a formát

• Veľkosť súboru zodpovedá miestu na obrazovke: fotografia široká 4000 pixelov v bloku širokom 800 pixelov načítava zbytočné údaje.
• Kompresia bez viditeľnej straty kvality; moderné formáty WebP a AVIF bývajú zvyčajne ľahšie ako JPEG.
• Responzívne obrázky (atribúty srcset a sizes) dodávajú telefónu menší obrázok.
• Logá a ikony je vhodné robiť vo formáte SVG.
• Pre video sa používa náhľadový obrázok a načítanie po kliknutí.

Načítanie a stabilita rozloženia

• Obrázky pod prvou obrazovkou sa načítavajú lenivo (atribút loading).
• Hlavný obrázok prvej obrazovky sa neodporúča odkladať: načítava sa s prioritou (atribút fetchpriority).
• Uvedená šírka a výška obrázka rezervujú miesto a stránka pri načítaní nepodskakuje (to znižuje CLS).
• V posuvníku má prioritu iba prvá snímka.

Obrázky v CMS a obchode

Na webe s redaktormi a v obchode pridávajú obrázky rôzni ľudia, preto je lepšie zakotviť pravidlá v systéme. Nastavte automatické vytváranie viacerých veľkostí a konverziu do moderných formátov, určite limit hmotnosti nahrávania a pripravte pre zamestnancov krátky návod: potrebná šírka, formát, počet obrázkov na produkt. Pri importe katalógu zo súborov dodávateľa pridajte krok kompresie, inak bude hmotnosť stránok nebadane rásť.

Video a animácie na pozadí

Video na prvej obrazovke vyžaduje opatrnosť: často sa stáva najťažším prvkom stránky. Používajte komprimované video s náhľadovým obrázkom, vypínajte automatické spustenie na telefónoch a animované pozadie nahraďte statickým obrázkom, ak efekt neprináša úžitok.

Písma

Každý súbor písma je ďalšia požiadavka, preto treba sadu obmedziť.

• Stačí jedna-dve rodiny a dva-tri rezy (orientačná hodnota pre väčšinu webov).
• Používajte formát WOFF2 a podmnožiny znakov: cyrilika a latinka bez zbytočných jazykov.
• Variabilné písma môžu nahradiť niekoľko súborov jedným.
• Pravidlo font-display: swap zobrazí text systémovým písmom, kým sa načítava hlavné; pre hlavné písmo je užitočné predbežné načítanie (preload).
• Vlastné hostovanie písiem odstráni požiadavku na cudzí server.
• Záložné písmo sa vyberá s podobnými proporciami, aby text po výmene nepodskakoval.
• Ikonové písma nahraďte SVG ikonami.

Skripty a služby tretích strán

Skripty súperia so zobrazením stránky o zdroje prehliadača; ťažké skripty zhoršujú reakciu na akcie používateľa (INP).

Zostavte zoznam všetkých skriptov: na karte Network vývojárskych nástrojov, v správe PageSpeed Insights a v kontajneri Tag Manager. Pri každom si položte otázku: aké rozhodnutie závisí od týchto údajov?

• Atribúty defer a async umožňujú načítať skript bez blokovania zobrazenia stránky.
• Ťažké widgety (chat, recenzie, mapy) sa pripájajú po interakcii alebo po hlavnom načítaní.
• Analytika a reklamné tagy zostávajú tam, kde pomáhajú robiť rozhodnutia; skripty, ktoré nikto nepoužíva, sa odstraňujú.

Ako overiť vplyv skriptu

1. Zmerajte stránku so všetkými skriptmi a zapíšte ukazovatele.
2. Dočasne vypnite jeden tag alebo widget, napríklad v režime náhľadu Tag Manager.
3. Zopakujte meranie na tej istej stránke v rovnakých podmienkach.
4. Porovnajte rozdiel s úžitkom, ktorý tento nástroj prináša firme.
5. Skript ponechajte, optimalizujte jeho načítanie alebo odstráňte.

Takýto prístup pomáha rozhodovať sa na základe faktov a neodstraňovať užitočné nástroje podľa domnienok. Prehľad je vhodné opakovať raz za pol roka, lebo časom sa na webe hromadia nové tagy.

Server, cache a štýly

Ani dokonale komprimované obrázky nepomôžu, ak server odpovedá pomaly. Čas odpovede servera (TTFB) závisí od hostingu, verzie PHP, cachovania a optimalizácie databázy.

• Cache stránok dodáva hotové HTML bez úplného spracovania požiadavky pri každej návšteve.
• CDN umiestňuje statické súbory bližšie k návštevníkom, čo je užitočné pre publikum z rôznych regiónov.
• Kompresia Brotli alebo Gzip a protokoly HTTP/2 alebo HTTP/3 znižujú objem údajov a počet požiadaviek.
• V štýloch sa odstraňuje nepoužívaný kód a kritické pravidlá prvej obrazovky sa niekedy vkladajú priamo do stránky.
• Na WordPress pomáhajú kvalitný hosting, cachovanie a primeraný počet pluginov; na SaaS platformách (napríklad Horoshop) sú hlavnými pákami obrázky, dizajnové bloky a pripojené aplikácie.

Cache prehliadača a databáza

Cache prehliadača umožňuje opakovaným návštevníkom nenačítavať statické súbory znova. Na to sa súborom štýlov, skriptov, obrázkov a písiem nastaví dlhá doba uchovávania; pri aktualizácii sa mení verzia názvu súboru. Na WordPress navyše pomáha čistenie starých revízií, dočasných záznamov a nepoužívaných tabuliek v databáze, lebo veľká databáza spomaľuje odpoveď servera. Kontrolujte aj to, či nepracuje súčasne niekoľko pluginov na cachovanie, lebo môžu kolidovať.

Plán prác: od merania ku kontrole

1. Zmerajte mobilné ukazovatele kľúčových stránok a zapíšte základné hodnoty.
2. Opravte obrázky: veľkosť, formát, lenivé načítanie, atribúty rozmerov.
3. Zredukujte sadu písiem a nastavte ich načítanie.
4. Vykonajte audit skriptov a odstráňte nadbytočné.
5. Nastavte cache, skontrolujte hosting a podľa potreby pripojte CDN.
6. Zopakujte merania a porovnajte so základnými hodnotami.
7. Zapíšte kontrolu do kalendára: raz mesačne si prezrite správu Search Console a niekoľko stránok v PageSpeed Insights.

Typické chyby

• Naháňanie hodnotenia 100. Orientačným bodom sú Core Web Vitals v terénnych údajoch a reálne pohodlie.
• Originály fotografií na webe. Súbory z fotoaparátu často vážia mnohonásobne viac, než je potrebné pre obrazovku.
• Lenivé načítanie hlavného obrázka. Oneskorí zobrazenie prvej obrazovky.
• Priveľa písiem a rezov. Každý ďalší súbor zvyšuje záťaž.
• Hromadenie tagov. Staré pixelové tagy a widgety zostávajú roky.
• Testovanie iba na výkonnom počítači. Zákazníci používajú telefóny so strednými parametrami.
• Optimalizácia bez opakovaného merania. Bez porovnania nie je jasné, čo presne pomohlo.

Otázky a odpovede

Aké hodnotenie PageSpeed považovať za dostatočné?

Jednotné číslo neexistuje. Hodnotenie v laboratórnom teste kolíše podľa podmienok. Orientujte sa podľa stavu Core Web Vitals v terénnych údajoch a podľa rýchlosti práce kľúčových stránok na reálnych telefónoch.

Ovplyvňuje rýchlosť pozície v Google?

Google zohľadňuje zážitok zo stránky, vrátane Core Web Vitals, ale relevantnosť obsahu zostáva hlavným faktorom. Rýchly web je aj pohodlnejší pre ľudí a zvyčajne lepšie mení návštevníkov na dopyty.

Prečo test zakaždým ukazuje iný výsledok?

Na laboratórne merania vplývajú zaťaženie servera, sieť, rozšírenia prehliadača a skripty tretích strán. Spustite niekoľko meraní a porovnávajte priemerné hodnoty a trend.

Je potrebné CDN?

CDN je užitočné, keď sa publikum nachádza v rôznych regiónoch alebo je na webe veľa statických súborov. Pre lokálnu firmu s malým webom často stačí kvalitný hosting s cache.

Oplatí sa odstraňovať analytiku a pixel kvôli rýchlosti?

Potrebné tagy je vhodné ponechať, ale pripájať ich opatrne: bez duplicít, s kontrolou udalostí a odloženým načítaním, kde je to možné. Odstráňte tie, ktoré nikto nepoužíva.

Záver

Rýchlosť webu sa skladá z niekoľkých príčin a každú možno opraviť samostatne: hmotnosť obrázkov, počet písiem, skripty tretích strán, cache a odpoveď servera. Pracujte podľa plánu: merajte, meňte jednu skupinu vecí, merajte znova a zapisujte výsledok. Tak rýchlosť rastie postupne a zostáva pod kontrolou. Mesačný prehľad správ pomôže všimnúť si návrat problémov po aktualizáciách, nových widgetoch alebo ťažkých obrázkoch skôr, než ovplyvnia dopyty. Ak potrebujete pomoc, LightSEO vám môže pomôcť s technickým rozborom v rámci SEO auditu webu a s budovaním ľahkého webu na šablóne.

Prečítajte si aj

• Viacjazyčný web: UX a SEO – štruktúra URL, hreflang, prepínač jazykov
• Stránka 404: ako ju urobiť užitočnou – dizajn, text a kód odpovede
• Obsah pre nový web: texty, fotografie, štruktúra – čo pripraviť