Ako zrýchliť WordPress web: LCP, INP a CLS krok za krokom

Zrýchlenie WordPress webu: LCP, INP a CLS

Prečo zrýchliť WordPress web

Pomalý web stráca návštevníkov skôr, než si vôbec prečítajú prvú vetu, a horšie skóre Core Web Vitals sa premieta aj do hodnotenia v Google. Tento článok sa venuje bežnému firemnému alebo obsahovému WordPress webu bez e-shopu; ak riešite konkrétne WooCommerce úzke miesta ako košík alebo pokladňu, pozrite si samostatný návod na zrýchlenie WooCommerce.

Krátka odpoveď: Výkon WordPress webu najviac ovplyvňujú hosting, zvolená téma, počet a kvalita aktívnych pluginov a veľkosť obrázkov. Podľa Google treba pre dobré skóre dosiahnuť LCP do 2,5 sekundy, INP do 200 milisekúnd a CLS pod 0,1, a to na úrovni 75. percentilu reálnych návštev. Najväčší efekt s najmenšou námahou zvyčajne prináša správne nastavené cachovanie.

Čo sú Core Web Vitals

Core Web Vitals sú tri metriky, ktorými Google meria reálnu používateľskú skúsenosť. Podľa oficiálnej dokumentácie Google , weby by mali dosiahnuť LCP (Largest Contentful Paint) do 2,5 sekundy pri aspoň 75 % návštev. Rovnaký princíp platí pre CLS (Cumulative Layout Shift), kde je podľa oficiálnej dokumentácie cieľová hodnota 0,1 alebo menej. Tretia metrika, INP (Interaction to Next Paint), meria čas od interakcie po viditeľnú reakciu stránky s cieľovou hodnotou do 200 milisekúnd.

Čo najviac ovplyvňuje výkon WordPressu

Hosting

Podľa oficiálnej dokumentácie WordPress.org dostupné možnosti optimalizácie priamo závisia od zvoleného hostingového nastavenia.

Téma

Rýchla odľahčená téma funguje výrazne efektívnejšie než graficky náročná a neefektívna téma alebo page builder s veľkým množstvom vlastného kódu.

Počet a kvalita pluginov

Každý ďalší aktívny plugin môže výkon ovplyvniť. Oficiálna dokumentácia odporúča deaktivovať a odstrániť nepotrebné pluginy a merať dopad selektívnym vypínaním.

Veľkosť a formát obrázkov

Neoptimalizované obrázky spomaľujú načítanie aj šetria menej dát. Odporúča sa moderný formát ako WebP, ktorý je pri porovnateľnej kvalite menší.

Ako zrýchliť LCP

Google odporúča, aby bol LCP element (najčastejšie hlavný obrázok alebo nadpis) rozpoznateľný priamo v HTML zdroji stránky, nie dynamicky vkladaný cez JavaScript. Na hlavný obrázok sa nikdy nemá aplikovať loading="lazy", keďže to podľa dokumentácie spôsobuje zbytočné oneskorenie. Naopak, ak viete, že konkrétny obrázok bude LCP prvkom, pomôže mu nastaviť fetchpriority="high". Rovnako dôležité je obmedziť blokujúce CSS a JavaScript v hlavičke stránky a znížiť čas do prvého bajtu (TTFB) kvalitným hostingom a minimalizáciou presmerovaní.

Ako znížiť CLS

Podľa Google treba na všetky obrázky a videá vždy uvádzať atribúty width a height, aby si prehliadač dokázal vopred vypočítať pomer strán a rezervovať miesto ešte pred načítaním. Pre neskoro sa načítavajúci obsah (napríklad reklamy alebo vložené prvky) dokumentácia odporúča rezervovať priestor cez min-height alebo aspect-ratio a podľa možnosti tento obsah umiestniť nižšie vo viewporte. Pri animáciách sa treba vyhnúť vlastnostiam ako top alebo left a použiť transform, ktorý layout shift nespôsobuje.

Fonty, CSS a JavaScript

Webové fonty môžu spôsobiť viditeľný preskok textu pri prepnutí zo záložného na vlastný font. Google odporúča hodnotu font-display: optional, definovanie vhodných záložných fontov a prednačítanie kritických fontov cez <link rel="preload">. Pre CSS a JavaScript platí, že blokujúce skripty v hlavičke stránky sú podľa dokumentácie takmer vždy zbytočné; kritické CSS sa oplatí vložiť priamo do HTML a zvyšné štýly aj skripty načítať asynchrónne alebo neblokujúco.

Hosting a page buildery

Kvalitný hosting ovplyvňuje TTFB aj dostupné možnosti cachovania na serverovej úrovni. Page buildery s veľkým množstvom vlastného CSS a JavaScriptu môžu výrazne zvyšovať váhu stránky aj pri vizuálne jednoduchom dizajne, preto sa pri výbere šablóny alebo builderu oplatí overiť jeho reálny dopad na veľkosť stránky, nielen dôverovať marketingovým tvrdeniam výrobcu.

