ما أهم طرق تحسين أداء الواجهة الأمامية؟

Question

IT Interview Practice · Accepted Answer

**حسّن الجزء البطيء فعليًا من رحلة المستخدم، ثم قِس هل أفاد التغيير.** تصغير الحزمة مفيد عندما يحسن التجربة أو يقلل تكلفة ذات صلة.

افترض أن العملاء على هواتف عادية يفتحون صفحة منتج، فتظهر صورته الرئيسية متأخرة ويتأخر اختيار أحد خياراته. التحميل والتفاعل مشكلتان منفصلتان؛ وقد لا يصلحهما تحسين واحد.

## 1. أثبت العَرَض بقياسات ممثلة

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

- يقيس LCP وقت رسم أكبر عنصر محتوى مرئي، ويساعد على تقييم تجربة التحميل.
- يصف INP الاستجابة لتفاعلات المستخدم خلال زيارة الصفحة.
- يقيس CLS تحركات التخطيط غير المتوقعة، مثل انتقال المحتوى عند ظهور صورة.

تصف [Core Web Vitals](https://web.dev/articles/vitals) جوانب مختلفة للتجربة. اربطها بالمهمة الفعلية، مثل اختيار خيار المنتج وإضافته للسلة بنجاح، حتى لا يخفي تحسين رقم سلوكًا معطلًا.

## 2. اعثر على ما يؤخر المحتوى المهم

افحص request waterfall: الخط الزمني الذي يعرض اكتشاف الموارد وتنزيلها واكتمالها. قد تبدأ الصورة الرئيسية في مثالنا بالتحميل فقط بعد تنزيل JavaScript وانتهاء طلب API.

```text
HTML -> JavaScript -> Product API -> Main image
```

يساعد ضغط الصورة على تنزيلها، لكن اكتشافها مبكرًا قد يزيل انتظارًا سابقًا. فكر في تضمين محتوى المنتج المفيد في HTML الأولي بالعرض على الخادم أو التوليد الثابت حيث يناسب. افحص حداثة البيانات وتكلفة الخادم وJavaScript الذي ما زال لازمًا لجعل المحتوى تفاعليًا.

## 3. قلل النقل والتنفيذ غير الضروريين

بعد فهم المسار الحرج، أزل العمل الذي لا يفيد الشاشة الحالية. فضّل تغييرات مرتبطة بتأخر مقاس على تطبيق كل تحسين بلا تمييز.

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

تقلل الملفات الأصغر النقل، لكن المتصفح ما زال يحتاج تحليل الكود وتنفيذه. افحص أثر الشبكة وCPU قبل إعلان نجاح التغيير.

## 4. أصلح التفاعل البطيء من سببه

إذا تأخر اختيار خيار المنتج، فحلل الخيط الرئيسي الذي ينفذ كثيرًا من البرمجة ورسم الصفحة. قد تمنع عملية حساب طويلة استجابته حتى بعد تحميل كل الملفات.

قسّم العمل الطويل إلى أجزاء أصغر أو انقل الحساب المناسب إلى worker. للمدخلات سريعة التغير، تجنب الطلبات غير اللازمة وامنع استجابة قديمة من استبدال اختيار أحدث. استخدم memoization عندما يثبت القياس تكلفة الحساب المتكرر، وليس كإضافة افتراضية.

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

## 5. تحقق من الرحلة كاملة بعد التغيير

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

ضع ميزانيات عملية للموارد المهمة وراقب التراجعات. لا تكفي نتيجة مختبر جيدة إذا ظل العملاء ينتظرون أو لا ينجزون مهمتهم. **يجب أن تكون النتيجة رحلة أسرع ومستقرة وقابلة للاستخدام، تدعمها قياسات قبل التغيير وبعده.**

1. أثبت العَرَض بقياسات ممثلة

2. اعثر على ما يؤخر المحتوى المهم

3. قلل النقل والتنفيذ غير الضروريين

4. أصلح التفاعل البطيء من سببه

5. تحقق من الرحلة كاملة بعد التغيير

أسئلة ذات صلة