بهینه سازی عملکرد UI

1) چه چیزی به عنوان «سریع» شمارش می شود

TTFB (زمان اولین بایت) - پاسخ سریع سرور/CDN.
LCP (بزرگترین رنگ محتوا) - محتوای «اصلی» به سرعت ظاهر شد.
INP (تعامل با رنگ بعدی) - پاسخ در طول تعامل.
CLS (Cumulative Layout Shift) - عدم وجود رابط کاربری.
TTI (زمان به تعاملی) - زمانی که همه چیز در حال حاضر پاسخ.
مرجع توصیه شده: LCP ≤ 2. 5S، INP ≤ 200ms، CLS ≤ 0. 1 (برای صدک 75 کاربران واقعی).

2) فرآیند: اندازه گیری → پیدا کردن تنگناها → ثابت بودجه

1. اندازه گیری: RUM (کاربران واقعی، صدک های کشور/شبکه/دستگاه) + مصنوعی (فانوس دریایی/مرورگرها).
2. یافتن: پروفایل عملکرد (وظایف طولانی> 50ms، thrashing طرح، ارائه اضافی).
3. ثابت: بودجه (وزن JS/CSS/فونت، LCP/INP) و «خطوط قرمز» در CI.

3) بارگیری شبکه و منابع

3. 1 HTTP و اولویت ها

فعال کردن HTTP/2/3، فشرده سازی Brotli.

به حوزههای بحرانی مربوط میشود dns-prefetch 'to دامنه های ثانویه

'preload' برای منابع بحرانی (تصویر قهرمان، فونت اصلی).
'fetchpriority =' بالا/پایین 'و' priority 'نکات که در آن پشتیبانی.

3. 2 ذخیره سازی

Static with file hash: 'Cache-Control: public, max-age = 31536000, immutable'.
HTML - TTL کوتاه + stale-while-revalidate از طریق CDN.
ETag/Last-Modified و Service Worker برای بازدیدهای آفلاین/تکراری.

4) کد: کمتر، بعد، «تملق»

4. 1 مجمع

تکان دادن درخت، کوچک کردن (в т. ч. مرده کد-elim).
تقسیم کد توسط مسیرها/ویدجت ها، واردات پویا.
اجتناب از «جهانی» بسته های سنگین در بسته نرم افزاری اساسی (لحظه → بین المللی/روز. ج).

4. 2 رندر و تحویل HTML

SSR/ISR/جریان: ابتدا چارچوب و محتوای اصلی را ارائه دهید.
هیدراتاسیون جزئی/جزایر: هیدراته تنها مناطق تعاملی.
تمام موارد غیر بحرانی را به تعویق بیندازید: <script type = "module" defer> ".

4. 3 ویژگی واکنش (اگر React استفاده شود)

واکنش نشان دهید. تنبل "+" تعلیق "برای ویدجت تنبل.
'startTransition' و 'useDeferredValue' برای فیلترهای سنگین/جستجوها.
RSC (Server Components) - محاسبات سرور، کمتر از JS در مشتری.
انتخابگرها در (zustand/redux): جزء را به قطعات، نه کل پشته، امضا کنید.

5) رندر و حالت: جایی که «کند می شود»

5. 1 جداسازی رندرها

خرد کردن اجزای بزرگ، memoize («یادداشت»، «استفاده از یادداشت»، «استفاده از مخاطبین»).
کلیدهای لیست پایدار هستند توابع/اشیاء جدید را در پروکسی های غیر ضروری ایجاد نکنید.
اجتناب از زمینه «جهانی» برای داده های اغلب در حال تغییر - استفاده از انتخابگرها و یا اتوبوس رویداد.

5. 2 مجازی سازی و لیست های بزرگ

Sheets/tables → مجازی سازی (پنجره رندر).
صفحه بندی/پیمایش بی نهایت با فشار پشتی (خطوط 100k را در یک بار بارگیری نکنید).
مقدار دهی اولیه تاخیر از ویدجت های سنگین در خارج از viewport.

5. 3 طرح و رنگ

محتوای دید: خودکار ؛ برای پارتیشن های پنهان (مرورگر نامرئی را ارائه نمی دهد).
حاوی و «اندازه ذاتی» برای اندازه های قابل پیش بینی است.

اجتناب از طرح مکرر خواندن ورودی (طرح thrashing) ؛ اندازه گیری های گروهی

تغییر خواهد کرد استفاده دوز (در غیر این صورت حافظه اضافی/لایه ها).

6) تصاویر و گرافیک

فرمت ها: AVIF/WebP (برگشت در PNG/JPEG).
رویکرد پاسخگو: «srcset» + «اندازه»، مبتنی بر تراکم برای شبکیه چشم.
' loading =» lazy»' برای تصاویر غیر قهرمان ؛ اولویت/پیش بارگذاری - فقط برای کاندیدای LCP.
متغیرهایی با اندازه ثابت → بدون پرش CLS.
بوم/نمودار: بوم خارج از صفحه و وب کارگر برای محاسبات ؛ با سر و صدا راه میرفت.

7) فونت و متن

یک یا دو فونت متغیر به جای بسیاری از سبک ها.
'font-display: swap '/' اختیاری'، پیش بارگذاری برای سبک پایه.
«size-adjust» برای کاهش «jump» هنگام تغییر فونت.
فونت های جایگزین محلی با معیارهای مشابه.

8) CSS و انیمیشن ها

بحرانی CSS درون خطی (<14-20 کیلوبایت)، بقیه - به تعویق افتاد.
حذف سبک های استفاده نشده (پاکسازی/CSSTree).
انیمیشنها، در صورت امکان، روی تبدیل/کدورت ؛ احترام «ترجیح کاهش حرکت».
اجتناب از آبشارهای عمیق و انفجار انتخابگرها.

