بارگیری تنبل و شتاب UX

1) اهداف و اصول

• کاهش TTI/LCP در هزینه مسیر بحرانی.
• تثبیت طرح (CLS کم) با ابعاد قابل پیش بینی.
• صرفه جویی در باتری و ترافیک به تلفن همراه.
• Raise Conversion - کاربر عمل را زودتر می بیند.

اصول: اولویت → پیشرفت → قابل پیش بینی بودن اول، محتوای انتقادی، سپس محتوای مترقی و بهبود پس از بار.

2) مسیر رندر بحرانی

HTML بحرانی: بلافاصله نشانه گذاری «above-the-fold» را انجام دهید.
CSS انتقادی: درون خطی ≤ 10-15 کیلوبایت ؛ بقیه 'media = «print»' + swap/reload است.
JS به عنوان مسدود کننده: 'defer '/' async'، پارتیشن بندی تکه، منطق بار در امتداد مسیرها.
فونت ها: 'font-display: مبادله' اختیاری '، WOFF2 پیش بارگذاری، سیستم برگشت' و.

3) اولویت بندی منابع شبکه

Preconnect به CDN/فونت/تصاویر (TCP + TLS در پیش).

DNS prefetch برای دامنه های سوم

پیش بارگذاری تصاویر/قلمها/دستنوشتههای بحرانی.
نکات اولویت ("اهمیت =" بالا "پایین"، "fetchpriority =" بالا "برای تصویر قهرمان).
HTTP/3/QUIC: تاخیر کمتر ؛ CDN به کاربر نزدیکتر است.

سیاست های حافظه پنهان: «غیر قابل تغییر» برای دارایی های نسخه ؛ ETag صحیح/آخرین اصلاح شده

4) پیشرفته رندر و دانلود ایالات

اسکلت/شیمرها به جای اسپینر: پیشرفت بصری بدون «پریدن»

متغیرهایی با اندازه ثابت (کارت ها، ریز عکسها) - صفر CLS.
Streaming/Chunked HTML: به سرعت فریم را از بین ببرید، سپس محتوا را اضافه کنید.
رابط کاربری خوش بینانه (احتیاط): اقدام فوری به دنبال اعتبار.

5) محتوای رسانه ای بارگیری تنبل

تصاویر: «بارگیری =» تنبل «،» رمزگشایی = «async»، فرمت های AVIF/WebP (JPEG/PNG fallback).
پاسخگو: «srcset »/« اندازه» تحت DPR/عرض های مختلف ؛ 3 × را بارگیری نکنید که 1 × کافی باشد.
ارتفاع قابل پیش بینی: «عرض/ارتفاع» یا «نسبت ابعاد» CSS.
ویدئو: 'preload =' metadata '، پوسترهای پس از بارگذاری، مکث خودکار در خارج از نمای دید.
آیکون ها: SVG sprite/inline ؛ از درخواست های HTTP غیر ضروری اجتناب کنید.

6) قطعات و مسیرهای تنبل

تقسیم کد: واردات پویا توسط مسیرها/ویدجت ها.
اجزای جزیره/هیدراتاسیون جزئی: فقط مناطق تعاملی را تحریک کنید.
SSR/SSG + ISR: HTML را روی سرور رندر کنید، به صورت تدریجی تازه کنید.
Suspense/Defer (در چارچوب مورد استفاده): تجزیه داده ها و UI.

7) لیست ها و جداول بزرگ

windowing-رندر تنها منطقه قابل مشاهده + بافر.
بارگذاری مجدد لنگر: هنگام بارگیری مجدد بسته ها موقعیت را حفظ کنید.
به روز رسانی دسته ای: هنگام پیمایش، ترسیم مجدد را به حداقل برسانید.
ارتفاع ردیف ثابت یا «contain-intrinsic-size» برای اندازه های قابل پیش بینی.

8) CSS و شتاب دهنده مرورگر

'content-visibility: auto': مرورگر نامرئی (حداقل محاسبات) را حذف می کند.
'contain '/' will-change': محدود کردن تأثیر سبک ها/طرح.
انیمیشن ها: فقط تبدیل/کدورت ؛ اجتناب از طرح/اثرات رنگ سنگین.
سایه و تار - کم، به خصوص در لیست.

9) مدیریت بار رویداد و JS

شنوندگان پیمایش منفعل/تاچا ('{منفعل: درست}').
debounce/دریچه گاز به تغییر اندازه/اسکرول/گرداننده.
مقدار دهی اولیه معوق ویدجت نمای خارج (تقاطع ناظر).

انتقال محاسبات سنگین به Web Workers

10) زمینه تلفن همراه

شبکه: آهسته 3G/high RTT - دانلود تنبل تهاجمی تر است.
باتری و گرما: محدود کردن فرکانس تایمر، کاهش FPS انیمیشن های پس زمینه.
فشرده سازی: Brotli برای متن، درست «پذیرش رمزگذاری».
پیش فرض بیش از Wi-Fi فقط برای انتقال احتمالی (تاریخ کلیک).

