Küpsisebännerid ja Core Web Vitals: hoia LCP, CLS ja INP rohelisena

Küpsisebänner võib kahjustada kõiki kolme Core Web Vitalsi näitajat: see võib viivitada suurima sisuelemendi renderdamist (Largest Contentful Paint, LCP) või ise selleks elemendiks saada, lükata sisu paigast ja suurendada kumulatiivset paigutuse nihet (Cumulative Layout Shift, CLS) ning muuta nupu Nõustu loiuks, mis kajastub näitajas Interaction to Next Paint (INP). Lahendused on teada: laadi nõusolekuskript asünkroonselt, kuva bänner fikseeritud ülekattena, lükka teisejärguline kasutajaliides edasi ja hoia klõpsukäsitlejad kerged.

Miks mõjutavad küpsisebännerid Core Web Vitalsit?

Bänner on sageli esimene asi, mida uus külastaja näeb, ning see koosneb JavaScriptist, CSS-ist ja tekstist, mis konkureerivad sinu tegeliku sisuga ribalaiuse ja põhilõime aja pärast. Core Web Vitals mõõdab just seda konkurentsi, hinnatuna päris lehelaadimiste 75. protsentiili alusel.

Näitaja	Mida see mõõdab	„Hea“ lävend	Kuidas bänner seda kahjustada võib
LCP	Millal renderdatakse suurim pilt või tekstiplokk	Kuni 2,5 s	Renderdamist blokeeriv nõusolekuskript või bänner ise muutub suurimaks elemendiks
CLS	Kui palju nähtav sisu ootamatult liigub	Kuni 0,1	Lehe voogu lisatud bänner, mis lükkab sisu allapoole
INP	Kui kiiresti leht reageerib klõpsudele, puudutustele ja klahvivajutustele	Kuni 200 ms	Raske töö nupu Nõustu või Keeldu käsitlejas

INP asendas 2024. aasta märtsis näitaja First Input Delay (FID) ja see on nõusoleku seisukohast oluline. FID mõõtis ainult viivitust enne esimese interaktsiooni käsitlemist; INP mõõdab kogu aega mis tahes interaktsioonist järgmise kaadrini ning „Nõustu kõigiga“ on sageli esimene asi, millele külastaja klõpsab.

Kuidas takistada nõusolekuskriptil LCP-d blokeerimast?

Laadi see atribuudiga async ja hoia see väike. Sünkroonne skript elemendis <head> peatab HTML-i parseri, kuni skript on alla laaditud ja käivitatud, mis viivitab sinu pealkirja ja põhipilti koos kõige muuga.

<head>
  <script src="https://consent.example.com/loader.js" async></script>

  <!-- Passiivne, kuni nõusolekuskript selle pärast nõusoleku andmist aktiveerib -->
  <script type="text/plain" data-consent="analytics"
          src="https://analytics.example.com/script.js"></script>
</head>

Asünkroonne laadimine on ohutu, kui mittevajalikud märgendid on niimoodi passiivsed: midagi ei käivitu enne, kui nõusolekuskript seda lubab. „Automaatse blokeerimise“ lähenemised, mis püüavad skripte nende lisamisel kinni, peavad tavaliselt käivituma sünkroonselt enne kõiki teisi skripte, mis maksab renderdusaega. Meie juhend skriptide blokeerimise kohta kuni nõusolekuni võrdleb meetodeid.

Teine LCP lõks on bänner ise. LCP raporteerib suurima pildi või tekstiploki, mis vaateaknasse joonistatakse enne, kui külastaja lehega suhtleb. Väikesel telefonil võib pika lõiguga bänner olla sinu pealkirjast suurem ja kui see joonistatakse hilja, on ka sinu LCP hiline. Hoia esimese kihi tekst lühike, kasuta süsteemifonti, et bänner ei peaks kunagi veebifonti ootama, ja ära kunagi tarni bännerit pildina.

Bänneri viivitamine ei aita: hiline bänner võib ikkagi saada LCP-elemendiks, lihtsalt hiljem.

Kuidas takistada bänneril paigutuse nihkeid põhjustamast?

Kuva see fikseeritud ülekattena. CLS loeb olemasoleva sisu liikumist, nii et element omadusega position: fixed, mis ilmub lehe peale, ei nihuta midagi. Klassikaline viga on riba, mis lisatakse elemendi <body> algusesse pärast esimest joonistamist ja mis lükkab kogu lehe allapoole.

.consent-banner {
  position: fixed;
  inset: auto 0 0 0; /* kinnitatud alla, väljaspool dokumendi voogu */
  z-index: 1000;
  font: 1rem/1.5 system-ui, sans-serif; /* pole veebifonti, mida oodata */
  animation: consent-in 200ms ease-out;
}

