CLS a INP jsou Core Web Vitals, které měří jiné stránky zážitku návštěvníka než rychlost.
CLS měří vizuální stabilitu. K posunu rozvržení dojde, když se obsah po načtení pohne. Návštěvník čte článek. Načte se reklama. Článek sjede dolů. Návštěvník ztratí místo. CLS vyjadřuje, jak moc to obtěžuje.
INP měří odezvu. Návštěvník klikne na tlačítko. Systém odpoví. Jak dlouho odpověď trvá. INP vyjadřuje zpoždění odezvy.
Cumulative Layout Shift (CLS) podrobně
Co způsobuje CLS
Načítají se reklamy a zabírají místo. Načítají se vložené prvky a zabírají místo. Obrázky se načítají bez zadané výšky. Písma se mění a text se přeskládá. Obsah se vkládá z JavaScriptu.
Reálný příklad
Rozvržení stránky je stabilní. Návštěvník začne číst. Načte se reklama. Reklama je tři sta pixelů vysoká. Obsah pod reklamou se posune dolů o tři sta pixelů. Návštěvník ztratí místo. Je to frustrující.
Měření
CLS se měří jako podíl viditelné oblasti, který se posunul. Pokud je viditelná oblast tisíc pixelů vysoká a obsah se posune o tři sta pixelů, CLS je nula celá tři. Cíl je pod nulou celá jedna (desetiprocentní posun je přijatelný, třicetiprocentní ne).
Optimalizace CLS
Strategie jedna: vyhraďte místo
Vyhraďte místo pro reklamy, vložené prvky a obrázky. Řekněte vykreslovacímu jádru: reklama zabere tři sta pixelů. Místo vyhraďte. Reklama se načte do vyhrazeného místa. Žádný posun.
Strategie dvě: vkládejte dole
Nevkládejte obsah doprostřed stránky. Vkládejte dole (obsah pod tím už je mimo viditelnou oblast). Nebo do pevné hlavičky (návštěvník čeká, že se hlavička změní).
Strategie tři: vyhněte se změnám písma
Neměňte písmo během načítání stránky. Změna písma způsobí přeskládání textu. Posune se všechen text, který toto písmo používá. K omezení posunu použijte `font-display: optional` nebo `font-display: swap`.
Strategie čtyři: zadejte výšku obrázku
Používejte u obrázků pevnou výšku. Obrázek se načte. Výška je zadaná. Obrázek vyplní vyhrazené místo. Žádný posun.
Reálný příklad: optimalizace CLS u stránky produktu v e-shopu
Výchozí CLS: nula celá dvacet pět (špatné).
Analýza
Obrázky produktu se načítají bez zadané výšky. Obrázky posouvají obsah. Přispívají k CLS hodnotou nula celá deset. Reklama pod produktem se načte po načtení stránky. Reklama zabere místo. Obsah se posune. Přispívá k CLS hodnotou nula celá dvanáct. Recenze zákazníků se načítají z API. Vkládají se do stránky. Obsah se posune. Přispívají k CLS hodnotou nula celá tři.
Optimalizace
Zadejte výšku obrázků v HTML. Obrázky vyplní vyhrazené místo. Příspěvek k CLS: nula. Vyhraďte místo pro reklamu. Reklama se načte do vyhrazeného místa. Příspěvek k CLS: nula. Recenze zákazníků pod okrajem obrazovky načítejte líně. Nevkládejte je do horní části obrazovky. Příspěvek k CLS: nula (posun nastane mimo viditelnou oblast).
Nové CLS: nula celá nula pět (dobré).
Interaction to Next Paint (INP) podrobně
Co INP měří
INP měří odezvu. Návštěvník klikne na tlačítko. Systém klik zpracuje. Aktualizuje stav. Vykreslí změnu. Zobrazí ji na obrazovce. INP je čas od kliknutí po první vykreslení vizuální aktualizace.
Reálný příklad
Návštěvník klikne na tlačítko Přidat do košíku. Systém zkontroluje zásoby. Aktualizuje počítadlo košíku. Zobrazí nový počet na obrazovce. Pokud je INP sto milisekund, návštěvník vidí aktualizaci počítadla okamžitě. Pokud je INP jedna sekunda, počítadlo se aktualizuje o sekundu později. Stránka nereaguje.
Měření
INP se měří v milisekundách. Cíl pod dvě stě milisekund je dobrý.
Optimalizace INP
Strategie jedna: zkraťte dobu běhu JavaScriptu
Dlouhý JavaScript blokuje vykreslování. Rozdělte dlouhý úkol na menší. Pro náročné výpočty použijte async, defer nebo Web Workers.
Strategie dvě: optimalizujte obsluhu událostí
Obsluha událostí by měla dělat minimum práce. Náročnou práci přesuňte na pozadí.
Strategie tři: optimalizujte CSS
Náročné CSS může zdržet vykreslení. Pomocí CSS containment řekněte prohlížeči: tento prvek je samostatný, při jeho změně nepřepočítávej styly celé stránky.
Strategie čtyři: použijte rychlejší techniku vykreslování
Aktualizace CSS jsou rychlejší než aktualizace DOM v JavaScriptu. Používejte CSS transformace místo pozicování pomocí left/top. Používejte CSS průhlednost místo změn viditelnosti.
Reálný příklad: odezva při práci s formulářem
Výchozí INP: čtyři sta milisekund (špatné).
Analýza
Formulář má validaci v JavaScriptu. Návštěvník píše do pole. Spustí se validace. Validace je synchronní. Blokuje aktualizaci pole. Pole se neaktualizuje, dokud validace neskončí. Formulář nereaguje.
Optimalizace
Přesuňte validaci na pozadí (Web Worker nebo setTimeout). Pole se aktualizuje okamžitě. Validace proběhne na pozadí. Použijte CSS containment na formuláři. Řekněte prohlížeči: formulář je samostatný, nepřepočítávej styly celé stránky. Pro animaci použijte CSS transformaci místo pozicování v JavaScriptu.
Nové INP: sto padesát milisekund (dobré).
CLS a INP společně
CLS způsobuje, že stránka působí nestabilně. INP způsobuje, že stránka nereaguje. Dohromady ovlivňují, jak návštěvník vnímá kvalitu.
Stránka s dobrým LCP, ale špatným CLS (rychlá, ale poskakující) je frustrující. Návštěvník viní pomalost, i když jde o problém se stabilitou.
Stránka s dobrým LCP a CLS, ale špatným INP (rychlá a stabilní, ale bez odezvy) působí rozbitě. Tlačítka na kliknutí nereagují.
Pro dobrý zážitek záleží na všech třech Core Web Vitals.
Často kladené otázky
Jak odhalíme problémy s CLS?
Použijte Chrome DevTools. Klikněte na stránku pravým tlačítkem. Prozkoumat. Karta Výkon. Nahrajte načítání stránky. DevTools ukážou posuny rozvržení během načítání. Podívejte se také do PageSpeed Insights. Lighthouse problémy s CLS označí. Zkontrolujte také přehled Core Web Vitals v Search Console. Ukazuje stránky se špatným CLS. S WEMASY Tvůrcem webů to nastavíte přímo na svém webu.
Máme vyhrazovat místo pro všechny reklamy, nebo jen pro kritické?
Vyhraďte místo pro reklamy v horní části obrazovky (reklamy, které se načtou hned). Nevyhrazujte místo pro reklamy pod okrajem obrazovky (reklamy, které se načtou až po posunutí). Reklamy pod okrajem mohou posunout obsah pod okrajem, ale návštěvník posun nevidí.
Jak optimalizovat INP u složitých aplikací s náročným JavaScriptem?
Přesuňte náročné výpočty do Web Workers. Web Worker běží v samostatném vlákně. Neblokuje hlavní vlákno. Hlavní vlákno zůstává citlivé na vstup od návštěvníka. Použijte také React Suspense nebo podobné frameworky, které odloží náročné výpočty až po obsloužení interakce.
Je CLS důležité na mobilu stejně jako na počítači?
Na mobilu je důležitější. Mobilní obrazovka je menší. Posuny rozvržení jsou viditelnější. Mobilní návštěvník si posunu snáze všimne a je frustrovaný. Optimalizaci CLS upřednostněte na mobilu.
Může dobré CLS a INP vynahradit špatné LCP?
Ne. Pokud se stránka načítá pět sekund, návštěvník je frustrovaný dřív, než na CLS a INP záleží. Odejde, než s něčím interaguje. Rychlé načtení (dobré LCP) je předpokladem dobrého zážitku. Dobré CLS a INP zlepší zážitek na rychlé stránce, ne na pomalé.
Jak měřit a sledovat zlepšení CLS a INP?
Výchozí stav: změřte před optimalizací. Proveďte optimalizaci. Nové měření: změřte po ní. Ke sledování u skutečných návštěvníků použijte knihovnu Web Vitals (JavaScriptová knihovna, která měří Core Web Vitals). Nastavte upozornění: pokud se CLS nebo INP zhorší, upozornění informuje tým.