Martin Michálek  – 13. 3. 2020

Nová metrika rychlosti webu – Largest Contentful Paint (LCP) – představuje přesnější způsob měření momentu, ve kterém se vykreslí hlavní obsah stránky.

LCP se „dívá“, kdy byl prohlížeč zobrazil největší prvek ve stránce. Uživatelům tak pomáhá vyhodnotit, zda je stránka užitečná.

Dobré LCP by podle Googlu mělo proběhnout do 2,5 sekundy. V měřeních reálných uživatelů (RUM) byste měli podle stejného zdroje vyhodnocovat 75. precentil.

Proč LCP potřebujeme?

Asi si řeknete, že pro měření vykreslení hlavního obsahu stránky už nějaké metriky máme. Jenže ty jsou složité nebo nepřesné:

  • First Contentful Paint (FCP)
    Popisuje spíše začátek vykreslování. Pokud stránka zobrazuje úvodní obrazovku nebo indikátor načítání, FCP se spustí, ale pro uživatele není tento okamžik příliš relevantní.
  • First Meaningful Paint (FMP)
    Vykreslení primárního obsahu stránky. Bohužel, FMP je nepřesné – dle Google je kolem 20 % měření nepovedených a já můžu jen souhlasit. Na webech klientů se FMP spouští velmi nespolehlivě.
  • Speed Index (SI)
    Index rychlosti ukazuje, jak rychle je viditelný obsah stránky naplněn do stavu stoprocentního vykreslení. SI ale reflektuje vykreslení viditelného viewportu, nikoliv hlavního obsahu. Často je navíc Speed Index zkreslený komponentami třetí strany zobrazujícími cookie lištu nebo okno s chatem. SI je ještě k tomu obtížné ukládat do RUM dat, protože potřebujete záznam průběhu vykreslování.

Largest Contentful Paint je nová metrika vyvinutá jedním z týmů prohlížeče Chrome především jako spolehlivější alternativa First Meaningful Paint FMP.

Dle autorů ale slušně koreluje hlavně s Indexem rychlosti (SI) a do budoucna můžeme očekávat, že jej nahradí v RUM datech.

Jaké nástroje použít na měření LCP?

Metrika zatím není dostupná bez technických znalostí, ale očekávám, že se bude se postupně přidávat do nových verzí všech nástrojů.

Google Lighthouse

V Lighthouse je LCP dostupné od verze 5.5.0. V produkovaném JSONu je k dispozici jako observedLargestContentfulPaint, ale v HTML reportu jej neuvidíte a do výsledného skóre se nepočítá.

V Lighthouse verze 6 bude k dispozici v úplně novém počítání Lighthouse Performance Score.

Podobné je to s webovou implementací Lighthouse, PageSpeed Insights.

SpeedCurve

V profi-nástroji SpeedCurve je LCP k dispozici už nějakou dobu, ale je třeba říct, že se neměří vždy spolehlivě.

WebpageTest

Mocný WebpageTest zatím přidání Largest Contentful Paint do uživatelského rozhraní jen zvažuje a čeká, zda se metrika ukáže jako užitečná.

Chrome UX Report

V datech z CrUX už se LCP nějakou dobu ukládá jako experimentální a nyní jako běžné získávaná metrika. Není dostupný v běžných reportech, např. v Data Studiu, ale s trochu SQL si jej můžete vytáhnout z Google BigQuery.

Vlastní měření JavaScriptem

Existuje návrh standardu jménem Largest Contentful Paint API, kde je možné vytáhnout data z API PerformanceObserver. Zhruba takto:

const observer = new PerformanceObserver((list) => {
  let perfEntries = list.getEntries();
});
observer.observe({entryTypes: ['largest-contentful-paint']});

Takto je možné LCP získat z prohlížeče Chrome. Více informací o měření JavaScriptem je na web.dev od Googlu.

Jak se LCP měří?

Od začátku renderování stránky prohlížeč vyhodnocuje, které prvky jsou v daný moment v aktuálním viewportu uživatele největší.

Které prvky stránky se sledují?

  • Blokové prvky obsahující textové uzly nebo jiné podřízené textové prvky.
  • Obrázky (<img> elementy nebo <image> elementy uvnitř <svg> elementu).
  • <video> prvky (používá se plakát).
  • Prvky s obrázkem na pozadí načteným pomocí url() v CSS (barevné přechody se ale ignorují).

Všimněte si, že podle všeho se zatím nezohledňují např. prvky <svg>, <canvas> nebo <audio>.

Jaký je postup měření?

Postup měření v Chrome je následující:

  1. Prohlížeč „kouká“ do PerformanceEntry API na typ události largest-contentful-paint.
  2. Tyto události na stránce postupně přibývají, protože se vykreslují nové prvky. Také se donačítají obrázky a webfonty nebo do viewportu může autor pomocí JS přidat nebo odebrat prvek.
  3. Přestává se měřit, jakmile uživatel interaguje se stránkou (tapnutím, myší, klávesnicí, scrollem).
  4. Prohlížeč reportuje vždy poslední largest-contentful-paintPerformanceEntry.

Poznámky:

  • Pokud uživatel otevře stránku na kartě na pozadí, je možné, že FCP se neaktivuje dokud uživatel záložku prohlížeče znovu neotevře.
  • Pozor na obrázky servírované z jiné domény. Z bezpečnostních důvodů není časové razítko vykreslování vystaveno pro cross-origin obrázky. Místo momentu vykreslení dostane prohlížeč informaci o jejich stažení, což může zkreslovat měření. Doporučuje se nastavit hlavičku Timing-Allow-Origin.

Měření je specifikováno v Largest Contentful Paint API. Při psaní jsem vycházel hlavně z podrobného textu o LCP na webu web.dev.

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?