2026 жылғы үш Core Web Vitals

Google бет тәжірибесі үшін үш негізгі өріс метрикасын өлшейді. Әрқайсысының "Жақсы" өнімділік үшін шегі бар:

• Largest Contentful Paint (LCP) — ең үлкен көрінетін элементті көрсету уақыты. Жақсы: 2,5 секундтан аз.
• Interaction to Next Paint (INP) — барлық пайдаланушы өзара әрекеттестіктеріне жауап беру (2024 жылы наурызда FID-ді алмастырды). Жақсы: 200 мс-тан аз.
• Cumulative Layout Shift (CLS) — жүктеу кезіндегі көрнекі тұрақтылық. Жақсы: 0,1-ден аз.

Рендерингті бұғаттайтын, жүктеу кезінде ауыр JavaScript іске қосатын немесе кеш орналасу өзгерістерін енгізетін келісім баннері кез келгенін "Жақсарту қажет" немесе "Нашар" диапазонға итеруі мүмкін — Google нақты Chrome пайдаланушыларынан 28 күндік өріс деректерін пайдаланады, сондықтан өтпелі мәселелер тұрақты рейтинг сигналдарына айналады.

Келісім баннерлері LCP-ке қалай зиян тигізеді

Largest Contentful Paint әдетте hero суретте немесе тақырыпта іске қосылады. Бірнеше келісім үлгісі оны қажетсіз кешіктіреді:

Рендерингті бұғаттайтын CMP сценарийлері

CMP-ді құжат тақырыбынан синхронды түрде жүктеу сценарий жүктелген және орындалғанша HTML талдауын тоқтатады. Егер CMP баяу CDN-де орналастырылса немесе суық кэші болса, LCP-ге жаһандық деңгейде 200-800 мс қосуыңыз мүмкін.

Hero-ны жабатын баннер

Егер келісім баннері LCP элементін жабатын модальды қабат ретінде орналастырылса, браузерлер LCP-ді жабылған элементтен өлшей береді. Алайда, баннер ең үлкен боялған элемент болса, ол LCP кандидатына айналады — және бет жүктелгеннен кейін JavaScript арқылы рендерленсе, LCP жасанды түрде жоғары болады.

Түзету: Кішкентай инлайн Bootstrap арқылы асинхронды жүктеу

Толық CMP-ді асинхронды түрде жүктеңіз (`async` немесе `defer`), тек бастапқы баннерді көрсету үшін кішкентай инлайн сценариймен. Gzip-пен 5KB-дан аз bootstrap-ты мақсат етіңіз. Толық мінез-құлық логикасы, жеткізуші тізімдері және UI-chrome бірінші бояудан кейін lazy-load-пен жүктелуі мүмкін.

Келісім баннерлері INP-ке қалай зиян тигізеді

Interaction to Next Paint сессия кезіндегі барлық басу, түрту және пернелерді басу бойынша ең нашар жауап беру уақытын өлшейді. Cookie келісім өзара әрекеттестіктері көбінесе пайдаланушының бірінші өзара әрекеттестігі болады — сондықтан баяу Қабылдау түймесі ұпайды бұзады.

Қабылдау кезіндегі ауыр жұмыс

Көптеген CMP Қабылдау кезінде синхронды жұмыс орындайды: 40+ жеткізуші сценарийін жүктеу, localStorage-ге жазу, dataLayer оқиғаларын іске қосу, Google Consent Mode жаңартуларын белсендіру. Бұл 200 мс-тан асса, INP зардап шегеді.

Түзету: Жұмысты Бояудан кейін кезекке қою

Қабылдау батырмасын басқанда, баннерді бірден жасырып, `requestIdleCallback` немесе `setTimeout(0)` арқылы ауыр жұмысты жоспарлаңыз. Пайдаланушы баннерді лезде жоғалып кеткенін көреді; жеткізуші сценарийлер өзара әрекеттестікті бұғаттамай фонда жүктеледі.

Келісім баннерлері CLS-ке қалай зиян тигізеді

Cumulative Layout Shift күтпеген көрнекі қозғалыстарды бақылайды. Баннерлер мазмұн боялғаннан кейін DOM-ға енгізілген кезде CLS-тің классикалық қайнар көзі болып табылады.

Кеш баннер енгізу

Баннер LCP-тен 800 мс кейін пайда болса, ол мазмұнды төмен итереді және орналасу ауысымын тудырады. Тіпті кішкентай баннер де 0,1-ден жоғары CLS ұпайын белсендіруі мүмкін, егер ол қараптың үлкен бөлігіне әсер етсе.

Cookie параметрлері Widget-ін қайта рендерлеу

Жеткізуші логотиптерін асинхронды жүктейтін футер параметрлері виджеттері бүкіл футерді бірнеше рет қайта ағызуы мүмкін, CLS-ті күрделендіре түседі.

Түзету: Алдын ала орын резервтеу

Бірінші бояудан баннер орнын резервтеу үшін CSS пайдаланыңыз — бекітілген биіктіктегі орын иесі, футерде `min-height`, немесе мазмұнды итермейтін төменгі бекітілген баннер. Заманауи CMP-лер әдепкі бойынша CLS-сіз конфигурация ұсынуы тиіс.

Google Consent Mode V2 және өнімділік

Consent Mode V2 Google тегтеріне келісімге дейін cookie-сіз күйде жұмыс істеуге мүмкіндік береді, `gtag('consent', 'default', {...})` арқылы сигналдар жіберіп. Бұл өлшеу үздіксіздігі үшін тамаша, бірақ gtag.js кітапханасының өзі 50-90KB. Оны асинхронды түрде жүктеп, жарыс жағдайларынан аулақ болу үшін мүмкіндігінше ерте әдепкілерді орнатыңыз.

• gtag жүктелмес бұрын әдепкілерді орнатыңыз — gtag.js сценарийінен бұрын, тақырыпқа келісім әдепкі шақыруын қойыңыз.
• Әдепкі ретінде `analytics_storage: 'denied'` пайдаланыңыз — келісімге дейін жиналатын деректерді азайтады.
• Қабылдау кезінде requestIdleCallback арқылы жаңартыңыз — негізгі ағынды бұғаттаудан аулақ болыңыз.

Core Web Vitals-қа CMP әсерін өлшеу

Болжамдамаңыз — өлшеңіз. Баннеріңіздің әсерін сандық бағалау үшін осы құралдарды пайдаланыңыз:

• PageSpeed Insights — Chrome UX Report-тан өріс деректері және зертханалық Lighthouse тексеруі. CMP сценарийімен және онсыз ұпайларды салыстырыңыз.
• Web Vitals Chrome кеңейтімі — жергілікті тестілеу кезінде нақты уақыттағы LCP, INP, CLS қабаттасуы.
• WebPageTest.org — баннердің дәл қашан рендерленетінін және нені бұғаттайтынын көрсететін кинолента және сарқырама көрінісі.
• Search Console Core Web Vitals есебі — URL үлгісі бойынша топталған 28 күндік өріс деректері. Баннерлі бастапқы беттер баннерсіз беттерден басқаша ұпай алатынын тексеріңіз.

FlexyConsent жылдамдықты қалай сақтайды