Jak opravit špatné skóre Core Web Vitals?

Zjistěte, která metrika selhává, na jakém zařízení a u jaké skupiny stránek. Report Core Web Vitals v Search Console zobrazuje všechny tři metriky na základě skutečných návštěv v Chrome. Pak odstraňte příčinu dané metriky: u LCP je to rychlost, s jakou se načte hlavní obrázek nebo text, u INP dlouhé úlohy JavaScriptu, které zpožďují odezvu, a u CLS obsah, který se objeví bez vyhrazeného místa. Terénní data pokrývají posledních 28 dnů, proto opravu hodnoťte až po měsíci.

Krok 1: zjistěte, co selhává

1. Otevřete report Core Web Vitals v Search Console a vyberte Mobilní zařízení nebo Počítač. Obě varianty se hodnotí zvlášť.
2. Otevřete jeden z uvedených problémů, například problém s LCP na mobilu, a zobrazí se dotčená skupina adres URL i ukázkové adresy URL. Celá skupina má jeden společný stav, který určuje její nejhorší metrika.
3. Ukázkovou adresu URL zadejte do PageSpeed Insights. Uvidíte terénní data dané stránky vedle laboratorního testu, který vám pomůže s laděním.

Laboratorní nástroje, jako je Lighthouse, nemohou INP změřit, protože se stránkou nikdo neinteraguje, a místo toho uvádějí Total Blocking Time. U INP je spolehlivým vodítkem měření na skutečných uživatelích.

Jak opravit pomalé LCP

Průvodce optimalizací LCP od web.dev rozděluje LCP na čtyři části: dobu odezvy serveru, zpoždění před zahájením načítání hlavního zdroje, dobu jeho stahování a zpoždění před vykreslením. Začněte s největší z nich:

• Zajistěte, aby byl obrázek LCP dohledatelný v úvodním HTML, místo abyste ho vkládali pomocí JavaScriptu nebo CSS, a nastavte mu fetchpriority="high".
• Obrázek LCP nikdy nenačítejte líně (lazy loading).
• Zmenšete jeho velikost: použijte správné rozměry, moderní formát, kompresi a CDN blízko návštěvníkům.
• Odstraňte zdroje blokující vykreslení: menší šablony stylů, žádné synchronní skripty v <head> a vykreslování hlavního obsahu na straně serveru.
• Zrychlete odezvu serveru: omezte přesměrování a umožněte ukládání stránek do mezipaměti na okraji sítě.

Jak opravit špatné INP

Průvodce optimalizací INP rozděluje každou interakci na zpoždění vstupu, dobu zpracování a zpoždění prezentace:

• Zpoždění vstupu: omezte JavaScript, který běží během načítání stránky, aby bylo hlavní vlákno při klepnutí volné.
• Doba zpracování: rozdělte dlouhé obslužné funkce událostí na menší úlohy a průběžně uvolňujte hlavní vlákno. Viditelnou aktualizaci proveďte jako první a zbytek odložte.
• Zpoždění prezentace: udržujte DOM malý, nevynucujte přepočet rozvržení čtením stylů hned po jejich změně a u dlouhých stránek využijte content-visibility.

Jak opravit vysoké CLS

Průvodce optimalizací CLS uvádí obvyklé příčiny i jejich řešení:

• Obrázky a videa bez rozměrů: přidejte atributy width a height nebo vlastnost CSS aspect-ratio.
• Reklamy, vložený obsah a prvky iframe: vyhraďte jim v rozvržení místo ještě před načtením.
• Obsah vkládaný nad stávající obsah: použijte zástupný prvek správné velikosti nebo vkládejte nový obsah pod to, co návštěvník právě čte.
• Webová písma: důležitá písma předem načtěte (preload), aby se text nepřeskupoval pozdě.
• Animace: animujte transform, nikoli vlastnosti jako top nebo left.

Stránky, které mohou využít mezipaměť zpět/vpřed (back/forward cache) v prohlížeči, se také vyhnou posunům rozvržení při návratu návštěvníků.

Krok 3: ověřte opravu

Nasaďte opravu, otevřete problém v reportu Core Web Vitals a spusťte ověření. Google sleduje skupinu 28 dnů. Ověření nespouští nové procházení ani nic neurychluje, pouze sleduje, zda problém zmizel. Protože se terénní data počítají z posledních 28 dnů, očekávejte, že se report bude zlepšovat postupně. Co která metrika znamená, se dozvíte v článku Co znamenají LCP, INP a CLS?.

Jak pomáhá AutoPSEO

Report Core Web Vitals v AutoPSEO zobrazuje v grafech přibližně šest měsíců týdenních dat z Chrome UX Report pro váš web nebo pro jednu adresu URL, a to pro telefon, počítač nebo tablet. Uvidíte tak týden, kdy oprava zabrala, nebo týden, kdy nové vydání situaci zhoršilo, a nemusíte čekat, až skončí další 28denní období.