Core Web Vitals 2026 жылы: LCP, INP және CLS қалай түзетіледі

Lighthouse бағасынан емес, далалық деректерден бастаңыз. Search Console немесе PageSpeed Insights ішінен 75-процентильде қай көрсеткіш өтпейтінін және бұл қай құрылғы түрінде болатынын табыңыз, содан кейін нақты сессиялар кінәлі элементті, өзара әрекетті немесе ығысуды көрсетуі үшін web-vitals кітапханасының attribution құрастырмасын қосыңыз. LCP көрсеткішін ең үлкен құрамдас бөлігі бойынша, INP көрсеткішін баяу өзара әрекеттердің артындағы ұзақ тапсырма бойынша, ал CLS көрсеткішін қозғалатын әр нәрсеге алдын ала орын қалдыру арқылы түзетіңіз. Зертханалық құралдар мәселені қайталап, түзетуді тексереді, бірақ бағалаудан өтетін-өтпейтініңізді шешпейді.

Үш көрсеткіш және олардың шектері

web.dev сайтындағы Web Vitals шолуы үш тұрақты Core Web Vitals көрсеткішін атайды:

• Largest Contentful Paint (LCP), жүктелу: 2,5 секунд және одан аз болса жақсы, 4 секундтан асса нашар.
• Interaction to Next Paint (INP), жауап беру жылдамдығы: 200 миллисекунд және одан аз болса жақсы, 500 миллисекундтан асса нашар.
• Cumulative Layout Shift (CLS), көрнекі тұрақтылық: 0,1 және одан аз болса жақсы, 0,25-тен асса нашар.

Екі шектің арасындағы мәндер «жақсартуды қажет етеді» деп бағаланады. Шектер беттер жүктелуінің 75-процентиліне мобильді және десктоп құрылғылар үшін бөлек қолданылады, ал бет үш көрсеткіштің бәрі осы процентильде жақсы болғанда ғана бағалаудан өтеді. Жақсы медиана баяу телефондардан келген кірулердің төрттен бірін жасыруы мүмкін, ал бағалау дәл соларды байқау үшін жасалған.

INP 2024 жылы First Input Delay көрсеткішін алмастырды. Ол беттің бүкіл өмірі бойы шертулерді, түртулерді және перне басуларды бақылап, әрқайсысын келесі кадр салынғанға дейін өлшейді. Меңзерді апару, масштабтау және айналдыру есепке алынбайды, ал әр 50 өзара әрекетке ең баяу біреуі есептен шығарылады, сондықтан жалғыз ауытқу нәтижені анықтамайды.

web-vitals README файлы onLCP() пен onINP() Chromium, Firefox және Safari браузерлерінде жұмыс істейтінін, ал onCLS() тек Chromium-да жұмыс істейтінін көрсетеді. MDN үйлесімділік деректеріне сәйкес Safari LCP және Event Timing API-ларын 26.2 нұсқасында қосты. Google-дың далалық деректер жиыны әлі де тек Chrome пайдаланушыларынан жиналады.

Далалық деректер мен зертханалық деректер

Далалық деректер нақты кірулерден келеді. Chrome UX Report (CrUX) жеткілікті жария трафигі бар беттер үшін талаптарға сай Chrome пайдаланушыларының деректерін 28 күндік жылжымалы терезе бойынша origin және URL деңгейінде біріктіреді. PageSpeed Insights бұл деректерді есептің басында көрсетеді, ал URL үшін деректер аз болса, origin деректеріне ауысады. Search Console ішіндегі Core Web Vitals есебі сол дереккөзді пайдаланады, ұқсас URL-дарды топтайды, топқа ең нашар көрсеткіштің күйін береді және мобильді мен десктоп құрылғыларды бөлек бақылайды. Бүгін енгізілген түзету бұл сандарды төрт апта бойы біртіндеп өзгертеді.

Зертханалық деректер бір бақыланатын жүктеуден алынады. Lighthouse бетті эмуляцияланған құрылғы мен желіде жүктейді. DevTools ішіндегі Performance панелі жергілікті LCP, CLS және INP мәндерін нақты уақытта көрсетеді, өзара әрекеттерді фазаларымен және макет ығысуларын бағаларымен жазады, сондай-ақ CrUX деректерін пайдаланушыларыңыздың жағдайына ұқсас CPU мен желіні баяулату ұсыныстарымен бірге жүктей алады.

