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

قِس بيانات المختبر والواقع قبل التحسين

التحسين دون قياس تخمين. مقاييس المختبر مثل Lighthouse تخبرك كيف تؤدي الصفحة في ظروف مثالية؛ وبيانات الواقع من مراقبة المستخدمين الحقيقيين — مقاييس تجربة الويب الأساسية LCP وINP وCLS — تخبرك بما يجربه المستخدمون فعلاً على شبكاتهم وأجهزتهم. سجّل الاثنين أولاً، ثم حسّن ما يهيمن على توزيع الواقع عند النسبة المئوية 75، لا ما يبدو أسوأ في تشغيل مُتحكم فيه. ملف مختبر سريع مع بيانات واقع سيئة يعني مشكلة تخزين مؤقت أو منطقة خادم؛ وملف مختبر بطيء مع بيانات واقع مقبولة يعني مشكلة حزم — ولكل منهما إصلاح مختلف.

LCP: مسار العرض الحرج

أكبر رسم محتوى تحكمه ثلاثة أشياء: متى يستجيب الخادم، ومتى تصل ملفات CSS وجافاسكربت المعطِّلة، ومتى يُرسم أكبر عنصر. اضغط بـ Brotli، واخدم من حافة قريبة من المستخدم، وحمّل صورة الهيرو مسبقاً مع fetchpriority=high، وأزل CSS غير المستخدم. كل بايت يُختصر قبل الرسم الأول يساوي أكثر من أي تحسين في أسفل الصفحة، لذا عامل المسار الحرج كميزانية مستقلة منفصلة عن ميزانية الحزم العامة.

INP وميزانية التفاعل

مقياس Interaction to Next Paint يحدد مدى استجابة الواجهة، والخيط الرئيسي مسار واحد: المهام الطويلة فوق 50 مللي ثانية تجعل اللمس والتمرير متأخرين بشكل محسوس. قسّم العمل الثقيل إلى أجزاء، وأجّل جافاسكربت غير الحرجة، وتجنب إعادة التخطيط المتكررة في حلقات العرض، وأبقِ معالجات الأحداث خفيفة. ميزانية التفاعل بضع مئات من المللي ثانية — أنفقها في عرض النتيجة لا في تحليل سكربت طرف ثالث. إذا أجبرت أداة الخيط الرئيسي على العمل نصف ثانية في كل تمرير، فالمستخدم يحس كل إطار منه.

CLS: استقرار التخطيط كقيد تصميمي

مقياس الانزلاق التراكمي للتخطيط أسهل مقاييس الويب الأساسية إفساداً: صورة هيرو بلا أبعاد، إعلان يُحقن فوق المحتوى، خط بديل يعيد تحجيم العناوين. احجز مساحة لكل عنصر وسائط، وحدد أحجام الخطوط مع size-adjust لمنع قفزة التبديل، وأبقِ المحتوى الديناميكي أسفل طية الصفحة. عامل CLS كمعيار مراجعة تصميمية لا كملاحظة جودة — يُقرر داخل المكوّن بعد دقائق من وصول التصميم، لا في سباق الإصلاح قبل الإطلاق.

جافاسكربت: مشكلة الوزن الحقيقية

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

الصور والوسائط: اخدم ما تحتاجه الشاشة

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

قائمة تحقق أداء لكل إصدار

  • بيانات المختبر والواقع مسجلة لأكثر خمسة قوالب زيارة.
  • ميزانية الحزم مفروضة في التكامل المستمر لجافاسكربت وCSS معاً.
  • CSS الحرج مضمن في الصفحة؛ وسكربتات إعاقة العرض أُزيلت.
  • صورة الهيرو محملة مسبقاً ومحددة الأبعاد؛ ومحتوى أسفل الطية كسول.
  • سكربتات الأطراف الثالثة مراجعة ربع سنوياً ومُنقلة خارج المسار الحرج.

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