السرعة من أكثر الـ features اللي بيُستهان بيها في البرمجيات. كل مية ميلي ثانية بتقطعها من وقت التحميل بترفع الـ conversion بشكل ملموس، وكل ثانية بتضيفها بتبعت المستخدم لمنافس بهدوء. وجوجل قالها صراحة: Core Web Vitals إشارة ترتيب — فالموقع البطيء مش بس إحساسه أسوأ، لكنه بيترتب أقل وبيجيب traffic أقل من الأساس.
الغلطة اللي أغلب الفِرَق بتقع فيها إنها بتعامل الأداء كمهمة تنضيف هتعملها قبل الإطلاق. وعمرها ما بتعملها. لحد ما الوقت ييجي يكون الـ bundle متضخّم، الصور مش متظبّطة، وكل إصلاح بيحارب قرارات اتحطّت من شهور. إحنا بنعامل الأداء زي الـ accessibility والأمان: budget بتحدده من اليوم الأول وبتدافع عنه في كل pull request.
عمليًا، الـ budget ده هو الـ Core Web Vitals التلاتة. الـ LCP بيقيس سرعة ظهور المحتوى الأساسي — هدفنا أقل من ثانيتين. الـ INP بيقيس سرعة استجابة الواجهة للمسة — أقل من 200 ميلي ثانية. والـ CLS بيقيس قد إيه الصفحة بتتنطّط وهي بتحمّل — أقل من 0.1. تلات أرقام، بتتقاس باستمرار، بتخلّي الكل أمين.
الوصول لـ LCP كويس بيتعلّق بالـ critical path. بنرندر على الـ server عشان أول رسمة تبقى HTML حقيقي، مش spinner مستني JavaScript. بنظبّط كل صورة وحجمها، بنقدّم formats حديثة، و lazy-load لأي حاجة تحت الطية. والخطوط بنعملها preload و swap عشان النص ما يختفيش وإحنا بنحمّل الـ webfont. الـ hero اللي بتشوفه الأول هو اللي بنحسّنه بأقصى درجة.
الـ INP مشكلة JavaScript. كل ما تبعت script أكتر، كل ما الـ main thread يفضل مشغول أطول وكل تفاعل يبقى أبطأ. عشان كده بنبعت أقل: code-split حسب الـ route، نخلّي الـ interactive islands صغيرة، ونتجنّب hydration لصفحات كاملة هي في الأصل محتوى ثابت. الزرار المفروض يرد لحظة ما تدوس، مش بعد توقّف 300 ميلي ثانية.
الـ CLS أرخص واحد في الإصلاح وأكتر واحد بيتجاهلوه. احجز مكان للصور والـ embeds بأبعاد صريحة، ماتحقنش banners فوق محتوى ظاهر بالفعل، وحرّك بـ transforms مش بـ properties بتسبّب layout. أغلب الـ layout shift بعيد عن الصفر بكام attribute للـ width والـ height ناقصين بس.
ومفيش حاجة من دي بتعيش من غير قياس. بنشغّل Lighthouse في الـ CI عشان نمسك الـ regressions قبل ما تتدمج، وبنجمّع real-user metrics في الإنتاج لأن أرقام المعمل وأرقام الميدان دايمًا بيختلفوا. ماتقدرش تضبط اللي ماتقيسوش — وأول ما الفريق يشوف تكلفة dependency تقيلة، بيبطّلوا يضيفوها.