Ako web zrýchliť krok za krokom

  1. Nastavte cachovanie. Podľa oficiálnej dokumentácie WordPress.org ide o krok s najväčším pomerom prínosu k námahe.
  2. Skontrolujte a odstráňte nepotrebné pluginy. Selektívnym vypínaním zistíte, ktoré pluginy majú najväčší dopad na výkon.
  3. Overte, či hlavný obrázok nie je lazy-loadovaný a či je rozpoznateľný priamo v HTML.
  4. Skomprimujte a konvertujte obrázky do moderného formátu ako WebP.
  5. Pridajte width a height na obrázky a vložený obsah, aby ste predišli neočakávaným posunom rozloženia.
  6. Nastavte font-display a prednačítanie kritických fontov.
  7. Skontrolujte autoloaded options v databáze a udržujte ich podľa odporúčania WordPress.org pod približne 800 kB.
  8. Zmerajte LCP, INP a CLS v Google Search Console alebo PageSpeed Insights a otestujte znova po každej väčšej zmene.

Porovnanie priorít podľa náročnosti

ÚpravaNáročnosťKedy sa oplatí najskôr
CachovanieNízka, konfiguračná zmenaTakmer vždy prvý krok podľa oficiálnej dokumentácie
Optimalizácia a formát obrázkovNízka až strednáWeby s veľkým množstvom fotografií alebo produktových záberov
Úprava LCP elementu a fontovStredná, vyžaduje úpravu šablóny alebo kóduAk PageSpeed Insights označí LCP alebo CLS ako problém
Zmena témy alebo page builderuVysoká, zasahuje do celého webuAk sú predchádzajúce kroky vyčerpané a výkon stále nestačí

Riziká a časté chyby

Najčastejšia chyba je aplikovať loading="lazy" plošne na všetky obrázky vrátane hlavného LCP obrázka, čo výkon zhorší namiesto zlepšenia. Rovnako riskantné je pridávať ďalšie pluginy na „zrýchlenie” webu bez merania ich skutočného dopadu, keďže samotný plugin môže spomalenie ešte zväčšiť. Zmeny sa oplatí robiť postupne a merať pred aj po každej z nich, nie naraz bez možnosti zistiť, čo skutočne pomohlo.

Kontrolný zoznam pred vyhodnotením rýchlosti

LCP INP CLS Cache Obrázky
  • Cachovanie je aktívne a správne nakonfigurované.
  • Hlavný obrázok nie je lazy-loadovaný a je rozpoznateľný priamo v HTML.
  • Obrázky sú komprimované a v modernom formáte ako WebP.
  • Obrázky a vložený obsah majú nastavené width a height.
  • Fonty používajú vhodný font-display a kritické fonty sú prednačítané.
  • LCP, INP a CLS sú zmerané cez Search Console alebo PageSpeed Insights, nie odhadnuté.

Súvisiace návody a zdroje

Váš web je pomalý a nie je jasné, kde je problém?

Pošlite nám adresu webu. Preveríme hosting, aktívne pluginy, obrázky a reálne dáta Core Web Vitals a navrhneme konkrétny postup podľa toho, čo skutočne spomaľuje váš web.

Preveriť rýchlosť webu

Na záver

Rýchly web nie je o jednom pluginovom prepínači, ale o niekoľkých konkrétnych veciach, ktoré sa dajú merať a postupne opraviť: cachovanie, obrázky, spôsob načítania hlavného obsahu a stabilita rozloženia stránky. Firmy, ktoré tieto veci overujú dátami z PageSpeed Insights alebo Search Console, zvyčajne prídu na rýchlejšie a lacnejšie riešenie, než keby sa spoliehali na odhad.

Časté otázky

Podľa oficiálnej dokumentácie WordPress.org je to správne nastavené cachovanie, ktoré prináša najväčší efekt pri najmenšej námahe.

Skontrolujte, či nie je načítavaný cez JavaScript alebo s atribútom loading="lazy". Google odporúča, aby bol LCP element rozpoznateľný priamo v HTML zdroji, nie dynamicky vkladaný.

Ide o dáta, ktoré WordPress načíta pri každom požiadavku bez ohľadu na to, či ich stránka potrebuje. Oficiálna dokumentácia odporúča udržiavať ich objem pod približne 800 kB, inak zaťažujú každé načítanie webu.

Cachovací plugin pomôže, ale nevyrieši ťažkú tému, chýbajúce rozmery obrázkov ani zle nastavené fonty. Skutočné zrýchlenie zvyčajne vyžaduje kombináciu konfigurácie aj úprav na úrovni šablóny.

Rovnaký princíp platí pre akýkoľvek neskoro sa načítavajúci prvok, napríklad cookie lištu, notifikáciu alebo vložené video. Ak preň nie je vopred rezervovaný priestor, spôsobí posun rozloženia rovnako ako reklama.

Môže, najmä ak builder generuje veľké množstvo vlastného CSS a JavaScriptu aj pre vizuálne jednoduché stránky. Reálny dopad sa oplatí overiť meraním, nielen predpokladať podľa reklamy nástroja.

Reálne dáta od skutočných návštevníkov nájdete v prehľade Core Web Vitals v Google Search Console. Pre okamžitú diagnostiku konkrétnej stránky poslúži PageSpeed Insights.

Ak úpravy šablóny alebo kódu presahujú bežnú administráciu webu, alebo ak si nie ste istí, ktorý plugin či časť témy problém spôsobuje, je bezpečnejšie nechať diagnostiku odbornej kontrole než experimentovať priamo na produkčnom webe.