تحسين أداء واجهة المستخدم

1) ما يعتبر «سريعًا»

TTFB (الوقت إلى البايت الأول) - استجابة سريعة للخادم/CDN.
LCP (أكبر طلاء محتوى) - ظهر المحتوى «الرئيسي» بسرعة.
INP (التفاعل مع الطلاء التالي) - الاستجابة أثناء التفاعل.
CLS (تحول تخطيط تراكمي) - عدم وجود نفاخ واجهة.
TTI (حان الوقت للتفاعل) - عندما يستجيب كل شيء بالفعل.
النقاط المرجعية الموصى بها: LCP ≤ 2. 5s، INP ≤ 200 ms، CLS ≤ 0. 1 (بالنسبة المئوية الخامسة والسبعين للمستخدمين الحقيقيين).

2) العملية: قياس → إيجاد الاختناقات → إصلاح الميزانيات

1. القياس: RUM (مستخدمون حقيقيون، مئوية حسب البلد/الشبكة/الجهاز) + مواد تركيبية (منارة/متصفحات).
2. البحث: محدد الأداء (المهام الطويلة> 50 مللي ثانية، سحق التخطيط، عروض إضافية).
3. إصلاح: الميزانيات (وزن JS/CSS/fonts، LCP/INP) و «الخطوط الحمراء» في CI.

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

3. 1 HTTP والأولويات

مكّن HTTP/2/3، ضغط بروتلي.
"إعادة الاتصال" بالمجالات الحرجة ؛ " dns-pretch 'إلى المجالات الثانوية.
«التحميل» للموارد الحرجة (صورة البطل، الخط الرئيسي).
"fetchprighity =" high/low "و" privality "تشير إلى مكان دعمها.

3. 2 التخزين المؤقت

Static with file hash: «Cache-Control: public، max-age = 31536000، غير قابل للتغيير».
HTML - short TTL + stale-while-revalidate عبر CDN.
ETag/آخر عامل معدل وخدمة للزيارات غير المتصلة بالإنترنت/المتكررة.

4) الكود: أقل، فيما بعد، «أكثر تملقًا»

4. 1 جمعية

اهتز الأشجار، مصغر (в т. ч. dead-code-elim).
تقسيم الرموز حسب الطرق/الأدوات، الاستيراد الديناميكي.
تجنب الحزم الثقيلة «العالمية» في الحزمة الأساسية (لحظة → Intl/Day. js).

4. 2 عرض وتسليم HTML

SSR/ISR/البث: أعط الإطار والمحتوى الرئيسي أولاً.
الترطيب الجزئي/الجزري: ترطيب المناطق التفاعلية فقط.
تأجيل جميع غير الحرجة: «<script type =» module «defer>».

4. 3 خصوصية التفاعل (إذا تم استخدام التفاعل)

رد فعل. كسول + «تشويق» للأدوات الكسولة.
«StartTransition» و «UseReferredValue» للفلاتر/عمليات البحث الثقيلة.
RSC (مكونات الخادم) - حسابات الخادم، أقل من JS على العميل.
المحددات في (zustand/redux): قم بتوقيع المكون إلى شظايا، وليس المكدس بأكمله.

5) العرض والذكر: حيث «يتباطأ»

5. 1 عزل المغيرين

سحق المكونات الكبيرة، مذكرات («مذكرة»، «استخدم مذكرة»، «استخدم Callback»).
مفاتيح القائمة مستقرة ؛ لا تنشئ وظائف/أشياء جديدة في الدعائم دون داع.
تجنب السياق «العالمي» لتغيير البيانات بشكل متكرر - استخدم محددات أو حافلات الأحداث.

5. 2 الافتراضية والقوائم الكبيرة

صحائف/جداول → الافتراضية (نافذة العرض).
التثبيت/التمرير اللامتناهي مع الضغط الخلفي (لا تحميل 100 ألف خط في وقت واحد).
تأخر بدء تشغيل الأدوات الثقيلة خارج منفذ المشاهدة.

5. 3 تخطيط وطلاء

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

6) الصور والرسومات

التنسيقات: AVIF/WebP (احتياطي على PNG/JPEG).
نهج سريع الاستجابة: "srcset' +" أحجام "، يعتمد على الكثافة لشبكية العين.
"تحميل =" كسول "للصور غير البطل ؛ الأولوية/التحميل المسبق - لمرشح LCP فقط.
عناصر ثابتة الحجم → عدم وجود قفزات CLS.
قماش/مخططات: قماش خارج الشاشة وعامل ويب للحسابات ؛ إعادة السحب.

7) الخطوط والنص

خط واحد أو اثنين متغير بدلاً من العديد من الأنماط.
«عرض الخط: تبديل »/« اختياري»، تحميل مسبق للأسلوب الأساسي.
«ضبط الحجم» لتقليل «القفزة» عند تغيير الخط.
خطوط احتياطية محلية بمقاييس مماثلة.

8) CSS والرسوم المتحركة

CSS inline (<14-20 كيلو بايت)، راحة - سيتم تأجيلها.
تحذف الأنماط غير المستخدمة (تطهير/CSSTree).
الرسوم المتحركة، إن أمكن، بشأن التحويل/التعتيم ؛ الاحترام «يفضل الحركة المخفضة».
تجنب السلاسل العميقة ومحددات التفجير.

