في الغالب المصطلح ده مر عليك في مجال الويب وتقريبًا كنت بتتجاهل التعامل معاه.
تعال نتكلم عن أهم 3 مقاييس في الـ Web Vitals وهما:
⚡️ الـ LCP (Largest Contentful Paint) ⚡️ الـ FID (First Input Delay) ⚡️ الـ CLS (Cumulative Layout Shift)
📍 الـ LCP - Largest Contentful Paint
ده مقياس بيحدد قد إيه الصفحة بتاخد وقت علشان أكبر عنصر مرئي فيها يظهر للمستخدم. وده ممكن يكون صورة كبيرة، فيديو، أو حتى نص كبير. الفكرة هنا إن لو العنصر ده أخد وقت طويل علشان يطلع، المستخدم هيحس إن الصفحة بطيئة.
⏱️ الرقم المثالي: علشان تبقى تجربتك حلوة، الـLCP لازم يكون أقل من 2.5 ثانية.
📌 لو أكتر من كده، الموقع بيكون بطيء في نظر جوجل والمستخدمين. علشان تحسن الـLCP، ممكن تقلل حجم الصور، تستخدم CDN، أو تتأكد إن فيه ضغط للملفات زي CSS وJavaScript.
📍 الـ FID - First Input Delay
تخيل إنك دخلت موقع، وعاوز تضغط على زرار أو تعمل أي تفاعل، لكن الصفحة مش بترد عليك بسرعة!
هنا بييجي دور الـ FID. هو بيقيس الوقت اللي بيعدي بين أول ما المستخدم يعمل تفاعل زي ضغط زرار أو كتابة حاجة، والوقت اللي الصفحة بتبدأ تستجيب فيه.
⏱️ الرقم المثالي: لازم يكون أقل من 100 ملي ثانية.
📌 لو الاستجابة بطيئة، ده بيكون نتيجة التحميل المبالغ فيه في ملفات الجافا سكريبت، أو إن الصفحة لسه ما خلصت تحميل.
الحل هنا إنك تقلل الـ JavaScript اللي بيتنفذ في البداية أو تستخدم حاجة زي الـ Lazy Loading
📍 الـ CLS - Cumulative Layout Shift
عمرك دخلت موقع وكنت بتقرأ حاجة وفجأة عنصر في الصفحة اتحرك أو اختفى؟
ده بيسبب إزعاج كبير للمستخدمين، وهنا بييجي دور الـ CLS اللي بيقيس مدى استقرار تخطيط الصفحة. كل ما كانت الصفحة فيها تحركات كتير للعناصر بعد التحميل، كل ما الرقم ده بيزيد.
🔢 الرقم المثالي: لازم يكون أقل من 0.1.
📌 تحسين الـ CLS بييجي من إنك تتأكد إن فيه مساحة محجوزة مسبقًا لعناصر زي الصور أو الإعلانات قبل ما تتحمل، علشان متعملش حركات مفاجئة في التصميم.
💡 ليه الـ Web Vitals مهمة؟
بكل بساطة، لو الأرقام دي مش في المعدلات المطلوبة، ده مش بس بيخلي المستخدم يحس إن الموقع بطيء أو غير مريح، لكن كمان ممكن يأثر على ترتيب موقعك في جوجل، لأن الأداء عامل مهم في الـSEO.
يعني مش بس بتحسن تجربة المستخدم، لكن كمان بتحسن ترتيبك في محركات البحث.
📊 أدوات بتساعدك تقيس الـ Web Vitals:
- الـ Lighthouse: موجود في الـ Dev Tools في Chrome.
- الـ PageSpeed Insights: أداة أونلاين تقدر تديك تقرير مفصل عن الأداء.
- الـ Google Search Console: بيراقب أداء موقعك بشكل دوري ويعرض لك مقاييس الـ Web Vitals.
بس كده مطولش عليك يا صديقي ومتنساش تعمل شير وتفيد غيرك...
بالتوفيق يا بطل 🔥