Nimadan boshlandi
Yuklanish tezligi — sayt yaratishda tejab bo‘lmaydigan band, va biz buni mijozlarga aytamiz. Shuning uchun o‘zimizdan boshladik: Lighthouse ni o‘z saytimizda ishga tushirdik — mijoznikida emas, o‘zimiznikida. Mobil unumdorlik bahosi 76 ni ko‘rsatdi, qolgan ko‘rsatkichlar esa deyarli mukammal: birinchi baytgacha yarim soniya, asosiy oqim blokirovkasi 60 ms, qatlam siljishi 0,001. Va LCP 7,0 soniya.
Bu birikma g‘alati. Odatda yomon LCP yomon TBT bilan birga yuradi: og‘ir JavaScript ikkalasini ham bo‘g‘adi. Bu yerda asosiy oqim bo‘sh edi, birinchi ekranda rasm yo‘q, shriftlar swap bilan yuklanardi. LCP taqsimoti hammasini bir satrda tushuntirdi: birinchi baytgacha 0,55 s, qolgan 6,4 soniya — «element render delay». Element yetkazilgan va chizilmagan edi.
Birinchi faraz — va nega u ishlamadi
Birinchi ekran razmetkasida opacity: 0 bo‘lgan 95 ta element topildi, LCP-elementning o‘zi — sarlavha ostidagi abzats ham shular orasida. Sabab tushunarli: framer-motion server renderida animatsiyaning boshlang‘ich holatini to‘g‘ridan-to‘g‘ri style atributiga yozadi. React yuklanib animatsiyani ishga tushirmaguncha matn jismonan ko‘rinmaydi.
<p class="max-w-xl text-lg leading-relaxed text-ink-dim"
style="opacity:0;transform:translateY(20px)">
Lending sahifadan onlayn-bankgacha — butun tsikl uchun bitta hamkor…
</p>Tushuntirish to‘liq ko‘rinardi, va biz birinchi ekran animatsiyasini CSS ga ko‘chirdik: o‘sha kadrlar, o‘sha egri chiziq, o‘sha davomiylik — lekin u gidratatsiyadan keyin emas, birinchi chizish kadridan boshlanadi. Yig‘dik, o‘lchadik.
Hech nima o‘zgarmadi. LCP lokal bildda qanday 5,0 s bo‘lsa, shunday qoldi. Mana shu tahlilning asosiy joyi: ishonarli tushuntirish va to‘g‘ri tushuntirish — turli narsalar, va ularni faqat o‘lchov ajratadi.
Alomatni tushuntiradigan, lekin tuzatishdan keyin u bilan birga yo‘qolmaydigan faraz — sabab emas, tasodif.
Haqiqiy sabab
Keyin biz LCP-element uslublariga emas, uning ustida nima turganiga qaradik. Razmetkada intro-qoplama topildi — o‘sha, yuguruvchi raqamlari bilan, desktopda kirishda kayfiyat yaratadigani:
<div class="fixed inset-0 z-[1000] flex flex-col justify-between bg-base p-6">
… <!-- 000 · booting · Loading experience -->
</div>Butun ekran bo‘ylab shaffof bo‘lmagan qatlam, hamma narsaning ustida. Telefonda introni ko‘rsatish kerak emas, va kod buni hisobga olgan edi — shartni useCanRender3D() huki tekshirardi: desktop, aniq ko‘rsatkich, yetarli yadro va xotira. Muammo shundaki, bu shart qachon ma’lum bo‘ladi. Huk — bu React, React — bu gidratatsiya. Undan oldin server narigi tomonda kim borligini bilmaydi va qoplamani hammaga chizadi.
Yopiq konstruksiya hosil bo‘lardi: qoplamani olib tashlash uchun JS kerak; u kelmaguncha foydalanuvchi bo‘sh qorong‘i ekranga qaraydi, holbuki butun kontent allaqachon unda. Shu bilan birinchi faraz nega yordam bermagani ham tushuntirildi: abzatsning shaffofligi ahamiyatsiz edi — uni baribir ustidan yopib turishardi.
Tuzatish
Yechim — ko‘rsatish shartini JavaScriptdan CSS ga ko‘chirish. Mediaso‘rov uslublar birinchi marta hisoblanganda, har qanday Reactdan oldin baholanadi, va telefonda qoplama chizilgan qatlam sifatida umuman mavjud bo‘lmaydi.
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
.intro-gate {
display: none !important;
}
}Ikkinchi qism — o‘sha CSS ga ko‘chirilgan birinchi ekran animatsiyasi. O‘zi hech nima bermadi, lekin qoplama olib tashlangandan keyin majburiyga aylandi: yuqori qatlamni olib tashlab, biz keyingi qadamda aynan opacity: 0 ga tiralgan bo‘lardik. Ikkita xato bir-birini niqoblab turgan edi.
- 01
Qoplama mediaso‘rov bilan yashirildi
Intro ko‘rsatilmaydigan qurilmalarda qatlam chizilmay qo‘ydi — JavaScript yuklangan-yuklanmaganidan qat’i nazar.
- 02
Birinchi ekran animatsiyasi CSS ga ko‘chdi
Kadrlar, davomiylik va egri chiziq o‘sha. Farq faqat boshlanish paytida: gidratatsiya oxiri o‘rniga birinchi chizish kadri.
- 03
Hech nima o‘chirilmadi
Desktopda intro qanday ketgan bo‘lsa, shunday ketyapti. Bu muhim: firma animatsiyasi mahsulotning bir qismi, ko‘rsatkich uchun to‘lanadigan narsa emas.
Natija
O‘lchovlar bitta mashinada, bir xil kodda, real trotling bilan (Lighthouse, mobil profil, --throttling-method=devtools), lokal prod-bild ustida qilingan — tarmoq va tarqoqlikni chiqarib tashlash uchun.
Buni o‘zingizda qanday tekshirish mumkin
- Sahifaning manba kodini oching (aynan
view-source, inspektor emas — inspektor JSdan keyingi holatni ko‘rsatadi) va o‘z sarlavhangiz matnini toping. Agar u yerda bo‘lmasa, LCP haqidagi suhbat erta: avval server rendering. - Shu HTMLda birinchi ekran kontenti yonida
opacity:0,visibility:hiddenvatransform: translateni qidiring. Bularning hammasi — ko‘rinmas matn. position: fixedva yuqoriz-indexli, har doim renderlanadigan, lekin JSdagi shart bo‘yicha yashiriladigan elementlarni toping. Qoplamalar, preloaderlar, rozilik bannerlari.- Lighthouse ni
--throttling-method=devtoolsbilan ishga tushiring va LCP taqsimotiga qarang. Kichik TTFB da kattaelement render delay— bu sizning holatingiz. - Biror yirik narsani ko‘rsatish sharti React hukida yashamayotganini tekshiring. Mediaso‘rov bilan hal qilinadigan hamma narsa mediaso‘rov bilan hal qilinishi kerak.
Bundan chiqargan umumiy qoidamiz: kontentni yopadigan hamma narsa JavaScriptsiz yo‘qola olishi kerak. Agar qatlamni faqat skript olib tashlay olsa, uning yuklanish vaqti sizning kontentingiz paydo bo‘lish vaqtiga aylanadi — odamlar xatti-harakati va reyting uchun barcha oqibatlari bilan.
Ko‘p so‘raladigan savollar
Nega introni butunlay olib tashlamadingiz?
Chunki desktopda u ishlaydi: bu mahsulotdan olinadigan taassurotning bir qismi, va biz ko‘rsatkich uchun mahsulot bilan to‘lashni to‘g‘ri deb hisoblamaymiz. Vazifa «animatsiyani olib tashlash» emas, «u ko‘rsatilmaydiganlarga xalaqit bermasligini ta’minlash» edi. Tuzatishdan keyin desktopda hech nima o‘zgarmadi.
Bu Next.js muammosimi yoki framer-motion muammosimi?
Ikkalasi ham emas. Har ikki vosita ham aynan va’da qilgan narsasini qiladi. Xato arxitekturaviy: kontent ko‘rinishiga bog‘liq shart faqat gidratatsiyadan keyin mavjud bo‘lib qoldi. Bu server rendering bo‘lgan har qanday stekda takrorlanadi — React, Vue, Svelte farqi yo‘q.
Bu biznes uchun qanchalik muhim?
LCP — uchta Core Web Vitals dan biri, ular esa Google reyting signallariga kiradi va real foydalanuvchilar, asosan mobil foydalanuvchilar bo‘yicha hisoblanadi. Lekin qidiruvdan ham oldin: olti soniya qorong‘i ekran — bu bironta satrni ham ko‘rmay natijalarga qaytib ketgan odamlar. Pul reytingdan oldinroq yo‘qoladi.
Nega o‘z xatoingiz tahlilini chop etyapsiz?
Ikki sababga ko‘ra. Birinchidan, bu xatoni takrorlash oson, tavsifini esa biz topmadik — demak material foydali. Ikkinchidan, raqamlar bilan o‘z xatosining tahlili besh daqiqada tekshiriladi: saytimizni oching va Lighthouse ni o‘zingiz ishga tushiring. Tekshirib bo‘ladigan keys ishonib qabul qilish kerak bo‘lgan keysdan qimmatroq turadi.
Manbalar
Maqoladagi da’volarni tekshirish mumkin: quyida qayta hikoya emas, birlamchi manbalar.
- 01web.dev — Largest Contentful Paint (LCP) — ko‘rsatkich ta’rifi va uning tarkibiy qismlarga ajratilishi
- 02Chrome for Developers — Lighthouse performance scoring — yakuniy baho qanday hisoblanadi va trotling rejimlari nimasi bilan farq qiladi
Maqolalarni loyihalarda ishlayotgan muhandislar yozadi — lekin ism bilan imzolanmaydi. Sabab saytda mijoz logotiplari yo‘qligi bilan bir xil: deyarli barcha loyihalar NDA yoki white-label ostida boradi, va to‘lov yadrosi haqidagi maqola muallifi mijozni logotipdan kam bo‘lmagan darajada ko‘rsatadi. Ism o‘rniga matn uchun qoidalar bilan javob beramiz — bundan mustasno: o‘z ochiq kodimiz haqidagi maqolalar muallif ismi bilan imzolanadi.
Qanday yozamiz va nimani tekshiramiz