9) کارکنان وب، جریان و وظایف سنگین

همه CPU سنگین - در Worker (تجزیه، مرتب سازی، جمع آوری، ML).
جریان API ها («ReadableStream», «واکشی» با جریان) برای پاسخ های طولانی.
تقسیم وظایف به تکه ها از طریق 'requestIdleCallback '/microtasks برای حفظ پاسخگویی.

10) ثبات طرح (CLS)

فضای ذخیره برای عنصر LCP (تصویر/ویجت).
آگهی ها/روبان ها را بدون اندازه های ثابت وارد نکنید.
tultips نامتقارن/toasts - محتوای حرکت نمی کند ؛ استفاده از لایه ها/پورتال ها.

11) نمونه هایی از قطعه

فونت بحرانی و تصویر LCP

html
<link rel="preload" href="/fonts/Inter. var. woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" as="image" href="/hero. avif" imagesrcset="/hero. avif 1x, /hero@2x. avif 2x" fetchpriority="high">

مقدار اولیه ویجت تنبل و امن

js const Widget = React. lazy(() => import('./Widget'));
function Section() {
const inView = useInViewport('#sec');
return <div id="sec">{inView? <React. Suspense fallback={null}><Widget/></React. Suspense>: null}</div>;
}

تثبیت طرح

css
.hero {
content-visibility: auto;
contain: layout paint;
contain-intrinsic-size: 720px 320px ;/LCP reserve/
}

12) کنترل رگرسیون و بودجه

بودجه بسته نرم افزاری: مجموع JS ≤ NkB، CSS ≤ MkB، قطعه اولیه ≤ kB.
حیاتی وب در CI (شبیه سازی شده) + RUM-هشدار (در صدک).
تجزیه و تحلیل بسته نرم افزاری: source-map-explorer/analyzer در روابط عمومی.
معیارهای عملکرد اجزاء (رندر عناصر 10k، زمان واکنش).

13) ضد الگوهای

بارگذاری «همه در یک بار»: نمودارها، ویراستاران، نقشه ها در صفحه اول.
حالت جهانی بزرگ → رندرهای آبشار.
تصاویر 2-4 × از اندازه مورد نظر، بدون «srcset/اندازه».
حلقه های همزمان طولانی در موضوع اصلی.
'outline: none' و ترفندهای سفارشی بدون بهینه سازی - دخالت با شاخص های رندر.
انیمیشن ها توسط «بالا/چپ» (شکستن طرح و تماس با ریفلاکس).

14) چک لیست صفحه نمایش

[LCP ≤ 2] 5 ثانیه در ترافیک 3G/mobile، CLS ≤ 0. 1، INP ≤ 200 میلی ثانیه

• منابع بحرانی: پیش بارگذاری/اولویت ها ؛ بقیه به تعویق/تنبل است
• بسته نرم افزاری: تقسیم کد، بدون وابستگی اضافی
• مجازی سازی لیست/جدول، ویجت سنگین تاخیر در راه اندازی
• تصاویر: AVIF/WebP،' srcset/اندازه'، 'بارگیری =» تنبل»'
• فونت ها: متغیر + 'font-display'، پیش بارگذاری فقط مورد نظر است
• CSS: درون خطی بحرانی، پاکسازی، «محتوا دید» و «شامل» که در آن مناسب
• کارگران/بیکار برای محاسبات سنگین
• بودجه ها و وب سایت ها به داشبورد/هشدار متصل می شوند

15) برنامه پیاده سازی (3 تکرار)

تکرار 1 - برنده سریع (1-2 هفته)

فعال کردن Brotli/HTTP-2/3، CDN. CSS بحرانی و پیش بارگذاری منابع LCP.
انتقال ویجت های سنگین به واردات پویا.
تصاویر → AVIF/WebP + 'srcset'. فونت ها: 'font-display: swap'.

تکرار 2 - بهبود ساختاری (3-4 هفته)

کد تقسیم شده توسط مسیر، تجزیه و تحلیل بسته نرم افزاری، حذف «سنگین» libs.
مجازی سازی لیست، دید محتوا، حاوی ذاتی اندازه.
پیاده سازی SSR/جریان/جزایر (در صورت لزوم).
RUM با وب حیاتی، بودجه در CI.

تکرار 3 - مقیاس و استحکام (مداوم)

کارگران/بوم خارج از صفحه، محاسبات butching، startTransition/deferredValue.
حسابرسی perf به طور منظم، رگرسیون هضم خودکار، آموزش تیم.

16) مینی سوالات متداول

چه چیزی بیشترین سرعت را در موبایل خواهد داشت ؟

کاهش JS اصلی، SSR/جریان و بهینه سازی تصویر LCP.

آیا من همیشه به SSR نیاز دارم ؟

نه، اينطور نيست اگر صفحه به صورت پویا تعاملی و ذخیره سازی ضعیف باشد، هیدراتاسیون جزایر/جزئی ممکن است بهتر باشد.

چرا INP با بسته نرم افزاری «نور» بد است ؟

احتمالا وظایف طولانی (مرتب سازی، گرافیک) در موضوع اصلی - آنها را به کارگر و تقسیم وظایف.

مجموع

رابط کاربری سریع مجموعه ای از رشته ها است: اولویت های شبکه و حافظه پنهان، بسته های کوچکتر و دیر، رندر غیر پرش قابل پیش بینی، تصاویر و فونت های اقتصادی و کنترل ثابت در دنیای واقعی. بودجه ها را وارد کنید، چک ها را خودکار کنید و تیم را به فکر کردن در مورد سرعت در هر مرحله آموزش دهید - به این ترتیب رابط کاربری امروز و در یک سال سریع خواهد بود.