أداء ويب يصمد على الشبكات والأجهزة الحقيقية

فجوة القياس

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

والفجوة بين التجربتين هائلة، وهي غير مرئية ما لم تُقَس عمداً. ولهذا فعمل الأداء الذي يبدأ بـ«يبدو جيداً لي» يبدأ خاطئاً في الغالب.

قِس ما يختبره المستخدمون

الاختبارات المعملية الاصطناعية مفيدة لالتقاط الانحدارات لكنها لا تصف جمهورك الفعلي. وبيانات الميدان — مراقبة المستخدم الحقيقي — هي ما يخبرك بالحقيقة، والمقاييس الجديرة بالمتابعة هي المرتبطة بالإدراك:

• أكبر رسم للمحتوى (LCP) — متى يصير المحتوى الرئيسي مرئياً
• التفاعل حتى الرسم التالي (INP) — بأي سرعة تستجيب الواجهة للإدخال
• الإزاحة التخطيطية التراكمية (CLS) — كم يتحرّك المحتوى أثناء التحميل

وتابعها عند المئين الخامس والسبعين أو أسوأ، لا عند الوسيط. فالوسيط يصف مستخدماً في يوم جيد؛ أما الذيل فحيث ييأس الناس ويغادرون.

جافاسكربت هي المشكلة عادةً

على العتاد الجوال المتوسط، لا يهيمن على تكلفة جافاسكربت زمنُ التنزيل بل التحليل والترجمة والتنفيذ — وكلها على الخيط الرئيسي، وكلها تحجب التفاعل.

والتسلسل العملي:

1. أرسل أقل. دقّق التبعيات. فمكتبة تواريخ، أو مجموعة أيقونات كاملة، أو حزمة رسوم بيانية مستوردة لرسم واحد، أمور شائعة وباهظة.
2. قسّم حسب المسار. فزائر يقرأ مقالاً لا ينبغي أن ينزّل شفرة واجهة الإدارة.
3. أجّل ما لا يلزم للتفاعل الأول. فالتحليلات وأدوات المحادثة والعوارض يمكن تحميلها بعد أن تصير الصفحة قابلة للاستخدام.
4. فضّل التصيير على الخادم للمحتوى الذي لا يحتاج تفاعلية. فـ HTML يصل جاهزاً للعرض أسرع من جافاسكربت تصل ثم تبنيه.

الصور أكبر حمولة

تهيمن الصور عادةً على البايتات المنقولة، والحلول معروفة جيداً ونادراً ما تُطبَّق كاملة:

• قدّم صيغاً حديثة — فـ AVIF وWebP أصغر كثيراً من JPEG عند جودة مكافئة
• قِس للعرض لا للأصل. فتقديم صورة بعرض 4000 بكسل في حيّز 400 بكسل يهدر 99% من البايتات.
• استخدم مصادر متجاوبة ليتلقّى الهاتف صورة بحجم الهاتف
• حدّد الأبعاد صراحةً لحجز مساحة التخطيط ومنع الإزاحة
• حمّل ما تحت الطيّة كسولاً، لكن لا تفعل ذلك بصورة LCP أبداً — فالتحميل الكسول للصورة الرئيسية يؤخّر المقياس الذي تحدّده

الخطوط تحجب النص

الخط الشبكي الذي لم يُحمَّل يترك النص غير مرئي أو يبدّله فجأة. استخدم font-display: swap ليُصيَّر النص فوراً بخط احتياطي، وحمّل الوجه الحرج مسبقاً، وجزّئ الخط إلى المحارف المستخدمة فعلاً.

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

ضع ميزانية وافرضها في التكامل المستمر

التحسين الذي يُجرى مرة واحدة يتآكل. وميزانية الأداء — حدّ صارم لحجم الحزمة أو وزن الصور أو عتبة مقياس — تُفحص آلياً عند كل طلب دمج هي ما يحفظ المكاسب.

فبلا فرض آلي، يتراجع الأداء ميزةً بعد ميزة، كلٌّ منها قابلة للدفاع منفردة، والنتيجة التراكمية هي الموقع البطيء الذي بدأت بإصلاحه.

اختبر على العتاد الذي يملكه مستخدموك

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

عشر دقائق من ذلك تكشف أكثر مما يكشفه بعد ظهيرة في قراءة درجات اصطناعية.