Core Web Vitals Tatu 2026

Google inapima vipimo vitatu vya msingi vya uga kwa uzoefu wa ukurasa. Kila moja ina kizingiti cha utendaji "Mzuri":

• Largest Contentful Paint (LCP) — muda wa kuonyesha kipengele kikubwa zaidi kinachoonekana. Mzuri: chini ya sekunde 2.5.
• Interaction to Next Paint (INP) — mwitikio kwa mwingiliano wote wa mtumiaji (ulichukua nafasi ya FID Machi 2024). Mzuri: chini ya 200ms.
• Cumulative Layout Shift (CLS) — utulivu wa kuona wakati wa kupakia. Mzuri: chini ya 0.1.

Bango la idhini linalozuia uonyeshaji, linaloendeshea JavaScript nzito wakati wa kupakia, au kuingiza mabadiliko ya muundo ya marehemu linaweza kusukuma yoyote ya hizi kwenye bendi ya "Inahitaji Uboreshaji" au "Mbaya" — na Google inatumia data ya uga ya siku 28 kutoka kwa watumiaji halisi wa Chrome, hivyo masuala ya muda mfupi yanakuwa ishara za safu zinazodumu.

Jinsi Mabango ya Idhini Yanavyodhuru LCP

Largest Contentful Paint kwa kawaida inawaka kwenye picha ya shujaa au kichwa. Mifumo kadhaa ya idhini huichelewa bila sababu:

Hati za CMP Zinazozuia Uonyeshaji

Kupakia CMP kwa usawazishaji kutoka kwenye kichwa cha hati kunasimamisha uchanganuzi wa HTML hadi hati ipakuliwe na itekelezwe. Ikiwa CMP imesakinishwa kwenye CDN ya polepole au ina hifadhi baridi, unaweza kuongeza 200-800ms kwa LCP kimataifa.

Bango Linalofunika Kipengele cha Shujaa

Ikiwa bango la idhini limewekwa kama jalizo la kidirisha la modal linalofunika kipengele cha LCP, vivinjari bado vitapima LCP kutoka kwa kipengele kilichofunikwa. Hata hivyo, ikiwa bango ndilo kipengele kikubwa zaidi kilichochorwa, linakuwa mgombea wa LCP — na ikiwa kinaonyeshwa kupitia JavaScript baada ya kupakia ukurasa, LCP ni ya juu kwa bandia.

Suluhisho: Upakiaji wa Asinchronia na Bootstrap Ndogo ya Inline

Pakia CMP kamili kwa asinchronia (`async` au `defer`), na hati ndogo tu ya inline kwa uonyeshaji wa awali wa bango. Lenga bootstrap ndogo ya KB 5 iliyosongwa. Mantiki kamili ya tabia, orodha za wauzaji, na chrome ya UI zinaweza kupakia kwa uvivu baada ya uchoraji wa kwanza.

Jinsi Mabango ya Idhini Yanavyodhuru INP

Interaction to Next Paint inapima wakati wa mwitikio mbaya zaidi katika mibofyo yote, mguso, na vibonyezo vya funguo wakati wa kikao. Mwingiliano wa idhini ya vidakuzi mara nyingi ni mwingiliano wa kwanza mtumiaji anaoufanya — kwa hivyo kitufe polepole cha Kukubali kinadhuru alama.

Kazi Nzito juu ya Kukubali

CMPs nyingi zinatekeleza kazi ya usawazishaji juu ya Kukubali: kupakia hati 40+ za wauzaji, kuandika kwenye localStorage, kuanzisha matukio ya dataLayer, kuchochea masasisho ya Google Consent Mode. Ikiwa hii inazidi 200ms, INP inateseka.

Suluhisho: Panga Foleni Kazi Baada ya Uchoraji

Kubonyeza Kukubali, ficha bango mara moja na upange kazi nzito na `requestIdleCallback` au `setTimeout(0)`. Mtumiaji anaona bango ikitoweka mara moja; hati za wauzaji zinapakia nyuma bila kuzuia mwingiliano.

Jinsi Mabango ya Idhini Yanavyodhuru CLS

Cumulative Layout Shift inafuatilia harakati ya kuona isiyotarajiwa. Mabango ni chanzo cha kawaida cha CLS yanapodungwa kwenye DOM baada ya maudhui kuchorwa.

Kudungwa kwa Bango la Marehemu

Ikiwa bango linaonekana 800ms baada ya LCP, inasukuma maudhui chini na kuzalisha mabadiliko ya muundo. Hata bango ndogo linaweza kusababisha alama ya CLS ya 0.1+ ikiwa inaathiri sehemu kubwa ya eneo la kutazama.

Uchoraji Upya wa Widget ya Mapendeleo ya Vidakuzi

Widgets za mapendeleo ya miguu inayopakia nembo za wauzaji kwa asinchronia zinaweza kupangua tena mguu wote mara nyingi, ikiongeza CLS.

Suluhisho: Hifadhi Nafasi Mapema

Tumia CSS kuhifadhi nafasi ya bango kutoka kwenye uchoraji wa kwanza kabisa — kishikilia nafasi cha urefu uliowekwa, `min-height` kwenye mguu, au bango lililowekwa chini ambalo halusukumi maudhui. CMPs za kisasa zinapaswa kutoa usanidi bila CLS nje ya kisanduku.

Google Consent Mode V2 na Utendaji

Consent Mode V2 inaruhusu vitambulisho vya Google kufanya kazi katika hali isiyo na vidakuzi kabla ya idhini, ikipitisha ishara kupitia `gtag('consent', 'default', {...})`. Hii ni nzuri kwa mwendelezo wa upimaji, lakini maktaba ya gtag.js yenyewe ni 50-90KB. Ipakia kwa asinchronia na uweke mipangilio ya kawaida mapema iwezekanavyo ili kuepuka hali za mbio.

• Weka mipangilio ya kawaida kabla ya kupakia gtag — weka simu ya kawaida ya idhini kwenye kichwa, kabla ya hati ya gtag.js.
• Tumia `analytics_storage: 'denied'` kama kawaida — inapunguza data iliyokusanywa kabla ya idhini.
• Sasisha juu ya Kukubali kupitia requestIdleCallback — epuka kuzuia uzi mkuu.

Kupima Athari ya CMP kwenye Core Web Vitals

Usikisi — pima. Tumia zana hizi kupima athari ya bango lako:

• PageSpeed Insights — data ya uga kutoka Chrome UX Report pamoja na ukaguzi wa maabara wa Lighthouse. Linganisha alama zikiwa na na bila hati ya CMP.
• Web Vitals Chrome extension — jalizo la LCP, INP, CLS la wakati halisi wakati wa majaribio ya ndani.
• WebPageTest.org — mtazamo wa filmstrip na maporomoko ya maji ukionyesha hasa wakati bango linaonyeshwa na kinachozuia.
• Search Console Core Web Vitals report — data ya uga ya siku 28 iliyopangwa kwa muundo wa URL. Angalia kama kurasa za kutua zenye bango lako zinaweza kupata alama tofauti kuliko kurasa bila.

Jinsi FlexyConsent Inavyobaki ya Haraka