Čo je LCP?

Je to čas od objednania po chvíľu, keď hosťovi položia na stôl hlavné jedlo. Nie predjedlo, nie voda, ale to, kvôli čomu prišiel. Kým to na stole nie je, hosť má pocit, že sa nič nedeje, aj keď v kuchyni všetci behajú. Na webe je tým hlavným jedlom prvá veľká fotografia alebo nadpis. Kým sa nezobrazí, návštevník pozerá na prázdnu bielu plochu.

LCP je z troch ukazovateľov ten, ktorý najviac súvisí s pocitom pomalého webu. Vysoká hodnota má zvyčajne dve príčiny a obe sa dajú lacno odstrániť. Prvá je fotografia nahraná v plnom rozlíšení, ktorá má niekoľko megabajtov a na mobilnom pripojení sa načítava sekundy. Druhá je pomalá odpoveď servera, teda hosting alebo ťažký systém na ňom. Pri firemných weboch stačí zmenšiť a prekonvertovať fotografie a hodnota často klesne na polovicu. Efekt je okamžite viditeľný aj na tom, koľko ľudí sa dostane k formuláru.

Pri jednom webe ukázalo meranie čas hlavného zobrazenia nad päť sekúnd na mobile. Meraným prvkom bola úvodná fotografia s rozmermi pre tlač a veľkosťou vyše štyroch megabajtov. Zmenšenie na rozumné rozlíšenie, prevod do moderného formátu a odstránenie odloženého načítania z tohto jedného obrázka stlačilo hodnotu pod dve sekundy. Žiadny zásah do dizajnu, žiadne programovanie, len práca s obrázkom. Toto je najčastejší prípad, na aký pri firemných weboch narážam. Druhý najčastejší je pomalá odpoveď servera pri lacnom hostingu s ťažkým redakčným systémom, kde sa každá stránka skladá nanovo pri každom načítaní a medzipamäť nie je zapnutá.

Touto hodnotou sa zaoberajte vždy, keď má web na mobile pocit pomalosti alebo keď to hlási Search Console. Postup je jednoduchý: zistite, ktorý prvok sa meria, a riešte konkrétne jeho. V drvivej väčšine prípadov ide o úvodnú fotografiu. Zmenšite ju, preveďte do modernejšieho formátu, uistite sa, že nemá zapnuté odložené načítanie, a prípadne jej dajte prednosť pri sťahovaní. Ak je meraným prvkom nadpis a hodnota je zlá, príčinou býva pomalá odpoveď servera alebo písmo načítavané z cudzieho servera. Poradie práce je vždy rovnaké: najprv obrázok, potom server, až potom detaily ako prednostné načítanie.