Айырмашылықтар болжамды, web.dev оларды зертханалық және далалық деректердің айырмашылығы туралы мақалада талдайды:

• LCP: зертханалық іске қосу суық кэшпен, бір терезе өлшемімен және жекелендірусіз өтеді. Нақты пайдаланушыларда ресурстар кэште болуы, LCP элементі басқа болуы, A/B тесттің басқа нұсқасы түсуі мүмкін, ал bfcache арқылы қалпына келтірулер де далалық деректерге кіреді.
• INP: Lighthouse навигациялық іске қосуында өзара әрекет жоқ, сондықтан ол INP орнына Total Blocking Time көрсетеді. TBT жүктеу кезіндегі бұғаттауларды табуға көмектеседі, бірақ сессияның кейінгі баяу шертуін көрмейді.
• CLS: зертхана жүктеу кезіндегі ығысуларды көреді. Далалық CLS беттің бүкіл өмірін қамтиды, соның ішінде өлшемдері жоқ кейін жүктелетін мазмұн мен кеш келген жарнама блоктары да бар.

Не бұзылғанын далалық деректер бойынша шешіңіз, содан кейін мәселені зертханада шынайы баяулатумен қайталаңыз. CrUX API 75-процентильді бірден қайтарады және күн сайын жаңартылады:

curl -s --request POST \
  "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$CRUX_API_KEY" \
  --header 'Content-Type: application/json' \
  --data '{
    "origin": "https://example.com",
    "formFactor": "PHONE",
    "metrics": [
      "largest_contentful_paint",
      "interaction_to_next_paint",
      "cumulative_layout_shift",
      "largest_contentful_paint_image_time_to_first_byte",
      "largest_contentful_paint_image_resource_load_delay",
      "largest_contentful_paint_image_resource_load_duration",
      "largest_contentful_paint_image_element_render_delay"
    ]
  }'

Соңғы төрт көрсеткіш LCP элементі сурет болатын жүктеулер үшін LCP құрамдас бөліктерін көрсетеді.

Attribution құрастырмасымен нақты пайдаланушы деректерін жинау

CrUX көрсеткіштің өтпейтінін айтады, бірақ себебін сирек түсіндіреді. web-vitals кітапханасы көрсеткіштерді Chrome сияқты өлшейді, ал оның attribution құрастырмасы элементті, уақыт бөлінісін және құжаттың жүктелу күйін қосады. Қазіргі негізгі нұсқасы алтыншы. Ол Chromium 151 және жаңа нұсқаларда бір беттік қолданбалардағы soft navigations туралы хабарлай алады, бірақ CrUX оларды қалай есептейтіні әлі шешілмеген.

npm install web-vitals

Бұл модуль көрсеткіштің әр данасы үшін соңғы жазбаны сақтайды және README ұсынғандай, бет жасырын болған кезде буманы navigator.sendBeacon() арқылы жібереді:

import {onCLS, onINP, onLCP} from 'web-vitals/attribution';

const queue = new Map();

function toRecord(metric) {
  const {name, value, rating, id, attribution} = metric;
  const record = {name, value, rating, id, page: metric.navigationURL ?? location.href};

  if (name === 'LCP') {
    record.target = attribution.target;
    record.ttfb = attribution.timeToFirstByte;
    record.loadDelay = attribution.resourceLoadDelay;
    record.loadDuration = attribution.resourceLoadDuration;
    record.renderDelay = attribution.elementRenderDelay;
  } else if (name === 'INP') {
    record.target = attribution.interactionTarget;
    record.inputDelay = attribution.inputDelay;
    record.processing = attribution.processingDuration;
    record.presentation = attribution.presentationDelay;
    record.loadState = attribution.loadState;
    record.script = attribution.longestScript?.entry.sourceURL;
  } else if (name === 'CLS') {
    record.target = attribution.largestShiftTarget;
    record.loadState = attribution.loadState;
  }
  return record;
}

function flush() {
  if (queue.size === 0) return;
  navigator.sendBeacon('/rum', JSON.stringify([...queue.values()]));
  queue.clear();
}

onLCP((metric) => queue.set(metric.id, toRecord(metric)));
onINP((metric) => queue.set(metric.id, toRecord(metric)));
onCLS((metric) => queue.set(metric.id, toRecord(metric)));

addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') flush();
});

