Core Web Vitals 2020 yilda kiritilganidan beri qidiruv tizimi reytingi va foydalanuvchi tajribasini baholashning asosiy mezoniga aylandi, 2026 yilga kelib esa bu ko'rsatkichlar yanada qattiqlashdi va INP metrikasi FID o'rnini butunlay egalladi. Bizning hosting platformamizda joylashgan saytlarning katta qismi dastlab LCP 3 soniyadan oshiq, INP esa 300 millisekunddan yuqori ko'rsatkichlar bilan kelganini ko'rganmiz, ammo to'g'ri yondashuv bilan har qanday loyihani yashil zonaga olib chiqish mumkinligi tajribadan o'tdi. Yaqinda bir mijozimizning Toshkentdagi e-commerce sayti LCP 4.2 soniyadan 1.4 soniyaga, INP esa 480ms dan 95ms gacha tushirilib, organik trafigi uch oy ichida 67 foizga oshdi va bu natija tasodifiy emas, balki tizimli ishning samarasi edi.
LCP ni 2.5 soniyadan past tushirish
Largest Contentful Paint sahifaning eng katta vizual elementi ekranda paydo bo'lguncha ketgan vaqtni o'lchaydi va ko'p hollarda bu hero rasm yoki katta sarlavha bo'ladi. Eng katta xatolardan biri shundaki, dasturchilar bu elementni oddiy lazy loading bilan yuklab qo'yishadi, holbuki LCP elementi uchun aksincha eager yuklash va fetchpriority="high" atributi qo'llanishi kerak. Zamonaviy brauzerlarda <img fetchpriority="high" loading="eager" src="hero.avif"> kombinatsiyasi yuklanish vaqtini 30-40 foizga qisqartiradi, chunki brauzer bu resursni boshqa hamma narsadan oldin so'raydi va parser hatto HTML ning qolgan qismini o'qib bo'lmasdan turib network so'rovini boshlaydi.
Rasm formatlari masalasida JPEG va PNG o'tmishda qoldi, 2026 yilda AVIF va WebP kombinatsiyasi standart bo'lib, AVIF JPEG ga nisbatan 50 foizgacha kichikroq fayl hajmi beradi va shu bilan birga sifatni saqlaydi. <picture> elementi orqali bir nechta format va o'lchamlarni taqdim etish, server tomonda esa Nginx yoki CDN darajasida Accept header asosida avtomatik konvertatsiya qilish eng samarali yondashuv hisoblanadi. Shriftlar uchun font-display: swap qoidasi va critical fontlarni preload qilish FOIT muammosini bartaraf etadi, qolaversa o'zining serveriga yoki yaqin CDN ga joylab qo'yish Google Fonts dan to'g'ridan-to'g'ri yuklashga qaraganda ancha tez ishlaydi.
INP ni 200ms ostiga olib tushish
Interaction to Next Paint foydalanuvchi tugmani bosgandan keyin ekranda javob ko'ringuncha ketgan vaqtni o'lchaydi va bu metrika asosan JavaScript ning long task lari bilan buzilib turadi. 50 millisekunddan ortiq davom etadigan har qanday vazifa long task hisoblanadi va asosiy thread ni bloklaydi, shuning uchun katta hisoblashlarni 5ms li bo'laklarga ajratib, ular orasida brauzerga nafas olishga ruxsat berish kerak. 2026 yilda Chrome va Edge da to'liq qo'llab-quvvatlanadigan scheduler.yield() API bu jarayonni nihoyatda osonlashtirdi, chunki endi siklning o'rtasida await scheduler.yield() chaqirig'i bilan brauzerga UI ni yangilashga imkon berib, keyin ishni davom ettirish mumkin.
Og'ir hisoblashlar uchun Web Worker dan foydalanish hali ham eng to'g'ri yechim, ayniqsa katta JSON parsing, kriptografiya yoki ma'lumotlarni filtrlashda. Form input lar va qidiruv maydonlari uchun debounce va throttle texnikalari majburiy, aks holda har bir tugma bosilishida server so'rovi yuborilib, INP yomonlashadi va serverga ham keraksiz yuk tushadi. Hodisalarni boshqarishda passive event listener lardan foydalanish, ayniqsa scroll va touch hodisalarida, scroll jank ni butunlay yo'qotadi, chunki brauzer event handler tugashini kutmasdan scrollni boshlay oladi.
CLS ni 0.1 dan past saqlash
Cumulative Layout Shift sahifa elementlarining kutilmaganda joylashuvini o'zgartirishini o'lchaydi va bu eng oson bartaraf etiladigan metrika hisoblansa-da, ko'pchilik dasturchilar bunga e'tibor bermaydi. Eng birinchi qoida — har bir rasm va video uchun aniq width va height atributlari ko'rsatilishi, yoki CSS da aspect-ratio xususiyati orqali joy oldindan rezerv qilinishi shart. Reklama bloklari uchun ham bo'sh konteyner oldindan kerakli o'lchamda ajratilishi, dinamik kontent uchun esa skeleton loader lar haqiqiy kontentning hajmiga mos bo'lishi kerak.
Shrift almashinuvi paytida sodir bo'ladigan layout shift uchun size-adjust, ascent-override va descent-override CSS xususiyatlari fallback shriftni asosiy shriftga matematik tarzda moslashtirib, almashinuv paytida hech qanday siljish bo'lmasligini ta'minlaydi. content-visibility: auto xususiyati esa ekrandan tashqaridagi bloklarni rendering dan chetlatib, sahifa yuklanishini sezilarli darajada tezlashtiradi, bu ayniqsa uzun blog postlari va katalog sahifalarida ko'rinarli samara beradi.