مؤشرات الويب الأساسية: قياس وتحسين لتحسين محركات البحث
لماذا تهم مؤشرات الويب الأساسية موقعك
لقد قمت ببناء موقع سريع وغني بالميزات، لكن المستخدمين لا يزالون يشتكون من البطء، وترتيبك في محركات البحث يتراجع. قد يكون السبب هو مؤشرات الويب الأساسية - مجموعة المقاييس من Google التي تقيس تجربة المستخدم في العالم الحقيقي. منذ عام 2021، أصبحت هذه المقاييس عامل ترتيب مؤكد، وتؤثر مباشرة على معدلات الارتداد والتحويلات. تجاهلها يعني خسارة الزيارات والإيرادات.
في هذا الدليل، ستتعلم ما يعنيه كل مقياس، وكيفية قياسها بدقة، والتحسينات خطوة بخطوة التي يمكنك تنفيذها اليوم.
ما هي مؤشرات الويب الأساسية؟
مؤشرات الويب الأساسية هي ثلاثة مقاييس محددة تلتقط التحميل والتفاعل والاستقرار البصري:
- Largest Contentful Paint (LCP): يقيس أداء التحميل. يشير إلى الوقت الذي يصبح فيه أكبر عنصر محتوى (صورة، كتلة نص، فيديو) مرئيًا. LCP الجيد هو 2.5 ثانية أو أقل.
- Interaction to Next Paint (INP): يقيس الاستجابة. يسجل زمن الوصول لجميع التفاعلات (النقرات، اللمسات، ضغطات المفاتيح) ويقدم قيمة واحدة. INP الجيد هو 200 مللي ثانية أو أقل. حل INP محل First Input Delay (FID) في مارس 2024.
- Cumulative Layout Shift (CLS): يقيس الاستقرار البصري. يحدد التغيرات غير المتوقعة في التخطيط أثناء تحميل الصفحة. CLS الجيد هو 0.1 أو أقل.
هذه المقاييس مبنية على البيانات الميدانية، مما يعني أنها تأتي من بيانات المستخدمين الحقيقيين، وليس من اختبارات المختبر. لهذا السبب تستخدم أدوات مثل Chrome User Experience Report (CrUX) وPageSpeed Insights هذه المقاييس.
كيفية قياس مؤشرات الويب الأساسية
تحتاج إلى بيانات المختبر والميدان معًا للحصول على صورة كاملة. تساعدك أدوات المختبر في تصحيح الأخطاء، بينما تظهر بيانات الميدان تجربة المستخدم الحقيقية.
أدوات الميدان (بيانات المستخدم الحقيقي)
- PageSpeed Insights: أدخل عنوان URL لرؤية بيانات المختبر والميدان معًا. قسم الميدان يستمد من CrUX.
- Search Console: تقرير مؤشرات الويب الأساسية يجمع عناوين URL حسب الحالة (ضعيف، يحتاج تحسين، جيد).
- Chrome UX Report (CrUX): يمكن الوصول إليه عبر BigQuery أو واجهة برمجة تطبيقات CrUX للحصول على البيانات الخام.
- مكتبة web-vitals JavaScript: أضف هذا النص البرمجي خفيف الوزن إلى موقعك لجمع المقاييس من المستخدمين الحقيقيين وإرسالها إلى تحليلاتك.
أدوات المختبر (الاختبار الاصطناعي)
- Lighthouse: مدمج في Chrome DevTools. قم بتشغيله للحصول على درجات المختبر والفرص.
- WebPageTest: اختبار متقدم مع شرائط الفيلم، ومخططات الشلال، واختناق مخصص.
- لوحة أداء Chrome DevTools: سجل وحلل أداء وقت التشغيل.
لبداية سريعة، استخدم PageSpeed Insights. فهو يجمع بيانات المختبر والميدان في تقرير واحد.
خطوة بخطوة: تحسين LCP
غالبًا ما يكون LCP أسهل في التحسين باستخدام هذه الخطوات:
- تحسين الصور: اضغط الصور دون فقدان الجودة. استخدم تنسيقات حديثة مثل WebP أو AVIF. أدوات مثل ضاغط الصور يمكن أن تساعد.
- تحميل عنصر LCP مسبقًا: أضف
<link rel="preload">لصورة البطل أو الخط. - تقليل وقت استجابة الخادم: استخدم CDN، وتمكين التخزين المؤقت، وتحسين كود الواجهة الخلفية. بالنسبة لـ Nginx، تحقق من سجلاتك باستخدام محلل سجل Nginx لتحديد الطلبات البطيئة.
- إزالة الموارد المانعة للعرض: قم بتضمين CSS الحرج، وتأجيل JavaScript غير الحرج، واستخدم سمات
asyncأوdefer. - استخدم CDN: قدم الأصول من مواقع قريبة من المستخدمين.
خطوة بخطوة: تحسين INP
يقيس INP الاستجابة. غالبًا ما يأتي INP المرتفع من مهام JavaScript الطويلة.
- قسّم المهام الطويلة: استخدم
setTimeoutأوrequestIdleCallbackللتنازل عن الخيط الرئيسي. - حسّن معالجات الأحداث: استخدم debounce أو throttle للعمليات المكلفة.
- قلل JavaScript: أزل الكود غير المستخدم، وقسم الكود، وقم بتحميل البرامج النصية غير الحرجة بشكل كسول.
- استخدم web workers: انقل الحسابات الثقيلة بعيدًا عن الخيط الرئيسي.
- تجنب أحجام DOM الكبيرة: حافظ على DOM أقل من 1,500 عقدة حيثما أمكن.
خطوة بخطوة: تحسين CLS
CLS يتعلق بالاستقرار البصري. امنع التغيرات غير المتوقعة باستخدام هذه التكتيكات:
- عيّن سمات الحجم للصور والفيديو: قم دائمًا بتضمين
widthوheight. - احجز مساحة للإعلانات والتضمينات: استخدم CSS
aspect-ratioأو حاويات ثابتة. - تجنب إدراج محتوى فوق المحتوى الموجود: إذا كان لا بد من ذلك، استخدم عنصرًا نائبًا أو قم بتحريك التغيير.
- استخدم font-display: swap: امنع النص غير المرئي أثناء تحميل الخط (على الرغم من أن هذا قد يسبب تغييرات طفيفة؛ فكر في
font-display: optionalللخطوط الحرجة). - قم بتحميل الخطوط مسبقًا: قلل من تغييرات التخطيط الناتجة عن الخطوط المتأخرة التحميل.
مقارنة مقاييس مؤشرات الويب الأساسية
| المقياس | ما يقيسه | عتبة الجودة | الإصلاح الأساسي |
|---|---|---|---|
| LCP | أداء التحميل | ≤ 2.5 ثانية | تحسين الصور، التحميل المسبق، CDN |
| INP | الاستجابة | ≤ 200 مللي ثانية | تقسيم المهام الطويلة، تقليل JS |
| CLS | الاستقرار البصري | ≤ 0.1 | تعيين الأبعاد، حجز المساحة |
المراقبة والتحسين المستمر
الأداء ليس إصلاحًا لمرة واحدة. قم بإعداد مراقبة المستخدم الحقيقي (RUM) لتتبع مؤشرات الويب الأساسية بمرور الوقت. استخدم مكتبة web-vitals لإرسال المقاييس إلى منصة التحليلات الخاصة بك. قم بتعيين تنبيهات للانحدارات. قم بمراجعة دورية باستخدام Lighthouse في خط أنابيب CI/CD الخاص بك لاكتشاف المشكلات قبل وصولها إلى الإنتاج.
الأسئلة الشائعة
ما هي العتبات الحالية لمؤشرات الويب الأساسية؟
بالنسبة لـ LCP، الجيد هو ≤ 2.5 ثانية، يحتاج تحسين هو ≤ 4.0 ثانية، والضعيف هو > 4.0 ثانية. بالنسبة لـ INP، الجيد هو ≤ 200 مللي ثانية، يحتاج تحسين هو ≤ 500 مللي ثانية، والضعيف هو > 500 مللي ثانية. بالنسبة لـ CLS، الجيد هو ≤ 0.1، يحتاج تحسين هو ≤ 0.25، والضعيف هو > 0.25.
كم مرة يجب أن أقيس مؤشرات الويب الأساسية؟
راقب بشكل مستمر باستخدام بيانات المستخدم الحقيقي. قم بإجراء اختبارات المختبر بعد تغييرات الكود الكبيرة وعلى الأقل شهريًا. يتم تحديث بيانات الميدان في Search Console يوميًا، لكنها تعكس نافذة متجددة مدتها 28 يومًا.
هل يمكنني تحسين مؤشرات الويب الأساسية بدون مطور؟
بعض الإصلاحات مثل ضغط الصور والتخزين المؤقت يمكن القيام بها باستخدام الإضافات أو الأدوات. ومع ذلك، غالبًا ما تتطلب التحسينات الأعمق مثل تقليل JavaScript وضبط الخادم مشاركة المطور.
هل أنت مستعد لتسريع موقعك؟ ابدأ بضغط صورك باستخدام ضاغط الصور المجاني لدينا لإعطاء LCP دفعة سريعة.