CLS пен INP бірнеше рет келуі мүмкін, сондықтан жинағыш әр id үшін соңғы мәнді сақтайды. Пайдаланушы бетпен бірде-бір рет әрекеттеспесе, INP мүлдем болмайды. p75 мәнін анықтайтын бірнеше элементті табу үшін деректерді алдымен бет үлгісі мен құрылғы түрі бойынша, содан кейін target бойынша топтаңыз. Сіздің сандарыңыз CrUX-пен дәл сәйкес келмейді: оларда басқа браузерлер бар, ал кітапхана iframe ішін көрмейді. Жүктемесі жоғары сайттарда іріктеу қолданыңыз, белгілердің кардиналдылығын төмен ұстаңыз және әдеттегі сақтау ережелерін қолданыңыз. AI агентінің бақылануы туралы нұсқаулық телеметриямен жұмыстың дәл осындай тәртібін сипаттайды.

LCP: баяу құрамдас бөлікті табыңыз

LCP оңтайландыру нұсқаулығы LCP көрсеткішін төрт тізбекті бөлікке бөледі:

1. Time to first byte (TTFB): навигация басталғаннан HTML-дің алғашқы байтына дейін.
2. Resource load delay: TTFB-ден LCP ресурсына сұрау басталғанға дейін.
3. Resource load duration: ресурстың өзін жүктеу.
4. Element render delay: ресурс дайын болғаннан элемент салынғанға дейін.

LCP элементі мәтін болса, ортаңғы екі бөлік нөлге тең. Нұсқаулық бағдар ұсынады: TTFB мен ресурсты жүктеуге шамамен 40 пайыздан, ал әр кідіріске 10 пайыздан аз. 2,5 секунд үшін бұл шамамен 1 секунд, 250 миллисекунд, 1 секунд және 250 миллисекунд. Жүктеу кідірісінің үлкен болуы ресурстың кеш табылғанын білдіреді. Салу кідірісінің үлкен болуы бір нәрсе салуға кедергі келтіргенін білдіреді. Суретті сығу екеуін де түзетпейді.

Санды өзгертетін LCP түзетулері

Time to first byte

web.dev 0,8 секундқа дейінгі TTFB мәнін жақсы, ал 1,8 секундтан асқанын нашар деп санайды. Оған қайта бағыттаулар, service worker іске қосылуы, DNS, қосылым мен TLS және сұраудың өзі кіреді. Қайта бағыттау тізбектерін алып тастаңыз, анонимді трафик үшін HTML-ді CDN шетінде кэштеңіз және атауында хэші бар ассеттерді ұзақ әрі өзгермейтін кэш мерзімімен беріңіз. Nginx және Cloudflare-де статиканы кэштеу нұсқаулығы тақырыптар мен ережелерді талдайды. Origin шағын VPS-те жұмыс істесе, оны Linux VPS қорғау тізімі бойынша ықшам ұстаңыз және трафикті edge қабылдасын.

curl -s -o /dev/null \
  -w 'dns %{time_namelookup}\nconnect %{time_connect}\ntls %{time_appconnect}\nttfb %{time_starttransfer}\n' \
  https://example.com/

curl -sI https://example.com/ | grep -iE '^(cache-control|age|cf-cache-status):'

Resource load delay

LCP суреті беттің алғашқы ресурстарымен бірге жүктеле бастауы керек. Оны бастапқы HTML ішіне <img> ретінде орналастырыңыз, оған ешқашан loading="lazy" қоймаңыз және fetchpriority="high" қосыңыз, MDN оны Chromium, Firefox 132+ және Safari 17.2+ нұсқаларында көрсетеді. Әдеттегі себеп клиентте рендерленетін hero блогы: бандл жүктеліп, орындалып, көбіне деректерді алмайынша суретті сұрау мүмкін емес. Hero блогын серверде немесе алдын ала рендерлеңіз. CSS ішінен келетін LCP суретін preload арқылы жүктеңіз.

<link rel="preload" as="image" href="/img/hero-bg.avif"
      type="image/avif" fetchpriority="high">

<picture>
  <source type="image/avif"
          srcset="/img/hero-800.avif 800w, /img/hero-1600.avif 1600w"
          sizes="(max-width: 800px) 100vw, 800px">
  <img src="/img/hero-800.jpg"
       srcset="/img/hero-800.jpg 800w, /img/hero-1600.jpg 1600w"
       sizes="(max-width: 800px) 100vw, 800px"
       width="800" height="450" alt="Product dashboard"
       fetchpriority="high">
