رام کردنِ WebGL: یک هیروِ Three.js که LCP را خراب نمیکند
میدانِ ذرات زیباست و راهی عالی برای نابودیِ Core Web Vitals. دستورِ دقیقِ پشتِ هیروِ همین سایت.
چرا قهرمان زیبا درد می کند
یک صحنه تمام صفحه Three.js از سه جهت به طور همزمان سنگین است: تجزیه اسکریپت، ایجاد زمینه WebGL، و یک حلقه رندر که هرگز متوقف نمی شود. آن را مشتاقانه سوار کنید و در بدترین لحظه ممکن با بزرگترین رنگ محتوای شما برای نخ اصلی رقابت می کند.
Lazy-init بعد از اولین رنگ
- ابتدا قهرمان متن را با CSS ساده رندر کنید تا LCP روی محتوای واقعی فعال شود.
- بافت WebGL را بعد از
requestIdleCallback(یا یک بازه زمانی کوتاه مدت)، پس از اولین رنگ، بچرخانید. - بوم را محو کنید - صفحه در هنگام بوت شدن هرگز شکسته به نظر نمی رسد.
نسبت پیکسل را درپوش بگذارید
صفحه نمایش رتینا با خوشحالی یک فریم بافر 3× را درخواست می کند. devicePixelRatio را به ~ 2 بست و سایهزن قطعه کسری از کار را انجام میدهد که تقریباً هیچکس نمیتواند آن را ببیند.
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));وقتی کسی به شما نگاه نمی کند، رندر را متوقف کنید
یک IntersectionObserver حلقه انیمیشن را هنگامی که قهرمان خارج از صفحه اسکرول میشود، متوقف میکند و یک شنونده visibilitychange وقتی برگه در پسزمینه قرار میگیرد، آن را میکشد. GPU بیکار، فن های جالب، باتری شاد.
این کل دستور العمل پشت قهرمان در همین سایت است - زیبا در بدو ورود، نامرئی در ردپای اجرا.