ضع ميزانية أداء لموقع Astro قبل أن يتضخم

يبدأ Astro من موقع جيد: HTML مولد على الخادم وبدون JavaScript في المتصفح إلا عند طلبه. لكن هذه الميزة قد تختفي بهدوء مع صور كبيرة وخطوط كثيرة وأدوات تحليل وتضمينات ومكونات تفاعلية.

تحول ميزانية الأداء عبارة «اجعله سريعاً» إلى قرارات يمكن مراجعتها.

حدد ميزانية لكل نوع صفحة

صفحة المقال النصية يمكن أن تكون أكثر صرامة من الصفحة الرئيسية. لمجلة تقنية يمكن البدء بميزانية مثل:

المورد	صفحة المقال	الرئيسية
JavaScript الأولي	35 KB	60 KB
صور أول شاشة	250 KB	500 KB
ملفات الخطوط الحرجة	2	2
CLS	أقل من 0.1	أقل من 0.1
LCP	أقل من 2.5 ثانية	أقل من 2.5 ثانية

يمكن أن تتغير الأرقام، لكن يجب أن تكون ظاهرة ومقاسة.

احمِ عنصر LCP

حدد العنصر المتوقع لكل قالب. في المقال قد يكون العنوان، وفي الرئيسية قد تكون الصورة المميزة.

إذا كانت صورة، أعطها أبعاداً صريحة ومصادر responsive وقيمة sizes صحيحة وfetchpriority مرتفعة. لا تستخدم lazy loading معها، واستخدمه لكل الصور أسفل الشاشة الأولى.

لا تسبق تحميل عدة صور محتملة؛ كل preload خاطئ ينافس CSS والخط والعنصر الحقيقي.

احجز المساحة لمنع CLS

توفر أدوات صور Astro الأبعاد للصور المستوردة. أما الصور داخل public فتحتاج عرضاً وارتفاعاً أو aspect ratio ثابتاً.

ينطبق ذلك أيضاً على الفيديو والإعلانات ونماذج الاشتراك ومربعات الكود التي تنشئها سكربتات لاحقاً.

استخدم Islands عندما تستحق الميزة

تبديل الوضع الداكن لا يحتاج framework. وكذلك القائمة البسيطة وزر النسخ.

استخدم island عندما توجد حالة تفاعلية حقيقية، ثم اختر التوجيه الأقل تكلفة: client:visible لما هو أسفل الصفحة، وclient:idle للتحسينات غير الحرجة، وclient:load فقط عند الحاجة المباشرة.

اعتبر سكربتات الطرف الثالث قرار منتج

قد تكلف أدوات التحليل والدردشة والتضمينات أكثر من كود الموقع كله. سجل مالك كل سكربت وهدفه وحجمه وتكلفة تنفيذه، وحمّله فقط في الصفحات التي تحتاجه.

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