انیمیشنی که سرعت سایت را نمی‌خورد

یک باور رایج هست که می‌گوید انیمیشن و سرعت با هم جمع نمی‌شوند، پس اگر لایت‌هاوس بالای ۹۰ می‌خواهید، باید سایت را ساده و بی‌جان کنید.

این درست نیست. چیزی که هزینه دارد، نوع انیمیشن است، نه بودنش.

دو دسته

مرورگر برای هر فریم ممکن است تا سه کار انجام دهد: دوباره چیدن (layout)، دوباره کشیدن (paint)، و ترکیب لایه‌ها (composite). انیمیشن ارزان آن است که فقط به مرحلهٔ آخر نیاز داشته باشد.

• ارزان: transform و opacity — روی کارت گرافیک اجرا می‌شود و صفحه را دوباره نمی‌چیند
• گران: width، height، top، left، margin — هر فریم کل صفحه را دوباره می‌چیند

یک منوی کشویی که با height باز می‌شود، در هر فریم چیدمان همهٔ چیزهای زیرش را از نو حساب می‌کند. همان منو با transform: scaleY() تقریباً رایگان است.

اشتباهی که خودمان کردیم

روی همین سایت، همهٔ محتوای بالای صفحه با opacity: 0 شروع می‌شد و بعد محو-ظاهر می‌شد. انیمیشن کاملاً «ارزان» بود — فقط opacity و transform.

نتیجه: امتیاز پرفورمنس صفر.

دلیلش این بود که کروم محتوای کاملاً شفاف را «محتوا» حساب نمی‌کند. معیار First Contentful Paint هیچ‌وقت ثبت نشد، چون از نگاه مرورگر تا لحظه‌ای که انیمیشن تمام شود، صفحه خالی بود.

راه‌حل یک عدد بود: انیمیشن به‌جای opacity: 0 از opacity: 0.35 شروع شود. چشم تفاوتی نمی‌بیند، اما مرورگر از فریم اول محتوا را می‌بیند.

قاعده‌ای که استفاده می‌کنیم

• بالای صفحه هیچ‌وقت از شفافیت صفر شروع نمی‌شود
• هر چیزی که با اسکرول ظاهر می‌شود، فقط transform و opacity
• هر انیمیشنی باید با prefers-reduced-motion خاموش شود

سایتی که برای شما می‌سازیم با همهٔ افکت‌ها روی موبایل بالای ۹۰ می‌گیرد. نه با خاموش‌کردنشان، بلکه با انتخاب درست آن‌ها. نمونه‌کارها را ببینید.