كسل التحميل وتسارع UX

1) الأهداف والمبادئ

• تقليل TTI/LCP على حساب المسار الحرج.
• تثبيت التخطيط (منخفض CLS) بأبعاد يمكن التنبؤ بها.
• وفر البطارية وحركة المرور على الهاتف المحمول.
• رفع التحويل - يرى المستخدم الإجراء مبكرًا.

المبادئ: الأولوية → التقدم → التنبؤ. أولاً، المحتوى النقدي، ثم المحتوى التدريجي وتحسينات ما بعد التحميل.

2) مسار العرض الحرج

HTML الحرجة: امنح علامة «فوق الطية» على الفور.
CSS الحرجة: inline ≤ 10-15 KB; والباقي هو "media =" print "+ shap/reload.
JS as blocker: «تأجيل »/« async»، تقسيم القطع، تحميل المنطق على طول الطرق.
الخطوط: «عرض الخط: تبديل» اختياري «، تحميل مسبق WOFF2، احتياطي النظام» و.

3) تحديد أولويات موارد الشبكة

الاتصال المسبق بـ CDN/fonts/images (TCP + TLS مقدمًا).
مقدمة DNS للمجالات الثالثة.
قم بتحميل الصور/الخطوط/النصوص الحرجة مسبقًا.
تلميحات الأولوية ("أهمية =" عالية "منخفضة"، "جنين =" عالية "لصورة البطل).
HTTP/3/QUIC: كمون أقل ؛ CDN-edge أقرب إلى المستخدم.
سياسات التخزين المؤقت: 'غير قابلة للتغيير' بالنسبة للأصول المحفوظة ؛ صحيح ETag/آخر تعديل.

4) دول العرض والتنزيل التدريجي

الهياكل العظمية/المتلألئة بدلاً من المغازل: التقدم البصري دون «القفز».
عناصر ثابتة الحجم (بطاقات، صور مصغرة) - صفر CLS.
البث/Chunked HTML: امنح الإطار بسرعة، ثم أضف المحتوى.
واجهة مستخدم متفائلة (تحذير): إجراء فوري يتبعه التحقق من الصحة.

5) محتوى وسائط التحميل الكسول

الصور: "تحميل =" كسول "،" فك تشفير = "async" "، تنسيقات AVIF/WebP (JPEG/PNG احتياطي).
سريع الاستجابة: "srcset'/" أحجام" تحت بيانات/عروض مختلفة ؛ لا تحميل 3 × حيث 1 × يكفي.
الارتفاع المتوقع: «العرض/الارتفاع» أو «نسبة الارتفاع إلى الارتفاع».
فيديو: "التحميل المسبق =" البيانات الوصفية "، ملصقات ما بعد التحميل، توقف تلقائي خارج موقع العرض.
الرموز: sprite/inline SVG ؛ تجنب طلبات HTTP غير الضرورية.

6) المكونات والطرق الكسولة

تقسيم الرموز: الاستيراد الديناميكي حسب الطرق/الأدوات.
مكونات الجزيرة/الترطيب الجزئي: تحريك المناطق التفاعلية فقط.
SSR/SSG + ISR: قم بعرض HTML على الخادم، قم بتحديثه بشكل تدريجي.
Supense/Defer (in the framework used): decomposition of data and UI.

7) قوائم وجداول ضخمة

Windwing-Render فقط المنطقة المرئية + العازلة.
إعادة تحميل المرساة: حافظ على وضعية عند إعادة تحميل الحزم.
تحديثات الدفعة: تقليل إعادة الرسم عند التمرير.
ارتفاع الصف الثابت أو «الحجم الجوهري الثابت» للأحجام التي يمكن التنبؤ بها.

8) مسرعات CSS والمتصفح

«رؤية المحتوى: تلقائية»: المتصفح يتخطى غير المرئي (الحد الأدنى من الحساب).
«contain »/« will-change»: الحد من تأثير الأنماط/التصميم.
الرسوم المتحركة: التحويل/التعتيم فقط ؛ تجنب تأثيرات التخطيط/الطلاء الثقيلة.
الظل والضبابية - باعتدال، خاصة في القوائم.

9) إدارة الحدث وحمولة JS

التمرير السلبي/مستمعي التاشا ('{سلبي: صحيح}').
Debounce/دواسة الوقود لتغيير الحجم/التمرير/المعالجات.
تأجيل بدء تشغيل الأدوات خارج منفذ العرض (IntersectionObserver).
ترحيل الحوسبة الثقيلة إلى عمال الويب.

10) سياق الهاتف المحمول

الشبكة: بطيء 3G/high RTT - التنزيل الكسول أكثر عدوانية.
البطارية والحرارة: الحد من تواتر أجهزة التوقيت، وتقليل FPS للرسوم المتحركة في الخلفية.
الضغط: Brotli للنص، صحيح «Accept-Encoding».
Prefetch over Wi-Fi only for consible transforms (history of clicks).

