Cumulative Layout Shift (kumulativní posun rozvržení)

Příklady z praxe

1. 01

   Obrázek bez rezervovaného místa

   E-shop vykresluje kartu produktu s fotografií načtenou ze CDN. Bez atributů width a height prohlížeč nezná poměr stran a text popisku pod obrázkem po dotažení souboru skočí o několik set pixelů dolů. Doplnění rozměrů (nebo aspect-ratio) prohlížeči umožní místo rezervovat ještě před stažením souboru.

   <!-- skáče -->
   <img src="/produkt.jpg" alt="Židle">
   
   <!-- místo je rezervované předem -->
   <img src="/produkt.jpg" alt="Židle" width="800" height="600">
   
   <style>
     img { max-width: 100%; height: auto; }
   </style>

2. 02

   Měření posunů v reálném provozu

   Vývojář chce vědět, které elementy posun způsobují u skutečných návštěvníků, ne jen v Lighthouse. PerformanceObserver sleduje záznamy typu layout-shift, odfiltruje ty vyvolané uživatelskou akcí a odešle spolu s hodnotou i selektor zasaženého uzlu do analytiky.

   let cls = 0;
   new PerformanceObserver((list) => {
     for (const entry of list.getEntries()) {
       if (entry.hadRecentInput) continue; // posun po interakci se nepočítá
       cls += entry.value;
       for (const source of entry.sources ?? []) {
         console.log('posouvá se:', source.node, entry.value);
       }
     }
   }).observe({ type: 'layout-shift', buffered: true });

Časté omyly

MýtusCLS se měří jen během načítání stránky, takže stačí optimalizovat first paint.

Ve skutečnostiCLS se sbírá po celou dobu života stránky, včetně posunů, které vyvolá lazy loading při rolování nebo pozdě vložená cookie lišta. Terénní data proto bývají výrazně horší než laboratorní měření z Lighthouse.

MýtusJakýkoli pohyb obsahu zhoršuje CLS, takže animace jsou zakázané.

Ve skutečnostiDo skóre se počítají jen posuny rozvržení. Animace přes transform a opacity rozvržení nemění a CLS neovlivní. Stejně tak se nepočítá změna do 500 ms po uživatelské akci, například rozbalení akordeonu po kliknutí.

MýtusNulové CLS znamená, že stránka je rychlá.

Ve skutečnostiCLS měří vizuální stabilitu, nikoli rychlost. Stránka se může načítat pomalu a mít přitom CLS 0. Rychlost pokrývají jiné metriky, zejména LCP a INP.

Časté dotazy

Jaká hodnota CLS se považuje za dobrou?

Za dobrou hodnotu CLS se považuje 0,1 a méně, pásmo od 0,1 do 0,25 znamená potřebu zlepšení a nad 0,25 je výsledek hodnocen jako špatný. Hranice se posuzují na 75. percentilu reálných návštěv, měřeno zvlášť pro mobilní a desktopová zařízení. Znamená to, že čtvrtina nejhorších návštěv se do limitu vejít nemusí, ale zbytek ano. Laboratorní hodnota z Lighthouse je jen orientační, protože nezachytí posuny vzniklé při rolování a interakci.

Jak zabránit posunu způsobenému webfonty?

Posunu z webfontů se předchází třemi kroky. Prvním je preload souboru s fontem, aby dorazil dřív než první vykreslení textu. Druhým je volba font-display: optional, při které prohlížeč použije webfont jen tehdy, stihne-li se načíst včas, a jinak zůstane u záložního fontu bez pozdější výměny. Třetím je sladění metrik záložního a cílového fontu pomocí vlastností size-adjust, ascent-override a descent-override v pravidle @font-face, aby se výška řádků po výměně nezměnila.

Počítá se do CLS posun, který vyvolá uživatel kliknutím?

Posun vyvolaný uživatelskou akcí se do CLS nezapočítá, pokud nastane do 500 milisekund po kliknutí, stisku klávesy nebo podobné interakci. Prohlížeč takový záznam označí příznakem hadRecentInput. Rozbalení menu, otevření akordeonu nebo načtení dalších položek po stisku tlačítka tedy skóre nezhoršují. Výjimka se ale nevztahuje na rolování ani na změny, které přijdou později než půl sekundy po akci: pomalá odezva serveru může způsobit, že se posun do metriky nakonec započítá.

Jak najít konkrétní prvek, který posun způsobuje?

Konkrétní viník se hledá v záznamech typu layout-shift, které vrací PerformanceObserver. Každý záznam obsahuje pole sources s odkazem na DOM uzly a s obdélníky před posunem a po něm. V Chrome DevTools stejnou informaci nabízí panel Performance, kde jsou posuny vyznačené na časové ose, a experimentální vrstva Layout Shift Regions zvýrazní posouvající se oblasti přímo ve stránce. Pro produkci se hodí knihovna web-vitals, která odesílá atribuci do analytiky.

Zdroje

1. Core Web Vitals(otevře se v novém okně)Google Search Central
2. LayoutShift(otevře se v novém okně)MDN Web Docs
3. CSS aspect-ratio(otevře se v novém okně)MDN Web Docs

Související pojmy

• Core Web VitalsCore Web Vitals je sada uživatelsky orientovaných metrik, kterými Google hodnotí rychlost načtení, odezvu na interakce a vizuální stabilitu webové stránky. V praxi jde hlavně o LCP, INP a CLS, tedy signály, které pomáhají odhalit pomalý obsah, zaseknuté rozhraní nebo poskakující layout.
• Lazy loadingLazy loading je technika, při níž aplikace, stránka nebo knihovna načte data, komponentu či obrázek až ve chvíli, kdy jsou skutečně potřeba. Odkládá práci mimo první vykreslení nebo inicializaci, čímž může zrychlit start, snížit přenos dat a paměť, ale přidává složitost při měření, chybách a načítání obsahu.
• Largest Contentful PaintLargest Contentful Paint je metrika webového výkonu, která měří dobu od začátku načítání stránky do okamžiku, kdy se v okně prohlížeče vykreslí největší obrázkový nebo textový blok. Patří mezi Core Web Vitals od Googlu a hodnotí se jako dobrá do 2,5 sekundy měřeno na 75. percentilu reálných návštěv.
• Skeleton screenSkeleton screen je způsob zobrazení načítacího stavu, při kterém rozhraní ukáže šedé obrysy budoucího obsahu (bloky místo textu, obdélníky místo obrázků) namísto spinneru. Uživatel tak vidí strukturu stránky dřív, než dorazí data, čekání mu připadá kratší a po dokreslení obsahu nedochází k poskakování rozvržení.
• Page experiencePage experience je souhrn signálů, kterými Google hodnotí, jak se návštěvníkovi stránka používá nezávisle na obsahu: rychlost načtení a stabilita měřené přes Core Web Vitals, zabezpečení přes HTTPS, použitelnost na mobilu a absence rušivých vyskakovacích prvků. Do vyhledávání vstupuje jako doplňkový faktor, nikoli jako náhrada za kvalitní obsah.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• A/B testováníA/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.