Didžiausio turinio elemento atvaizdavimas (angl. Largest Contentful Paint, LCP) yra vienas iš „Pagrindinių interneto rodiklių“ (angl. Core Web Vitals), matuojantis, kaip greitai svetainė įkeliama iš lankytojo perspektyvos. Jis parodo, kiek laiko praeina nuo puslapio atidarymo iki didžiausio turinio elemento pasirodymo. Jei jūsų svetainė kraunasi lėtai, tai blogai vartotojo patirčiai ir taip pat gali lemti, kad jūsų svetainė Google paieškoje bus reitinguojama žemiau.
Bandant išspręsti LCP problemas, ne visada aišku, į ką sutelkti dėmesį. Ar serveris per lėtas? Ar paveikslėliai per dideli? Ar turinys neatvaizduojamas? Pastaruoju metu „Google“ stengiasi tai išspręsti, pristatydama LCP subkomponentus, kurie parodo, iš kur kyla puslapio įkėlimo vėlavimai. Jie taip pat pridėjo šiuos duomenis į „Chrome“ naudotojų patirties ataskaitą (angl. Chrome UX Report, CrUX), leisdami jums pamatyti, kas sukelia vėlavimus realiems jūsų svetainės lankytojams!
Pažvelkime, kas yra LCP subkomponentai, ką jie reiškia jūsų svetainės greičiui ir kaip juos galite išmatuoti.
Keturi LCP subkomponentai
LCP subkomponentai padalija Didžiausio turinio elemento atvaizdavimo metriką į keturias skirtingas dalis:
- Pirmojo baito gavimo laikas (TTFB): Kaip greitai serveris atsako į dokumento užklausą.
- Ištekliaus įkėlimo delsa: Laikas, praleistas prieš pradedant siųstis LCP paveikslėlį.
- Ištekliaus įkėlimo laikas: Laikas, praleistas siunčiantis LCP paveikslėlį.
- Elemento atvaizdavimo delsa: Laikas iki LCP elemento atvaizdavimo.
Išteklių laiko matavimai taikomi tik tuo atveju, jei didžiausias puslapio elementas yra paveikslėlis ar fono paveikslėlis. Tekstiniams elementams įkėlimo delsos ir įkėlimo laiko komponentai visada yra lygūs nuliui.
Kaip išmatuoti LCP subkomponentus?
Vienas būdas išmatuoti, kiek kiekvienas komponentas prisideda prie LCP balo jūsų svetainėje, yra naudoti „DebugBear“ svetainės greičio testą. Išskleiskite Didžiausio turinio elemento atvaizdavimo metriką, kad pamatytumėte subkomponentus ir kitas detales, susijusias su jūsų LCP balu.
Čia matome, kad TTFB ir paveikslėlio įkėlimo trukmė kartu sudaro 78 % viso LCP balo. Tai mums sako, kad šie du komponentai yra vietos, nuo kurių optimizavimą pradėti yra efektyviausia.
Kas vyksta kiekviename iš šių etapų? Tinklo užklausų krioklio vizualizacija (angl. waterfall) gali padėti mums suprasti, kokie ištekliai įkeliami kiekviename etape.
„LCP paveikslėlio atradimo“ vaizdas filtruoja krioklio vizualizaciją, palikdamas tik tuos išteklius, kurie yra svarbūs Didžiausio turinio elemento atvaizdavimui. Šiuo atveju kiekvienas iš pirmųjų trijų etapų apima vieną užklausą, o paskutinis etapas baigiasi greitai, neįkėlus jokių naujų išteklių. Tačiau tai priklauso nuo jūsų konkrečios svetainės ir ne visada bus taip.
Pirmojo baito gavimo laikas (TTFB)
Pirmas žingsnis norint atvaizduoti didžiausią puslapio elementą yra gauti dokumento HTML. Neseniai paskelbėme straipsnį apie tai, kaip pagerinti TTFB metriką.
Šiame pavyzdyje matome, kad serverio ryšio sukūrimas neužtrunka ilgai. Daugiausia laiko praleidžiama laukiant, kol serveris sugeneruos puslapio HTML. Taigi, norėdami pagerinti TTFB, turime paspartinti šį procesą arba talpinti HTML spartinančiojoje atmintinėje (angl. cache), kad galėtume visiškai praleisti HTML generavimą.
Ištekliaus įkėlimo delsa
„Išteklius“, kurį norime įkelti, yra LCP paveikslėlis. Idealiu atveju, mes tiesiog turime <img> žymę arti HTML viršaus, ir naršyklė ją iškart randa ir pradeda krauti.
Bet kartais susiduriame su įkėlimo delsa, kaip šiuo atveju. Užuot tiesiogiai įkėlusi paveikslėlį, svetainė naudoja lazysize.js – paveikslėlių atidėtojo įkėlimo (angl. lazy loading) biblioteką, kuri įkelia LCP paveikslėlį tik tada, kai nustato, kad jis pasirodys matomame ekrano plote (angl. viewport).
Dalis įkėlimo delsos kyla dėl to, kad reikia atsisiųsti tą „JavaScript“ biblioteką. Tačiau naršyklė taip pat turi užbaigti puslapio išdėstymą ir pradėti atvaizduoti turinį, kol biblioteka sužinos, kad paveikslėlis yra matomame plote. Pabaigus užklausą, vykdoma CPU užduotis (oranžinė), vedanti iki Pirmojo turinio elemento atvaizdavimo (angl. First Contentful Paint) etapo, kai puslapis pradeda atvaizduoti. Tik tada biblioteka inicijuoja LCP paveikslėlio užklausą.
Kaip tai optimizuoti? Visų pirma, vietoj atidėtojo įkėlimo bibliotekos galite naudoti integruotą loading="lazy" paveikslėlio atributą. Tokiu būdu paveikslėlių įkėlimas nebebus priklausomas nuo pirminio „JavaScript“ kodo įkėlimo.
Bet svarbiausia – LCP paveikslėlis neturėtų būti įkeliamas atidėtai. Tokiu būdu naršyklė gali pradėti jį krauti, kai tik paruoštas HTML kodas. Pasak „Google“, turėtumėte siekti visiškai pašalinti ištekliaus įkėlimo delsą.
Ištekliaus įkėlimo trukmė
Įkėlimo trukmės subkomponentas tikriausiai yra pats aiškiausias: prieš atvaizduodami LCP paveikslėlį, turite jį atsisiųsti!
Šiame pavyzdyje paveikslėlis įkeliamas iš to paties domeno kaip ir HTML. Tai gerai, nes naršyklei nereikia jungtis prie naujo serverio.
Kiti metodai, kuriuos galite naudoti įkėlimo delsai sumažinti:
- Naudoti modernų paveikslėlio formatą, kuris užtikrina geresnį suspaudimą.
- Įkelti paveikslėlius tokio dydžio, kuris atitiktų dydį, kuriuo jie rodomi.
- Sumažinti kitų išteklių, kurie gali konkuruoti su LCP paveikslėliu, prioritetą.
Elemento atvaizdavimo delsa
Ketvirtas ir paskutinis LCP komponentas, atvaizdavimo delsa, dažnai yra labiausiai painiojantis. Išteklius jau įkeltas, bet dėl kažkokių priežasčių naršyklė dar nėra pasirengusi jo parodyti vartotojui!
Laimei, pavyzdyje, kurį iki šiol nagrinėjome, LCP paveikslėlis pasirodo greitai po to, kai yra įkeltas. Viena dažna atvaizdavimo delsos priežastis yra ta, kad LCP elementas nėra paveikslėlis. Tokiu atveju atvaizdavimo delsą sukelia atvaizdavimą blokuojantys scenarijai ir stilių failai. Tekstas gali pasirodyti tik po to, kai šie yra įkelti ir naršyklė užbaigia atvaizdavimo procesą.
Kita priežastis, kodėl galite matyti atvaizdavimo delsą, yra kai svetainė iš anksto įkelia (angl. preloads) LCP paveikslėlį. Išankstinis įkėlimas yra gera idėja, nes praktiškai pašalina bet kokią įkėlimo delsą ir užtikrina, kad paveikslėlis būtų įkeltas anksti.
Tačiau, jei paveikslėlis baigia siųstis prieš puslapiui būnant pasirengusiam atvaizduoti, matysite padidėjusią atvaizdavimo delsą. Ir tai yra gerai! Jūs pagerinote bendrą svetainės greitį, bet optimizavę paveikslėlį, atradote naują butelio kaklelį, į kurį reikia sutelkti dėmesį.
LCP subkomponentai realių vartotojų CrUX duomenyse
Didžiausio turinio elemento atvaizdavimo subkomponentų analizė laboratoriniais testais gali suteikti daug įžvalgų, kur galima optimizuoti. Tačiau per dažnai LCP laboratorijoje neatitinka to, kas vyksta realiems vartotojams!
Štai kodėl 2025 m. vasarį „Google“ pradėjo įtraukti subkomponentų duomenis į CrUX duomenų ataskaitą. Jie (dar?) neįtraukti į „PageSpeed Insights“, tačiau šias metrikas galite pamatyti „DebugBear“ skirtuke „Web Vitals“.
Viena itin naudinga informacija čia yra LCP ištekliaus tipas: jis parodo, kiek lankytojų matė LCP elementą kaip tekstinį elementą ar paveikslėlį.
Net ir tame pačiame puslapyje skirtingi lankytojai matys šiek tiek skirtingą turinį. Pavyzdžiui, skirtingi elementai matomi priklausomai nuo įrenginio dydžio, arba kai kurie lankytojai matys slapukų juostą, o kiti – tikrąjį puslapio turinį.
Kad duomenis būtų lengviau interpretuoti, „Google“ teikia subkomponentų duomenis tik paveikslėliams.
Jei LCP elementas paprastai yra tekstas puslapyje, subkomponentų informacija nebus labai naudinga, nes ji nebus taikoma daugumai jūsų lankytojų.
Tačiau tekstinio LCP analizė yra gana paprasta: viskas, kas nėra TTFB balo dalis, yra atvaizdavimo delsa.
Sekite subkomponentus savo svetainėje su Realių vartotojų stebėsena (RUM)
Laboratoriniai duomenys ne visada atitinka tai, ką patiria realūs vartotojai. CrUX duomenys yra paviršutiniški, teikiami tik didelio srauto puslapiams ir užtrunka mažiausiai 4 savaites, kol visiškai atsinaujina po pakeitimo įdiegimo.
Štai kodėl realių vartotojų stebėsenos (RUM) įrankis, toks kaip „DebugBear“, yra naudingas taisant LCP balus. Galite sekti balus visuose savo svetainės puslapiuose laikui bėgant ir gauti dedikuotus informacinius skydelius kiekvienam LCP subkomponentui.
Taip pat galite peržiūrėti konkrečių lankytojų patirtis, pamatyti, koks buvo jų LCP paveikslėlis, išnagrinėti užklausų krioklį ir patikrinti LCP subkomponentų laikus. Užsiregistruokite nemokamam bandymui.
Išvada
Išsamesnių Didžiausio turinio elemento atvaizdavimo metrikos duomenų prieinamumas suteikia interneto programuotojams didelį pranašumą, kai jie siekia paspartinti savo svetainę.
Subkomponentų įtraukimas į CrUX suteikia naujų įžvalgų apie tai, kaip realūs lankytojai patiria jūsų svetainę, ir gali pasakyti, ar jūsų svarstomos optimizacijos tikrai būtų paveikios.
