Сайттағы 3D-сахна — әрқашан «уау» мен миллисекундтар арасындағы ымыра. Бірақ бұл ымыраны басқаруға болады: дұрыс сәулетпен WebGL-фон іске қосылғанда бірнеше килобайт және рендерді бөгеуде нөл миллисекунд тұрады.
Жобаларымыздағы сахналардың қалай құрылғанын айтамыз — осы сайтты қоса алғанда.
Канвас тек вьюпорт маңында ғана өмір сүреді
Әр сахна IntersectionObserver қабықшасына оралған: блок экранға жақындағанда канвас монтталады, ал қолданушы әрі кеткенде ажыратылады. Бұл WebGL-контексттерді босатады (браузерде олардың шегі шамамен 16) және жадты бақылауда ұстайды.
Бірден дайын болуға тиіс сахналар қатар монтталады, бірақ вьюпорттан тыс жерде олардың рендер-циклі жай ғана тоқтайды: кадрлар салынбайды, батарея жұмсалмайды.
Кадр бюджеті және деградация
Әр сахнада ұстанатын ережелеріміз:
- DPR-ды 1.5-пен шектейміз — ретинада айырмашылық байқалмайды, ал пиксель екі есе аз.
- Телефондарда бөлшектер санын 2–2.5 есе азайтамыз.
- Постөңдеуді қолданбаймыз: жарқырауды аддитивті блендингпен жинау арзанырақ.
- prefers-reduced-motion — анимацияның орнына бір статикалық кадр.
- 3D интерактивтен кейін бөлек чанкпен жүктеледі — LCP оны күтпейді.
Нәтиже
20 мың бөлшектен тұратын толыққанды сахнасы бар бет PageSpeed-те 90+ ұстайды және телефонды қыздырмайды. WebGL — жылдамдықтың жауы емес, оған басты кейіпкер емес, фондық музыка ретінде қараса болғаны.