11) در دسترس بودن و SEO

محتوای ≠ اسکلت: با خوانندگان صفحه نمایش دخالت نمی کند ؛ نظم منطقی تمرکز

HTML سرور متن کلیدی - همه چیز را در پشت JS پنهان نکنید.
متن های Alt و هدر ها تا زمان بارگیری مجدد در دسترس هستند.
محتوای تنبل نباید مسیرها را از صفحه کلید مسدود کند.

12) معیارها و اهداف

LCP (قهرمان تصویر/هدر): ≤ 2. 5 ثانیه (موبایل)

INP (پاسخ ورودی): ≤ 200 میلی ثانیه.

CLS: ≤ 0,1

TTFB: ≤ 500 میلی ثانیه ؛ TTI: ≤ 3 ها.

بایت بیش از سیم (نمایش اول): بودجه سخت (به عنوان مثال، ≤ 200-300 کیلوبایت کرت. منابع)

Scroll-jank: <1% فریم> 16. 7 خانم

• 'lazy _ enqueued '/' lazy _ loaded' (شناسه، نوع، اندازه، تأخیر)،
• 'component _ hydrated' (زمان، وزن JS)،
• 'تغییر اندازه پنجره _ تغییر اندازه'،
• 'lcp _ candidate _ shown', 'skeleton _ time _ visible',
• errors ('img _ error', 'decode _ timeout').

13) الگوهای مناطق معمولی

خانه/دایرکتوری: SSR + کارت اسکلت، تصاویر تنبل، فیلترهای مترقی.
کارت محصول/بازی: پیش بارگذاری تصویر قهرمان + اولویت بالا ؛ گالری - تنبل ؛ بررسی ها - با کلیک.
مقالات طولانی/ویکی: TOC، پیشرفت خواندن، تنبل برای بلوک های رسانه ای/کد، جداول تاخیر مطالب.
نوارهای زنده: مجازی سازی خط، مکث خودکار اسکرول، حد بافر.

14) ضد گلوله

اسپینر تمام صفحه> 1-2 ثانیه بدون پیشرفت.
تنبل بدون دارندگان محلی → جهش طرح (CLS ↑).
دانلود «همه JS در یک بار» برای حالات نادر.
درون خطی فونت های سنگین/تصاویر را به بخش بحرانی.
اندازه کارت های غیر قابل پیش بینی → محتوای رومینگ.
بارگذاری انتقادی تنبل (آرم، متن قهرمان) - LCP را می شکند.
هیچ موقعیتی پس از «بازگشت» وجود ندارد.

15) چک لیست پیاده سازی (گام به گام)

Sprint 1 - تشخیص: اندازه گیری LCP/INP/CLS/TTFB ؛ نقشه منابع و مسیر بحرانی.
Sprint 2 - انتقاد/اولویت: بحرانی CSS/HTML، «preconnect »/« preload»، کاهش تکه های JS.
Sprint 3 - رسانه ها: AVIF/WebP، «srcset/اندازه»، ابعاد ثابت، تنبل برای غیر قهرمان.
Sprint 4 - لیست ها: مجازی سازی، بارگذاری مجدد لنگر، اسکلت/روشن و خاموش شدن.
Sprint 5 - معماری: هیدراتاسیون جزئی/جزایر، SSR/SSG/ISR، جریان.
Sprint 6 - تنظیم دقیق: «محتوا قابل مشاهده»، نکات اولویت، debounce، کارکنان وب.
Sprint 7 - A/B و تله متری: مقایسه گزینه های اسکلت، سطح تنبل، بودجه.
Sprint 8 - بهداشت انتشار: نسخه های دارایی، بازپرداخت نقدی، استراتژی های بازپرداخت.

16) واژه نامه (کوتاه)

بارگذاری تنبل - بارگذاری تاخیری محتوای نامرئی.
LCP/INP/CLS/TTFB/TTI/TBT معیارهای اصلی نرخ UX هستند.
Code-splitting/Hydration/Islands - تکنیک های خرد کردن و احیای UI.
مجازی سازی - رندر یک جعبه لیست قابل مشاهده است.
نکات اولویت/Preconnect/Preload - دستورالعمل هایی برای مرورگر در مورد آنچه که قبلا بارگیری شده است.
محتوا دید - پرش محاسبات برای محتوای نامرئی.

17) خط پایین

بارگذاری تنبل «بارگذاری» = «تنبل» نیست و انجام می شود. "این سیستم است: مسیر بحرانی، فرمت های رسانه ای مناسب، تعامل جزیره، مجازی سازی و تله متری. لحظه مهم، ثانویه ظریف و ارزان، و طرح قابل پیش بینی است. سپس محصول در هر دستگاه و در هر شبکه ای سریع احساس می شود.