11) التوافر و SEO

الهيكل العظمي ≠ المحتوى: لا يتداخل مع قراء الشاشة ؛ الترتيب المنطقي للتركيز.
خادم HTML للنص الرئيسي - لا تخفي كل شيء خلف JS.
تظل النصوص البديلة والرؤوس متاحة حتى إعادة التحميل.
يجب ألا يحظر المحتوى الكسول المسارات من لوحة المفاتيح.

12) المقاييس والأهداف

LCP (hero-image/header): ≤ 2. 5 s (mobile).
INP (استجابة الإدخال): ≤ 200 مللي ثانية.
CLS: ≤ 0,1.
TTFB: ≤ 500 مللي ثانية ؛ TTI: ≤ 3s.
Bytes over the wire (العرض الأول): ميزانية صارمة (على سبيل المثال، ≤ 200-300 KB Crete. الموارد).
تمرير jank: <1٪ إطارات> 16. 7 مللي ثانية.

• «lazy _ enqueed »/« lazy _ loaded» (معرف، نوع، حجم، زمن انتقال)،
• «component _ hydrated» (الوقت، الوزن JS)،
• «virtuiled _ window _ resize»،
• «lcp _ مرشح _ موضح»، «الهيكل العظمي _ الوقت _ المرئي»،
• الأخطاء ('img _ خطأ'، 'decode _ timeout').

13) أنماط المناطق النموذجية

المنزل/الدليل: بطاقات هيكل SSR +، صور كسولة، مرشحات تقدمية.
المنتج/بطاقة اللعبة: التحميل المسبق لصورة البطل + الأولوية العالية ؛ معرض - كسول ؛ المراجعات - بالنقر.
مقالات طويلة/ويكي: TOC، تقدم القراءة، كسول لكتل الوسائط/الرموز، جداول المحتويات المتأخرة.
الأشرطة الحية: افتراضية الخط، وقفة التمرير التلقائي، والحد المؤقت.

14) أنتيباترن

دوار ملء الشاشة> 1-2 ث بدون تقدم.
كسول بدون أصحاب محليين → قفزات تخطيط (CLS ↑).
تنزيل «كل JS في وقت واحد» لسيناريوهات نادرة.
الخطوط الثقيلة/الصور الداخلية في الجزء الحرج.
لا يمكن التنبؤ بأحجام البطاقات → محتوى التجوال.
تحميل حرج كسول (شعار، نص بطل) - يكسر LCP.
لا يوجد موقف يعود بعد «العودة».

15) قائمة التنفيذ المرجعية (خطوة بخطوة)

Sprint 1 - Diagnostics: Measure LCP/INP/CLS/TTFB; موارد الخرائط والمسار الحرج.
Sprint 2 - النقد/الأولوية: CSS/HTML الحرجة، "preconce "/" preload'، تقليل قطع JS.
Sprint 3 - Media: AVIF/WebP، «srcset/sizes»، أبعاد ثابتة، كسول لغير الأبطال.
Sprint 4 - القوائم: الافتراضية، إعادة تحميل المرساة، الهياكل العظمية/المتلألئة.
Sprint 5 - الهندسة المعمارية: الترطيب الجزئي/الجزر، SSR/SSG/ISR، البث.
Sprint 6 - ضبط دقيق: «رؤية المحتوى»، تلميحات الأولوية، الديون، عمال الويب.
Sprint 7 - A/B والقياس عن بعد: قارن خيارات الهيكل العظمي والمستويات الكسولة والميزانيات.
Sprint 8 - نظافة الإصدار: إصدارات الأصول، وحصر النقود، واستراتيجيات التراجع.

16) مسرد (موجز)

التحميل الكسول - التحميل المتأخر للمحتوى غير المرئي.
LCP/INP/CLS/TTFB/TTI/TBT هي المقاييس الرئيسية لمعدل UX.
تقسيم الكود/الترطيب/الجزر - تقنيات سحق واجهة المستخدم وتنشيطها.
الافتراضية - تقديم مربع قائمة مرئي.
تلميحات ذات أولوية/Preconnect/Preload - تعليمات للمتصفح حول ما يجب تحميله مبكرًا.
رؤية المحتوى - تخطي الحسابات للمحتوى غير المرئي.

17) خلاصة القول

التحميل الكسول ليس «ضع» التحميل = «كسول» ويتم. "هذا هو النظام: المسار النقدي، وتنسيقات الوسائط الصحيحة، وتفاعل الجزيرة، والافتراضية، والقياس عن بعد. اجعل اللحظة المهمة، الثانوية دقيقة ورخيصة، والتخطيط متوقع. ثم سيشعر المنتج بالسرعة على أي جهاز وعلى أي شبكة.