Тры Core Web Vitals у 2026 годзе

Google вымярае тры асноўныя палявыя метрыкі досведу працы са старонкай. У кожнай ёсць парог для «Добрай» прадукцыйнасці:

• Largest Contentful Paint (LCP) — час адмалёўкі самага буйнога бачнага элемента. Добра: менш за 2,5 секунды.
• Interaction to Next Paint (INP) — адзыўчывасць на ўсе ўзаемадзеянні карыстальніка (замяніла FID у сакавіку 2024 года). Добра: менш за 200 мс.
• Cumulative Layout Shift (CLS) — візуальная стабільнасць падчас загрузкі. Добра: менш за 0,1.

Банер згоды, які блакуе адмалёўку, запускае цяжкі JavaScript пры загрузцы або ўносіць позднія змены макета, можа перавесці любую з гэтых метрык у зону «Патрабуе паляпшэння» або «Дрэнна» — а Google выкарыстоўвае 28-дзённыя палявыя даныя ад рэальных карыстальнікаў Chrome, таму часовыя праблемы становяцца пастаяннымі сігналамі ранжыравання.

Як банеры згоды шкодзяць LCP

Largest Contentful Paint звычайна спрацоўвае на галоўным выяве або загалоўку. Некалькі патэрнаў згоды затрымліваюць яго без неабходнасці:

Блакуючыя адмалёўку скрыпты CMP

Сінхронная загрузка CMP з загалоўка дакумента спыняе парсінг HTML, пакуль скрыпт не загрузіцца і не выканаецца. Калі CMP размешчана на павольным CDN або мае халодны кэш, вы можаце дадаць 200-800 мс да LCP глабальна.

Банер, які закрывае галоўны элемент

Калі банер згоды пазіцыянуецца як мадальнае накладанне, што закрывае элемент LCP, браўзеры ўсё роўна будуць вымяраць LCP па закрытым элеменце. Аднак калі банер з'яўляецца самым буйным адмаляваным элементам, ён становіцца кандыдатам на LCP — і калі ён адмалёўваецца праз JavaScript пасля загрузкі старонкі, LCP штучна высокі.

Рашэнне: асінхронная загрузка з малюсенькім убудаваным загрузчыкам

Загружайце поўную CMP асінхронна (`async` або `defer`), толькі з малюсенькім убудаваным скрыптам для першапачатковага адлюстравання банера. Імкніцеся да загрузчыка менш за 5КБ у gzip. Поўная логіка паводзін, спісы пастаўшчыкоў і UI-абвязка могуць лянота загружацца пасля першай адмалёўкі.

Як банеры згоды шкодзяць INP

Interaction to Next Paint вымярае горшы час водгуку па ўсіх кліках, націсках і націсках клавіш падчас сесіі. Узаемадзеянні са згодай на cookie часта з'яўляюцца першым узаемадзеяннем карыстальніка — таму павольная кнопка «Прыняць» псуе ацэнку.

Цяжкая праца пры націску «Прыняць»

Многія CMP выконваюць сінхронную працу пры націску «Прыняць»: загрузку 40+ скрыптаў пастаўшчыкоў, запіс у localStorage, запуск падзей dataLayer, абнаўленні Google Consent Mode. Калі гэта перавышае 200 мс, INP пакутуе.

Рашэнне: ставіце працу ў чаргу пасля адмалёўкі

Пры націску «Прыняць» неадкладна схавайце банер і запланіруйце цяжкую працу з `requestIdleCallback` або `setTimeout(0)`. Карыстальнік бачыць імгненнае знікненне банера; скрыпты пастаўшчыкоў загружаюцца ў фоне, не блакуючы ўзаемадзеянне.

Як банеры згоды шкодзяць CLS

Cumulative Layout Shift адсочвае нечаканы візуальны рух. Банеры з'яўляюцца класічнай крыніцай CLS, калі яны ўкараняюцца ў DOM пасля таго, як кантэнт адмаляваны.

Позняе ўкараненне банера

Калі банер з'яўляецца праз 800 мс пасля LCP, ён адсоўвае кантэнт уніз і генеруе зрух макета. Нават невялікі банер можа выклікаць ацэнку CLS 0,1+, калі ён закранае вялікую частку вобласці прагляду.

Паўторная адмалёўка віджэта налад cookie

Віджэты налад у падвале, што загружаюць лагатыпы пастаўшчыкоў асінхронна, могуць перафарматаваць увесь падвал некалькі разоў, узмацняючы CLS.

Рашэнне: рэзервуйце месца загадзя

Выкарыстоўвайце CSS для рэзервавання месца банера з самай першай адмалёўкі — запаўняльнік фіксаванай вышыні, `min-height` на падвале або зафіксаваны знізу банер, які не адсоўвае кантэнт. Сучасныя CMP павінны прапаноўваць канфігурацыю без CLS «з каробкі».

Google Consent Mode V2 і прадукцыйнасць

Consent Mode V2 дазваляе тэгам Google працаваць у стане без cookie да згоды, перадаючы сігналы праз `gtag('consent', 'default', {...})`. Гэта выдатна для непарыўнасці вымярэнняў, але сама бібліятэка gtag.js займае 50-90КБ. Загружайце яе асінхронна і ўстанаўлівайце значэнні па змаўчанні як мага раней, каб пазбегнуць гонкі станаў.

• Устанаўлівайце значэнні па змаўчанні да загрузкі gtag — змясціце выклік згоды па змаўчанні ў загаловак, да скрыпта gtag.js.
• Выкарыстоўвайце `analytics_storage: 'denied'` як значэнне па змаўчанні — мінімізуе даныя, сабраныя да згоды.
• Абнаўляйце пры націску «Прыняць» праз requestIdleCallback — пазбягайце блакіроўкі асноўнага патоку.

Вымярэнне ўплыву CMP на Core Web Vitals

Не гадайце — вымярайце. Выкарыстоўвайце гэтыя інструменты для колькаснай ацэнкі ўплыву вашага банера:

• PageSpeed Insights — палявыя даныя з Chrome UX Report плюс лабараторны аўдыт Lighthouse. Параўнайце ацэнкі са скрыптам CMP і без яго.
• Пашырэнне Web Vitals для Chrome — накладанне LCP, INP, CLS у рэальным часе падчас лакальнага тэставання.
• WebPageTest.org — прадстаўленне filmstrip і waterfall, што паказвае дакладна, калі банер адмалёўваецца і што ён блакуе.
• Справаздача Core Web Vitals у Search Console — 28-дзённыя палявыя даныя, згрупаваныя па шаблоне URL. Праверце, ці адрозніваюцца ацэнкі мэтавых старонак з вашым банерам ад старонак без яго.

Як FlexyConsent застаецца хуткім