Kaip pagerinti LCP (Largest Contentful Paint)
Largest Contentful Paint matuoja, kada baigia įsikelti didžiausias matomas elementas — dažniausiai jūsų pagrindinis paveikslėlis arba antraštė. Tai rodiklis, su kuriuo daugiausiai vargsta svetainių savininkai, tačiau sprendimai gerai žinomi ir, atliekami tinkama tvarka, patikimai sumažina LCP žemiau 2,5 sekundės tikslo.
Trumpai
Geras LCP yra 2,5 sekundės ar mažiau. Dirbkite šia tvarka: pagreitinkite serverio atsaką (TTFB), pašalinkite atvaizdavimą blokuojantį CSS ir JavaScript, tada optimizuokite bei iš anksto įkelkite (preload) patį LCP paveikslėlį. CDN padeda kiekviename žingsnyje. Prieš ir po pamatuokite mūsų greičio testu.
Pirmiausia raskite savo LCP elementą
Prieš ką nors keisdami, nustatykite, kas iš tikrųjų yra LCP elementas. Daugumoje puslapio greičio įrankių jis įvardijamas aiškiai — dažnai tai pagrindinis paveikslėlis, fono paveikslėlis arba didelis antraštės teksto blokas. Kiekvienas žemiau pateiktas sprendimas siekia, kad būtent tas elementas atsivaizduotų greičiau. Apie patį rodiklį daugiau skaitykite Core Web Vitals paaiškinime.
Sprendimai pagal svarbą
1. Pagerinkite serverio atsako laiką
Niekas negali atsivaizduoti, kol neatvyko HTML. Jei jūsų TTFB viršija 800 ms, pirmiausia sutvarkykite tai: įjunkite viso puslapio talpyklą, atnaujinkite lėtą talpinimą ir sumažinkite sunkų darbą su duomenų baze. Tai pamatas, ant kurio remiasi visi kiti optimizavimai.
2. Pašalinkite atvaizdavimą blokuojančius išteklius
Naršyklės stabdo atvaizdavimą, kol atsisiunčia CSS ir sinchroninį JavaScript puslapio head dalyje. Įterpkite (inline) tik tą nedidelį CSS kiekį, kurio reikia matomai (above-the-fold) daliai, likusį atidėkite, o scenarijams pridėkite defer arba async, kad jie nebeblokuotų pirmojo atvaizdavimo.
<script src="/js/app.js" defer></script>
<link rel="stylesheet" href="/css/below-fold.css" media="print" onload="this.media='all'">3. Optimizuokite LCP paveikslėlį
Jei jūsų LCP elementas yra paveikslėlis, tai dažniausiai didžiausias vienetinis laimėjimas. Pateikite jį moderniu formatu, pvz., WebP ar AVIF, sumažinkite iki dydžio, kuriuo jis iš tikrųjų rodomas, ir suspauskite. Mūsų paveikslėlių optimizavimo vadovas tai aprašo išsamiai. Niekada neatidėkite (lazy-load) LCP paveikslėlio įkėlimo — atidėtas įkėlimas uždelsia būtent tą elementą, kurį norite parodyti pirmą.
4. Iš anksto įkelkite LCP paveikslėlį
Nurodykite naršyklei atsisiųsti pagrindinį paveikslėlį anksti, o ne aptikti jį vėlai skaitant HTML. Vienas preload užuomina gali sutaupyti šimtus milisekundžių:
<link rel="preload" as="image" href="/img/hero.avif" fetchpriority="high">Pridėjus fetchpriority="high" prie paties paveikslėlio, modernios naršyklės dar labiau sustiprina šią užuominą.
5. Naudokite CDN ir modernius protokolus
CDN pateikia jūsų HTML ir paveikslėlius iš krašto (edge) taško netoli kiekvieno lankytojo, mažindamas tinklo delsą kiekvienai užklausai. Derinkite jį su HTTP/2 ar HTTP/3, kad keli ištekliai būtų atsisiunčiami lygiagrečiai viena jungtimi.
Apytikslis poveikis iš pirmo žvilgsnio
| Sprendimas | Įprastas darbas | Kur padeda |
|---|---|---|
| Puslapio talpykla / greitesnis serveris | Mažas | Serverio atsakas (TTFB) |
| CSS ir JS atidėjimas | Vidutinis | Atvaizdavimo pradžia |
| Modernus paveikslėlių formatas ir dydis | Mažas | Paveikslėlio atsisiuntimas |
| Preload + fetchpriority | Mažas | Paveikslėlio aptikimas |
| CDN + HTTP/2 ar HTTP/3 | Vidutinis | Tinklo delsa |
Dažniausiai užduodami klausimai
Koks yra geras LCP rezultatas?
2,5 sekundės ar mažiau ties 75-uoju realių apsilankymų procentiliu laikoma „geru“. Nuo 2,5 iki 4 sekundžių reikia gerinti, o virš 4 sekundžių yra prastas.
Ar turėčiau atidėti pagrindinio paveikslėlio įkėlimą?
Ne. Atidėtas įkėlimas skirtas paveikslėliams žemiau matomos srities. Pritaikius jį LCP elementui, uždelsiamas būtent tas objektas, kurį bandote parodyti pirmą, ir LCP dažniausiai tik pablogėja.
Mano LCP elementas yra tekstas, o ne paveikslėlis. Ką dabar?
Susitelkite į serverio atsaką ir atvaizdavimą blokuojančius išteklius bei įsitikinkite, kad jūsų šriftai neblokuoja teksto atvaizdavimo. Naudojant font-display: swap tekstas iškart rodomas atsargine šriftu.
Susiję vadovai
Kas yra TTFB (laikas iki pirmojo baito)?
Ką matuoja „laikas iki pirmojo baito“, kas laikoma geru rezultatu ir dažniausios lėto TTFB priežastys.
Skaityti →Našumas ir Core Web Vitals„Core Web Vitals“ paaiškinimas ne programuotojams
LCP, INP ir CLS paprastai — ką matuoja „Google“, kokios ribos ir kaip tai veikia reitingus.
Skaityti →Našumas ir Core Web VitalsKaip sumažinti CLS (Cumulative Layout Shift)
Kodėl puslapiai „šokinėja“ kraunantis ir konkretūs sprendimai, išlaikantys stabilų išdėstymą.
Skaityti →Patikrinkite savo svetainę pagal šį vadovą
Atlikite nemokamą ScanOpsPro patikrą ir pažiūrėkite, kaip jūsų svetainė tvarkosi su pagrindais.
Atlikti nemokamą patikrą