@keyframes consent-in {
  from { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .consent-banner { animation: none; }
}

Kui animeerid, animeeri omadusi transform või opacity. Omaduste top, height või margin animeerimine muudab paigutust ja võib registreeruda nihetena. Kui sinu disain tõesti vajab dokumendi voos asuvat bännerit, reserveeri selle ruum serveris renderdatud HTML-is, mis toimib hästi ainult siis, kui server loeb nõusolekuküpsist ja jätab naasvate külastajate puhul ruumi ära.

Mõtle ka sellele, mis juhtub pärast nõusolekut. Nihked, mis toimuvad 500 ms jooksul pärast klõpsu või klahvivajutust, jäetakse CLS-ist välja, kuid reklaamipesa, videomanus või vestlusvidin, mis laaditakse paar sekundit hiljem, mitte. Anna neile konteineritele fikseeritud mõõtmed või aspect-ratio.

Kuidas lükata bänneri kasutajaliidest edasi ilma nõuetele vastavust kahjustamata?

Tarni esimene kiht kohe ja laadi eelistuste keskus vajaduse korral. Esimene kiht on lühike sõnum ja mõni nupp; teine kiht koos kategooriate lülitite, teenusepakkujate loendite ja küpsisetabelitega on tavaliselt raske osa.

Mida sa edasi lükata ei tohi, on valik. „Keeldu kõigist“ kuulub esimesse kihti sama silmapaistvalt kui „Nõustu kõigiga“. 2021. aasta detsembris trahvis Prantsusmaa andmekaitseasutus CNIL Google’it 150 mln euroga ja Facebooki 60 mln euroga, sest küpsistest keeldumine oli raskem kui nendega nõustumine. Vaata artikleid küpsisebännerite manipuleerivad disainimustrid ja meie bännerite disaini parimad tavad.

Kuidas hoida nupud Nõustu ja Keeldu INP jaoks kiiresti reageerivana?

Tee enne järgmist joonistamist minimaalne ja loovuta siis põhilõim. Aeglane käsitleja kirjutab tavaliselt ühe pika ülesande jooksul nõusolekuküpsise, saadab nõusolekulogi, uuendab Google Consent Mode’i ja lisab mitu teenusepakkuja skripti, nii et nupp tundub hangunud.

function yieldToMain() {
  if (globalThis.scheduler?.yield) return globalThis.scheduler.yield();
  return new Promise((resolve) => setTimeout(resolve, 0));
}

acceptButton.addEventListener('click', async () => {
  banner.remove();                                    // 1. kõigepealt nähtav tagasiside
  saveConsent({ analytics: true, marketing: true });  // 2. väike ja sünkroonne
  await yieldToMain();                                // 3. lase brauseril joonistada
  activateTags(['analytics', 'marketing']);           // 4. raske töö hilisemas ülesandes
});

customizeButton.addEventListener('click', async () => {
  customizeButton.setAttribute('aria-busy', 'true');
  const { openPreferences } = await import('./preference-center.js'); // laaditakse vajaduse korral
  openPreferences();
});

Saada nõusolekulogi funktsiooniga navigator.sendBeacon(), et võrgutöö ei hoiaks kunagi interaktsiooni kinni, ja aktiveeri paljud märgendid partiidena, loovutades nende vahel põhilõime. scheduler.yield() ei ole veel kõigis brauserites saadaval, sellest ka varulahendus.

Kuidas testida bänneri mõju?

Testi esmakülastajana ja seejärel naasva külastajana. Laboritööriistad, nagu Lighthouse, alustavad tühja salvestusruumiga, nii et nad näevad alati bännerit:

1. Ava leht värskes brauseriprofiilis piirkonnast, kus bänner kuvatakse.
2. Käivita Lighthouse või PageSpeed Insights ja kontrolli, milline element raporteeritakse LCP-elemendina.
3. Salvesta Chrome DevToolsi paneelis Performance jälg, klõpsa „Nõustu kõigiga“ ja otsi pärast klõpsu pikki ülesandeid.
4. Kontrolli samast jäljest paigutuse nihkeid bänneri ilmumise ajal ja pärast märgendite laadimist.
5. Korda testi naasva külastajana, kelle nõusolek on salvestatud, sest siis käivitub rohkem märgendeid.
6. Võrdle hiljem välimõõtmisi Search Console’is või PageSpeed Insightsis; need hõlmavad libisevat 28-päevast ajaakent, nii et muutused ilmnevad järk-järgult.

Kokkuvõte

Nõusolekubänner ei pea sulle Core Web Vitalsi tulemusi maksma minema. Laadi see asünkroonselt, hoia see dokumendi voost väljas, lükka raske teine kiht edasi ja hoia klõpsukäsitlejad kerged, jättes samal ajal kõik valikud võrdselt lihtsaks. Sellised tööriistad nagu Cookiesh saavad laadimise poole enda peale võtta: asünkroonne laadija on gzip-tihendatult alla 5 kB, seda serveeritakse globaalsest serva-CDN-ist ja see on ehitatud paigutuse nihkeid vältima.

See artikkel on üldine teave, mitte õigusnõustamine. Oma konkreetse olukorra kohta otsuste tegemiseks pea nõu kvalifitseeritud privaatsusspetsialistiga.