</picture>

<link> тек CSS ішіндегі сурет үшін, ал <picture> кәдімгі мазмұн үшін қажет.

Resource load duration

Азырақ байт жіберіңіз. AVIF немесе WebP пішімін қосалқы пішіммен беріңіз, srcset пен sizes файлды слоттың нақты өлшеміне қарай таңдасын, ал суреттерді қайта кіргенде жүктеусіз ашылатындай кэш мерзімімен CDN арқылы таратыңыз. Жоғары басымдықты сұрауларды аз ұстаңыз, өйткені әрқайсысы LCP суретімен бәсекелеседі.

Element render delay

Сурет ерте келіп, бірақ кеш салынса, үлкен бұғаттайтын стильдерді, <head> ішіндегі синхронды скрипттерді және font-display: block немесе auto мәні бар қаріптерді іздеңіз. Кейбір эксперимент құралдары сияқты, аяқталғанша бетті жасыратын скрипттер өз жұмыс уақытын LCP-ге қосады. Маңызды CSS-ті кірістіріңіз, қалғанын кейінге қалдырыңыз және hero блогын клиенттік JavaScript-сіз салыңыз.

INP: өзара әрекетті және оның ұзақ тапсырмасын табыңыз

Өзара әрекеттің үш фазасы бар. Input delay дегеніміз өңдеушілер іске қосылғанға дейінгі күту, әдетте басқа тапсырманың артында. Processing duration дегеніміз өңдеушілердің өз жұмысы. Presentation delay өңдеушілер аяқталғаннан келесі кадрға дейін созылады және стильдерді, орналасуды және салуды қамтиды.

Оларды бірге оқыңыз. loadState мәні dom-interactive немесе dom-content-loaded болғандағы үлкен input delay пайдаланушы бет жүктеліп жатқанда, әдетте гидратация немесе бөгде скрипттер кезінде басқанын білдіреді. Үлкен processing өңдеушіні көрсетеді. Үлкен presentation үлкен DOM-ды немесе мәжбүрлі орналасуды көрсетеді. Chromium-да Long Animation Frames API ұсынатын longestScript өрісі ең ұзақ жұмыс істеген скриптті атайды.

Қайталау үшін Performance панелін ашыңыз, ұсынылған CPU баяулатуын қосыңыз және RUM ішіндегі target элементімен өзара әрекетті қайталаңыз. 50 миллисекундтан ұзақ кез келген тапсырма ұзақ деп саналады, ал оның артында кезекке тұрған өзара әрекет оның қалған уақытын иеленеді.

INP түзетулері: әр өзара әрекетке азырақ жұмыс

Алдымен жауапты салыңыз

Көрінетін кері байланыс беретін ең аз жұмысты орындаңыз, браузерге кадр салуға мүмкіндік беріңіз, содан кейін ғана жалғастырыңыз. Аналитика мен автосақтау сирек жағдайда келесі кадрға дейін аяқталуы керек. Ұзақ тапсырмалар нұсқаулығы мына көмекшіні келтіреді:

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

filterButton.addEventListener('click', async () => {
  filterButton.setAttribute('aria-busy', 'true');
  await yieldToMain();

  const rows = filterRows(allRows, currentQuery());
  renderRows(rows);
  filterButton.removeAttribute('aria-busy');

  await yieldToMain();
  sendAnalytics('filter', rows.length);
});

async function processInChunks(items, handleItem, budgetMs = 40) {
  let lastYield = performance.now();
  for (const item of items) {
    handleItem(item);
    if (performance.now() - lastYield > budgetMs) {
      await yieldToMain();
      lastYield = performance.now();
    }
  }
}

Қолжетімді жерде ағынды scheduler.yield арқылы босатыңыз

scheduler.yield() кодыңызды басымдығы бар жалғасу ретінде, кезектегі ұқсас басымдықты басқа тапсырмалардан бұрын жалғастырады. MDN оны шектеулі қолжетімділік деп белгілейді: Chrome және Edge 129+, Firefox 142+, Safari қолдамайды. Сондықтан API бар-жоғын тексеру және setTimeout() қосалқы нұсқасы міндетті. Қосалқы нұсқа да тапсырманы бөледі, бірақ басымдықты жоғалтады. web.dev енді isInputPending() қолдануды ұсынбайды және ағынды кез келген жағдайда босатуға кеңес береді. Бөліп өңдеу көмекшісі әр тапсырманы 40 миллисекунд шегінде ұстайды, сондықтан цикл ортасындағы түрту тек бір қысқа тапсырманы күтеді.

