Core Web Vitals: قياس وتحسين أداء الويب
لقد أنشأت موقعاً سريعاً وحديثاً، لكن المستخدمين ما زالوا يشتكون من البطء، وترتيبك في SEO يتراجع. قد يكون السبب هو Core Web Vitals (CWV) — مقاييس جوجل لتجربة المستخدم. في هذا الدليل، ستتعلم كيفية قياس وتحسين LCP وINP وCLS بخطوات عملية وقابلة للتنفيذ.
ما هي Core Web Vitals؟
Core Web Vitals هي ثلاثة مقاييس تحدد تجربة المستخدم في العالم الحقيقي:
- Largest Contentful Paint (LCP): مدى سرعة تحميل المحتوى الرئيسي. الهدف: ≤ 2.5 ثانية.
- Interaction to Next Paint (INP): مدى استجابة الصفحة لتفاعل المستخدم. الهدف: ≤ 200 مللي ثانية.
- Cumulative Layout Shift (CLS): مقدار تحرك التخطيط بشكل غير متوقع. الهدف: ≤ 0.1.
تُعد هذه المقاييس جزءاً من إشارات تجربة الصفحة لدى جوجل وتؤثر مباشرةً على SEO ورضا المستخدم.
كيفية قياس Core Web Vitals
ينقسم القياس إلى فئتين: بيانات الميدان (مراقبة المستخدمين الحقيقيين) وبيانات المختبر (الاختبار الاصطناعي). كلاهما قيّم.
أدوات الميدان (بيانات المستخدمين الحقيقيين)
- Chrome User Experience Report (CrUX): مجموعة بيانات عامة لمقاييس المستخدمين الحقيقيين. يمكن الوصول إليها عبر PageSpeed Insights أو CrUX API.
- Google Search Console: يعرض تقرير Core Web Vitals أداء الموقع على مستوى المجموعات.
- مكتبة web-vitals: مكتبة JavaScript صغيرة لالتقاط المقاييس في نظام التحليلات الخاص بك.
أدوات المختبر (الاختبار الاصطناعي)
- Lighthouse: مدمج في Chrome DevTools، يقوم بتدقيق الأداء وتقديم فرص للتحسين.
- PageSpeed Insights: يجمع بين بيانات المختبر والميدان لعنوان URL واحد.
- WebPageTest: اختبار متقدم مع ظروف شبكة مخصصة ومحاكاة الأجهزة.
استخدم بيانات الميدان لفهم تجربة المستخدم الفعلية وبيانات المختبر لتصحيح الأخطاء والتكرار.
تحسين LCP: اجعل المحتوى الرئيسي يُحمَّل بشكل أسرع
غالباً ما يكون LCP المقياس الأكثر تأثيراً. إليك كيفية تحسينه:
- حسّن الصور: اضغط الصور، واستخدم صيغاً حديثة (WebP، AVIF)، وقدّم أحجاماً متجاوبة باستخدام
srcset. أدوات مثل Image Compressor يمكن أن تساعد في تقليل حجم الملف دون فقدان جودة ملحوظ. - حمّل الموارد الحرجة مسبقاً: استخدم
<link rel="preload">لصور البانر والخطوط وCSS الأساسي. - قلل زمن استجابة الخادم: استخدم CDN، وفعّل التخزين المؤقت، وحسّن استعلامات الواجهة الخلفية.
- أزل الموارد المعيقة للعرض: ضمّن CSS الحرج، وأجّل JavaScript غير الحرج، وحمّل CSS بشكل غير متزامن.
- استخدم شبكة توصيل المحتوى (CDN): قدّم الأصول من مواقع قريبة من المستخدمين.
تحسين INP: اجعل التفاعلات تبدو فورية
يقيس INP الوقت من إدخال المستخدم (نقر، لمس، ضغط مفتاح) إلى التحديث البصري التالي. لتحسينه:
- قسّم المهام الطويلة: استخدم
setTimeoutأوrequestIdleCallbackللتنازل عن الخيط الرئيسي. - حسّن معالجات الأحداث: استخدم debounce أو throttle للأحداث السريعة مثل التمرير وتغيير الحجم.
- قلل وقت تنفيذ JavaScript: قسّم الكود، وأزل الكود غير المستخدم، وحمّل السكريبتات غير الحرجة بشكل كسول.
- استخدم web workers: انقل العمليات الحسابية الثقيلة إلى خيط خلفي.
- قلل سكريبتات الطرف الثالث: دقق وأزل التحليلات أو الإعلانات أو الأدوات غير الضرورية.
تحسين CLS: حافظ على استقرار التخطيط
يحدث CLS عندما تتحرك العناصر بشكل غير متوقع. امنعه باتباع ما يلي:
- حدد دائماً العرض والارتفاع للصور والفيديوهات: هذا يحجز المساحة ويمنع إعادة التدفق.
- احجز مساحة للإعلانات والتضمينات: استخدم CSS
aspect-ratioأو حاويات بحجم ثابت. - تجنب إدراج محتوى فوق المحتوى الموجود: إلا استجابةً لتفاعل المستخدم.
- استخدم
font-display: swap: يضمن بقاء النص مرئياً أثناء تحميل الخط، لكن انتبه فقد يسبب تحولات طفيفة؛ فكّر فيfont-display: optionalللنص الحرج. - حمّل الخطوط مسبقاً: يقلل من احتمالية تحرك التخطيط بسبب تحميل الخطوط المتأخر.
مقارنة مقاييس Core Web Vitals
| المقياس | ما يقيسه | الهدف الجيد | الأسباب الشائعة للنتائج السيئة |
|---|---|---|---|
| LCP | أداء التحميل | ≤ 2.5 ث | خادم بطيء، موارد معيقة للعرض، صور كبيرة |
| INP | الاستجابة | ≤ 200 مللي ث | مهام طويلة، JavaScript ثقيل، معالجات أحداث غير فعالة |
| CLS | الاستقرار البصري | ≤ 0.1 | صور بدون أبعاد، إدراج محتوى ديناميكي، خطوط الويب |
الأدوات وسير العمل للتحسين المستمر
تحسين CWV ليس مهمة لمرة واحدة. ادمج هذه الممارسات في سير عملك:
- أعد مراقبة المستخدمين الحقيقيين: استخدم مكتبة
web-vitalsلإرسال المقاييس إلى منصة التحليلات الخاصة بك. - شغّل Lighthouse في CI: استخدم Lighthouse CI لاكتشاف التراجعات قبل النشر.
- راقب عبر Search Console: تحقق من تقرير Core Web Vitals بانتظام.
- اختبر على أجهزة حقيقية: المحاكيات مفيدة، لكن الأجهزة الحقيقية تكشف الأداء الفعلي.
- كرر وقس: أجرِ تغييراً واحداً في كل مرة وقس تأثيره.
تذكر أن تحسين Core Web Vitals غالباً ما يتضمن تحسين الأصول. بالنسبة للصور، فكّر في استخدام Image Compressor لتقليل أحجام الملفات قبل الرفع.
الأسئلة الشائعة
ما هي Core Web Vitals ولماذا تهم؟
Core Web Vitals هي ثلاثة مقاييس (LCP، INP، CLS) تقيس التحميل والتفاعلية والاستقرار البصري. تهم لأنها تعكس تجربة المستخدم الحقيقية وتُستخدم من قبل جوجل كإشارة ترتيب.
كم مرة يجب أن أقيس Core Web Vitals؟
بشكل مستمر. أعد مراقبة المستخدمين الحقيقيين للحصول على بيانات مستمرة، وشغّل اختبارات المختبر (مثل Lighthouse) أثناء التطوير وقبل الإصدارات لاكتشاف التراجعات.
هل يمكنني تحسين Core Web Vitals بدون مطور؟
بعض التحسينات، مثل ضغط الصور أو تفعيل التخزين المؤقت عبر الإضافات، يمكن لغير المطورين القيام بها. ومع ذلك، غالباً ما تتطلب التحسينات الأعمق (مثل تقليل JavaScript، وتحسين مسار العرض الحرج) مشاركة مطور.
هل أنت مستعد لتحسين صورك للحصول على LCP أفضل؟ جرّب Image Compressor المجاني لتقليل أحجام الملفات دون فقدان الجودة.