Core Web Vitals 2020 йилда киритилганидан бери қидирув тизими рейтинги ва фойдаланувчи тажрибасини баҳолашнинг асосий мезонига айланди, 2026 йилга келиб эса бу кўрсаткичлар янада қаттиқлашди ва INP метрикаси FID ўрнини бутунлай эгаллади. Бизнинг хостинг платформамизда жойлашган сайтларнинг катта қисми дастлаб LCP 3 сониядан ошиқ, INP эса 300 миллисекунддан юқори кўрсаткичлар билан келганини кўрганмиз, аммо тўғри ёндашув билан ҳар қандай лойиҳани яшил зонага олиб чиқиш мумкинлиги тажрибадан ўтди. Яқинда бир мижозимизнинг Тошкентдаги электрон тижорат сайти LCP 4.2 сониядан 1.4 сонияга, INP эса 480мс дан 95мс гача туширилиб, органик трафиги уч ой ичида 67 фоизга ошди ва бу натижа тасодифий эмас, балки тизимли ишнинг самараси эди.
LCP ни 2.5 сониядан паст тушириш
Largest Contentful Paint саҳифанинг энг катта визуал элементи экранда пайдо бўлгунча кетган вақтни ўлчайди ва кўп ҳолларда бу hero расм ёки катта сарлавҳа бўлади. Энг катта хатолардан бири шундаки, дастурчилар бу элементни оддий lazy loading билан юклаб қўйишади, ҳолбуки LCP элементи учун аксинча eager юклаш ва fetchpriority="high" атрибути қўлланиши керак. Замонавий браузерларда <img fetchpriority="high" loading="eager" src="hero.avif"> комбинацияси юкланиш вақтини 30-40 фоизга қисқартиради, чунки браузер бу ресурсни бошқа ҳамма нарсадан олдин сўрайди ва парсер ҳатто HTML нинг қолган қисмини ўқиб бўлмасдан туриб network сўровини бошлайди.
Расм форматлари масаласида JPEG ва PNG ўтмишда қолди, 2026 йилда AVIF ва WebP комбинацияси стандарт бўлиб, AVIF JPEG га нисбатан 50 фоизгача кичикроқ файл ҳажми беради ва шу билан бирга сифатни сақлайди. <picture> элементи орқали бир нечта формат ва ўлчамларни тақдим этиш, сервер томонда эса Nginx ёки CDN даражасида Accept header асосида автоматик конвертация қилиш энг самарали ёндашув ҳисобланади. Шрифтлар учун font-display: swap қоидаси ва критик шрифтларни preload қилиш FOIT муаммосини бартараф этади, қолаверса ўзининг серверига ёки яқин CDN га жойлаб қўйиш Google Fonts дан тўғридан-тўғри юклашга қараганда анча тез ишлайди.
INP ни 200мс остига олиб тушиш
Interaction to Next Paint фойдаланувчи тугмани босгандан кейин экранда жавоб кўрингунча кетган вақтни ўлчайди ва бу метрика асосан JavaScript нинг long task лари билан бузилиб туради. 50 миллисекунддан ортиқ давом этадиган ҳар қандай вазифа long task ҳисобланади ва асосий thread ни блоклайди, шунинг учун катта ҳисоблашларни 5мс ли бўлакларга ажратиб, улар орасида браузерга нафас олишга рухсат бериш керак. 2026 йилда Chrome ва Edge да тўлиқ қўллаб-қувватланадиган scheduler.yield() API бу жараённи ниҳоятда осонлаштирди, чунки энди сиклнинг ўртасида await scheduler.yield() чақириғи билан браузерга UI ни янгилашга имкон бериб, кейин ишни давом эттириш мумкин.
Оғир ҳисоблашлар учун Web Worker дан фойдаланиш ҳали ҳам энг тўғри ечим, айниқса катта JSON parsing, криптография ёки маълумотларни филтрлашда. Form input лар ва қидирув майдонлари учун debounce ва throttle техникалари мажбурий, акс ҳолда ҳар бир тугма босилишида сервер сўрови юборилиб, INP ёмонлашади ва серверга ҳам кераксиз юк тушади. Ҳодисаларни бошқаришда passive event listener лардан фойдаланиш, айниқса scroll ва touch ҳодисаларида, scroll jank ни бутунлай йўқотади, чунки браузер event handler тугашини кутмасдан scroll ни бошлай олади.
CLS ни 0.1 дан паст сақлаш
Cumulative Layout Shift саҳифа элементларининг кутилмаганда жойлашувини ўзгартиришини ўлчайди ва бу энг осон бартараф этиладиган метрика ҳисоблансада, кўпчилик дастурчилар бунга эътибор бермайди. Энг биринчи қоида — ҳар бир расм ва видео учун аниқ width ва height атрибутлари кўрсатилиши, ёки CSS да aspect-ratio хусусияти орқали жой олдиндан резерв қилиниши шарт. Реклама блоклари учун ҳам бўш контейнер олдиндан керакли ўлчамда ажратилиши, динамик контент учун эса skeleton loader лар ҳақиқий контентнинг ҳажмига мос бўлиши керак.
Шрифт алмашинуви пайтида содир бўладиган layout shift учун size-adjust, ascent-override ва descent-override CSS хусусиятлари fallback шрифтни асосий шрифтга математик тарзда мослаштириб, алмашинув пайтида ҳеч қандай силжиш бўлмаслигини таъминлайди. content-visibility: auto хусусияти эса экрандан ташқаридаги блокларни rendering дан четлатиб, саҳифа юкланишини сезиларли даражада тезлаштиради, бу айниқса узун блог постлари ва каталог саҳифаларида кўринарли самара беради.