Гидратация және аралдар

Бүкіл беттің гидратациясы жүктеу кезінде барлық компонент ағашын, соның ішінде статикалық мазмұнды да орындайды. Осы уақыттағы өзара әрекеттер ұзақ енгізу кідірісіне ұшырайды. Статикалық мазмұнды HTML ретінде рендерлеңіз, тек интерактивті компоненттерді гидратациялаңыз және оларды браузер бос болғанға немесе экранда пайда болғанға дейін кейінге қалдырыңыз. Astro-да директивалар әр аралдың қашан гидратацияланатынын анықтайды:

---
import SearchBox from '../components/SearchBox.jsx';
import Comments from '../components/Comments.jsx';
import PriceChart from '../components/PriceChart.jsx';
---
<SearchBox client:idle={{ timeout: 2000 }} />
<Comments client:visible={{ rootMargin: "200px" }} />
<PriceChart client:media="(min-width: 960px)" />

Директивасы жоқ компоненттер JavaScript жібермейді. React Server Components және басқа фреймворктердегі ішінара гидратация дәл осындай нәтижеге ұмтылады, бірақ оны болжамай, өлшеу керек. Бөгде скрипттерді де тексеріңіз: пайдаланылмайтын тегтерді алып тастаңыз, қалғанын браузер бос кезде жүктеңіз және олардың URL мекенжайларын longestScript ішінен бақылаңыз.

Presentation delay

Салу құны DOM өлшемімен бірге өседі. DOM-ды ықшам ұстаңыз, экраннан тыс ұзын бөлімдерге content-visibility: auto қолданыңыз және стильдерді жазғаннан кейін бірден offsetHeight оқымаңыз, себебі бұл синхронды орналасуды тудырады. Деректерді ауыр талдауды немесе сұрыптауды Web Worker-ге көшіріңіз.

CLS: орын қалдырыңыз және қаріптерді тұрақтандырыңыз

Макет ығысуының бағасы әсер ету үлесі мен қашықтық үлесінің көбейтіндісіне тең. Арасы 1 секундтан аз ығысулар ұзақтығы 5 секундқа дейінгі сессиялық терезеге біріктіріледі, ал CLS ең үлкен терезеге тең. Түртуден немесе перне басудан кейінгі 500 миллисекунд ішіндегі ығысулар есепке алынбайды. CLS оңтайландыру нұсқаулығы әдеттегі себептерді атайды:

• Өлшемсіз медиа: орын резервтелуі үшін width пен height немесе aspect-ratio көрсетіңіз.
• Жарнама, ендірілген блоктар және баннерлер: слотты min-height арқылы резервтеңіз және кеш келген мазмұнды пайдаланушы оқып отырған мәтіннің үстіне ешқашан кірістірмеңіз.
• Веб-қаріптер: font-display: optional немесе size-adjust және ascent, descent, line-gap қайта анықтауларымен бапталған қосалқы қаріппен swap қолданыңыз, ал маңызды қаріптерді preload арқылы жүктеңіз.
• Анимациялар: top, left, width немесе height емес, transform пен opacity анимацияланыңыз. Композиттік трансформациялар CLS-ке есептелмейді.
• Артқа және алға навигация: bfcache арқылы қалпына келтіру жүктелген бетті ығысусыз көрсетеді, сондықтан беттерді оған жарамды күйде ұстаңыз.

.ad-slot {
  min-height: 250px;
}

