المقدمة

عمرك سألت نفسك كيف نحكم على أي موقع بأنه Optimized (سريع وسلسل وبيحمل في أقل وقت ممكن)؟ من هنا ظهر ال CORE WEB VITAL من خلال فريق عمل Google علشان يقيسوا أداء تجربة
المستخدم للموقع من خلال 3 مقاييس أساسية وهما و CLS و LCP و INP.

محددات الأداء الرئيسية

  • (LCP): اختصار ل Largest Contentful Paint ودي بتقيس الوقت الي بياخذه تحميل وعرض أكبر عنصر في الصفحة بداية من الضغط علي لنك الموقع حتى عرض وظهور العنصر ده علي الشاشة . 
  • (CLS): اختصار ل Cumulative Layout Shift ودا عبارة عن مقياس بيعبر عن مدى ثبات محتوى الموقع اثناء تحميل باقي العناصر .
  • (INP): اختصار ل Interaction to Next Paint وده بيقيس الوقت اللي بياخذه الموقع بداية من تفاعل المستخدم (زي الضغط أو الكتابة) حتى استجابة الموقع وتحديث الصفحة .

Largest Contentful Paint

تعال نمسكهم واحد واحد, الأول وهو الـ LCP وهو مسئول عن قياس سرعة تحميل الصفحة 