9) عمال الويب، التدفق والمهام الثقيلة

جميع وحدات المعالجة المركزية الثقيلة - في العامل (التحليل، الفرز، التجميع، ML).
بث واجهات برمجة التطبيقات ("ReadableStream'،" جلب "مع التدفقات) للاستجابات الطويلة.
تقسيم المهام إلى أجزاء عبر «طلب IdleCallback »/الأسئلة الدقيقة للحفاظ على الاستجابة.

10) استقرار التخطيط (CLS)

الحيز الاحتياطي لعنصر LCP (الصورة/الودجة).
لا تدرج لافتات/شرائط بدون أحجام ثابتة.
التولتيبات/الخبز المحمص غير المتماثل - لا تنقل المحتوى ؛ استخدام الطبقات/البوابات.

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) مراقبة الانحدار والميزانيات

ميزانية الحزمة: المجموع الكلي للكيلوبايت ≤ والكيلوبايت ≤ والكيلوبايت، والجزء الأولي ≤ والكيلوبايت.
Web-Vitals in CI (محاكاة) + RUM-alerts (on percenteles).
تحليل الحزمة: مستكشف/محلل لخريطة المصدر في العلاقات العامة.
مقاييس أداء المكونات (تقديم عناصر 10k، وقت رد الفعل).

13) الأنماط المضادة

حمل «دفعة واحدة»: رسوم بيانية ومحررين وخرائط في الشاشة الأولى.
دولة عالمية ضخمة → متتالية.
الصور 2-4 × من الحجم المطلوب، بدون «srcset/sizes».
حلقات طويلة متزامنة على الخيط الرئيسي.
«أولين: لا شيء» والحيل المخصصة دون تحسين - تدخل في مؤشرات العرض.
الرسوم المتحركة بواسطة «أعلى/يسار» (كسر التخطيط واستدعاء الارتداد).

14) قائمة مراجعة الشاشة

• LCP ≤ 2. 5 s على حركة المرور 3G/mobile، CLS ≤ 0. 1، INP ≤ 200 م
• الموارد الحيوية: التحميل المسبق/الأولويات ؛ الباقي مؤجل/كسول
• الحزم: تقسيم الرمز، لا تبعيات إضافية
• افتراضية القائمة/الجدول، تأخر بدء تشغيل الودجة الثقيلة
• الصور: AVIF/WebP، «srcset/sizes»، «loading =» lazy «»
• الخطوط: متغير + «عرض الخط»، التحميل المسبق المطلوب فقط
• CSS: الخط الداخلي الحرج، تطهير، «رؤية المحتوى» و «احتوى» عند الاقتضاء
• العمال/العاطلون عن العمل للحوسبة الثقيلة
• الميزانيات و Web-Vitals مرتبطة بلوحات المعلومات/التنبيهات

15) خطة التنفيذ (3 تكرارات)

التكرار 1 - انتصارات سريعة (1-2 أسبوع)

تمكين Brotli/HTTP-2/3، CDN. CSS الحرجة وتحميل موارد LCP مسبقًا.
نقل الأدوات الثقيلة إلى الواردات الديناميكية.
الصور → AVIF/WebP + "srcset'. الخطوط: «عرض الخط: مبادلة».

التكرار 2 - التحسينات الهيكلية (3-4 أسابيع)

تقسيم الرمز حسب المسار، تحليل الحزمة، إزالة الليبس «الثقيل».
افتراضية القائمة، رؤية المحتوى، حجم المحتوى الجوهري.
تنفيذ إصلاح قطاع الأمن/البث المباشر/الجزر (عند الاقتضاء).
RUM مع Web-Vitals، ميزانيات في CI.

التكرار 3 - الحجم والقوة (مستمر)

العمال/قماش خارج الشاشة، حسابات التجزئة، StartTransition/ReferedValue.
التدقيق المنتظم، ملخص السيارات التراجعي، تدريب الفريق.

16) الأسئلة الشائعة المصغرة

ما الذي سيسرع أكثر على الهاتف المحمول ؟

تقليل JS الأصلي و SSR/البث وتحسين صورة LCP.

هل أحتاج دائماً إلى إصلاح قطاع الأمن ؟

لا ، ليس كذلك إذا كانت الصفحة تفاعلية ديناميكية ومخبأة بشكل سيئ، فقد تكون الجزر/الترطيب الجزئي أفضل.

لماذا INP سيء مع حزمة «خفيفة» ؟

ربما تكون المهام الطويلة (الفرز والرسومات) على الخيط الرئيسي - أحضرها إلى Worker وقسم المهام.

المجموع

واجهة المستخدم السريعة هي مجموعة من التخصصات: أولويات الشبكة والمخبأ، حزم أصغر ومتأخرة، عرض غير قفز يمكن التنبؤ به، صور وخطوط اقتصادية، والتحكم المتري المستمر في العالم الحقيقي. أدخل الميزانيات وأتمتة الفحوصات وعلم الفريق التفكير في السرعة في كل خطوة - بهذه الطريقة ستظل الواجهة سريعة اليوم وفي غضون عام.