@font-face {
  font-family: "Brand Sans Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

body {
  font-family: "Brand Sans", "Brand Sans Fallback", sans-serif;
}

.toast {
  transform: translateY(100%);
  transition: transform 200ms ease-out;
}

.toast.is-visible {
  transform: translateY(0);
}

Мұндағы қайта анықтау пайыздары шартты. Оларды нақты қаріпіңіздің метрикаларынан есептеп, екі қаріпті браузерде салыстырыңыз.

Алдымен нені түзету керек

Трафигі ең көп URL топтарында өтпейтін көрсеткіштен бастаңыз, егер негізгі аудиторияңыз десктоп болмаса, мобильді құрылғылардан бастаңыз. Көрсеткіш ішінде p75 деңгейінде үлесі ең үлкен құрамдас бөлікпен немесе фазамен жұмыс істеңіз. Алдымен арзан түзетулерді енгізіңіз: fetchpriority, hero блогынан кейінге қалдырылған жүктеуді алып тастау және сурет өлшемдері бірнеше минут алады, ал аралдар немесе серверлік рендеринг жоспарланған көшуді талап етеді.

Далалық белгі	Ықтимал себеп	Алғашқы түзету	Немен растау
LCP, TTFB басым	Кэштелмеген HTML, қайта бағыттаулар	Edge кэші, қайта бағыттау тізбектерінсіз	curl уақыттары
LCP, жүктеу кідірісі басым	Кеш табылу, кейін жүктелетін hero, клиенттік рендеринг	HTML ішінде <img>, fetchpriority	Желі waterfall
LCP, жүктеу ұзақтығы басым	Тым үлкен сурет, ескі пішім	AVIF немесе WebP, srcset, CDN	lcpResourceEntry
LCP, салу кідірісі басым	Бұғаттайтын CSS, скрипттер немесе қаріптер	Маңызды CSS, кейінге қалдырылған скрипттер	Performance трейсі
INP, жүктеу кезіндегі енгізу кідірісі	Гидратация, бөгде тегтер	Аралдар, кейінге қалдырылған гидратация	loadState
INP, ұзақ өңдеу	Ауыр өңдеуші	Алдымен салу, yield, worker	longestScript
INP, ұзақ көрсету	Үлкен DOM, мәжбүрлі орналасу	Кішірек DOM, content-visibility	Өзара әрекеттер кестесі
Жүктеу кезіндегі CLS	Өлшемсіз медиа, қаріп ауысуы	Өлшемдер, бапталған қосалқы қаріп	largestShiftTarget
Жүктеуден кейінгі CLS	Кеш мазмұн, орналасу анимациялары	Резервтелген слоттар, transform	Макет ығысулары қойындысы

Түзетуді тексеру және регрессиялардан қорғау

Әр өзгерісті екі рет растаңыз. Зертханада Performance трейстерін далалық деректерге негізделген баяулатумен өзгеріске дейін және кейін салыстырып, көзделген құрамдас бөліктің кішірейгеніне көз жеткізіңіз. Далада зардап шеккен үлгі үшін өз RUM жүйеңіздегі p75 мәнін бақылаңыз, ол бірнеше күнде өзгереді, ал CrUX өзгерістерді 28 күн ішінде қуып жетеді. Содан кейін 28 күндік тексеруді бастау үшін Search Console ішінде «Бақылауды бастау» түймесін басыңыз.

Жаңа бұғаттайтын скрипттерді, өлшемсіз суреттерді және Total Blocking Time секірістерін ұстау үшін CI ішінде Lighthouse бюджетін ұстаңыз. Ол нақты өзара әрекеттерді көрмейді, сондықтан далалық INP бойынша да ескерту орнатыңыз, ал релиздерді RUM дашбордында белгілеңіз.

Тексеру тізімі

• Search Console мен PageSpeed Insights ішіндегі далалық деректерді мобильді және десктоп үшін қараңыз.
• Трафигі ең көп URL топтарында p75 деңгейінде қай көрсеткіш өтпейтінін жазып алыңыз.
• web-vitals attribution құрастырмасын қосып, visibilitychange кезінде beacon жіберіңіз.
• RUM деректерін үлгі, құрылғы түрі және target бойынша топтаңыз.
• Түзету таңдамас бұрын LCP-дің басым құрамдас бөлігін табыңыз.
• Hero блогын HTML ішіне fetchpriority="high" мәнімен, кейінге қалдырылған жүктеусіз және дұрыс srcset арқылы орналастырыңыз.
• HTML-ді edge-те кэштеп, TTFB мәнін 0,8 секунд шегінде ұстаңыз.
• Ұзақ өңдеушілерді scheduler.yield() және қосалқы setTimeout() арқылы бөліңіз.
• Тек интерактивті аралдарды гидратациялап, бөгде скрипттерді тексеріңіз.
• Медиа, жарнама және баннерлер үшін орын резервтеп, қосалқы қаріптерді баптаңыз.
• Түзетулерді баяулатылған трейсте, содан кейін RUM-да, содан кейін CrUX-та тексеріңіз.