وهذا عن طريق قياس الوقت اللازم لتحميل أكبر عنصر في الصفحة سواء نص أو صورة أو فديو ولازم يكون أقل من 2.5 ثانية عشان نقول إنه optimized . وهو مكون من مجموع 4 عناصر أساسية وهي  :

  • (Time to First Byte (TTFB 
  •  Resource load delay  
  • Resource load duration 
  •  Element render delay

LCP = Time to First Byte (TTFB) + Resource load delay + Resource load duration + Element render delay 

أولاً الـ  Time to First Byte (TTFB) وهو الوقت الي بياخذه ال browser  علشان يستلم أول byte من بداية ضغط ال user علي link الموقع , و الثاني هو Resource load delay وهو الوقت الي بياخذه الموقع علشان يحمل المكونات وملفات الموقع زي ملفات ال css والفونت وهكذا وثالث مكون وهو الـ Resource load duration وهذا وقت الي بيتحمل فيه العنصر نفسه وآخر حاجة هو Element render delay وهو الوقت الي بيتأجل فيه عرض العنصر لحين اكتمال تحميل باقي العناصر زي  ملفات ال js  مثلا .

ومن هنا بنلاحظ إنه مش شرط تقليل حجم عنصر ال LCP بالضرورة يساهم في تقليل ال LCP ودا لأنه في بعض الحالات بيحصل ترحيل للوقت ده ل  ال Element Render Delay مثل ماهو موضح في الصورة رقم 3 وده بيحصل في حالات قليلة جدًا لأنه نسبة ال Element Render Delay بتكون أقل من 10 % .

% of LCP

LCP sub-part

~40%

Time to first byte

<10%

Resource load delay

~40%

Resource load duration

<10%

Element render delay

100%

TOTAL

image 3

طرق تحسين ال LCP

هيكون عن طريق بعض الخطوات وهي: 

  • نعطي العناصر كبيرة الحجم مثل الصور priority أعلى في التحميل عن طريق استخدام attribute في الصورة اسمه fetch-priority 
  • نقلل حجم الملف نفسه باستخدام صور مثل ال AVIF vs WebP التي تكون ـقل في الحجم مقارنة ب png و jpeg .
  • التحميل المسبق لعناصر ال LCP عن طريق ما يسمى ب ال Preload خصوصا في حالة استخدام الـ js لعرض عنصر ال LCP .
  • نقلل حجم ملفات CSS و JS عن طريق ال magnification tools  زي gulp .
  • وضع  أكواد الـ JS في ملف منفصل  وفي آخر ملف ال HTML علشان نضمن إنه ميحصلش block لتحميل عنصر ال LCP .

Cumulative Layout Shift

 ثانيًا ال CLS وهو يقيس مقدار التغيرات غير المتوقعة في تخطيط الصفحة أثناء تحميل محتوى الصفحة. ولتوضيح أهمية هذا المقياس لنفترض إنه عندنا موقع  E-Commerce والمستخدم عمل كل الخطوات اللازمة لطلب الOrder و وصل لصفحة ال checkout والي بيكون فيها اثنين buttons الأول لطلب الاوردر والثاني لإلغاء الاوردر ولسبب ما قرر المستخدم إلغاء الطلب وأثناء الضغط على زر الإلغاء حصل shift ( لأي سبب زي مثلاً ظهور إعلان مش معمول حسابه في الـ layout الخاص بالصفحة ) وبالتالي ضغط على زر تأكيد الشراء وده عكس الي المستخدم كان مقررة في البداية , دا يبيلنا قد ايه مهم مقياس CLS في ثبات الصفحة .

طرق حساب ال CLS  

CLS=Impact Fraction×Distance Fractionأولًا ال  impact fraction ودا يقيس مقدار تأثير العنصر غير المستقر على الـ viewport 

علي سبيل المثال في الصورة 5 حدوث shift بشكل vertical  بالتالي لو أردنا حساب ال 

ال impact fraction  هيكون حجم العنصر الأساسي + حجم العنصر الغير مستقر  25%+ 50% = 75% من الـ viewport

وال distance fraction ودا بيكون أكبر مسافة أفقية أو رأسية للعنصر الغير مستقر مقسوم على أكبر viewport (رأسي أو أفقي حسب الاكبر)  في حالتنا هنا  50%CLS = 0.75*0.50 = 0.375 في حاجة هنا ناخد بالنا منها وهو إنه مش كل ال Layout shift سئ في العموم وأنه دا يعتمد علي توقعنا ليه وتحكمنا فيه زي مثلاً إنه يكون عندنا زر وال user أول ما يضغط عليه نظهر ليه loading indicator داخل الزر نفسه  ودا بيكون كويس طالما بيكون في حدود تحكمنا وفي حدود الحيز الي ال user بيستخدمه .

طرق تحسين ال  ال CLS

  • تحديد قيم افتراضية ل width  و height  للصور .
  • تحديد حيز الإعلانات محدد مسبقًا .
  • استخدم animation بطريقة صحيحة عن طريق استخدام transform في الـ CSS .

Interaction To Next Paint

ثالثًا ال INP وهو يقوم بقياس وقت الاستجابة من بداية التفاعل (مثل النقر أو الكتابة ) حتى عرض المحتوى المحدث ودا لازم يكون أقل من 200 ملي ثانية علشان يكون optimized وبيتم قياس ال INP بعد مغادرة المستخدم للصفحة بانه بيحسب كل تفاعل اخذ وقت قديه واكتر تفاعل استغرق وقت بيكون هو دا ال INP ودا بيكون مكون مجموع من 3 عناصر .

  1. The input delay ودا الوقت من بداية التفاعل حتى بداية تنفيذ ال logic
  2. The processing Time ودا الوقت الي يتم فيه ال logic نفسه .
  3. The presentation delay ودا الوقت  بيقوم فيه المتصفح بتجهيز المحتوى المحدث لعرضه ورسمه على الشاشة .

طرق تحسين ال INP

  • تقليل ال input delay وهذا عن طريق تحسين مستوي الكود في الـ JS وبالتالي كتابة كود نظيف وفعال هيساهم بشكل كبير في تقليل ال INP . 
  • استخدم patterns زي ال debounce بيحسن بشكل كبير في ال ال INP عن طريق إنه يقوم بتأجيل الـ Logic في حال تزاحم ال Input .

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

طرق قياس ال Core Web Vital 

في أكثر من طريقة نقدر نقيس بيها محددات الأداء أشهر الطرق دي 

وفي توجد طرق أخرى عن طريق الـ Js عن طريق مكتبة تسمى  'web-vitals'

في الختام

 محددات الأداء الرئيسية (Core Web Vital) هي مجموعة من المقاييس تهدف إلى قياس تجربة المستخدم من حيث سرعة التحميل والثابت البصري للموقع وسرعة الاستجابة من خلال ثلاثة محددات رئيسية وهم (Largest Contentful Paint - LCP) التي تهدف إلى قياس مدى سرعة تحميل الموقع و  (Cumulative Layout Shift - CLS)والذي يهدف لقياس مدى ثبات العناصر واخيرًا (Interaction to Next Paint - INP)  وتهدف إلى قياس سرعة الاستجابة ل action معين سواء نقر أو كتابة.