السيو التقني و Core Web Vitals: سرعة الموقع وتجربة المستخدم

تفتح صفحة من هاتفك، فيتأخر ظهور المحتوى الرئيسي، وعندما تهم بالضغط على زر يتحرك فجأة لأن صورة ظهرت فوقه، فتضغط على شيء آخر، ثم تضغط مرة ثانية فلا تستجيب الصفحة إلا بعد لحظة مزعجة. غالبًا ستغلقها وتعود إلى نتائج البحث. هذه التجربة السيئة يمكن قياسها، وجوجل تقيسها فعلًا بمجموعة مقاييس تسمى مؤشرات أداء الويب الأساسية (Core Web Vitals). في هذا المقال نشرح المقاييس الثلاثة وحدودها الرسمية، وكيف تقرؤها في أدوات جوجل المجانية، وأشهر أسباب الضعف وطرق علاجها، ثم نقدم قائمة تدقيق تقني مختصرة تصلح لأي موقع.

لماذا تهتم جوجل بتجربة الصفحة؟

هدف جوجل أن يجد الباحث إجابة مفيدة بسرعة وراحة. إذا تساوت صفحتان تقريبًا في الصلة والجودة، فالتجربة الأفضل قد ترجح إحداهما. لكن انتبه إلى أمر مهم تؤكده جوجل نفسها: المحتوى الممتاز الملائم لما يبحث عنه الناس يبقى الأهم، وتحسين السرعة وحده لن يجعل صفحة ضعيفة المحتوى تتصدر. الأداء الجيد إذن ليس بديلًا عن المحتوى، بل هو ما يسمح للمحتوى الجيد أن يصل إلى القارئ دون أن يطرده الانتظار أو الإزعاج. والأهم من جوجل: كل ثانية تأخير تعني زوارًا يغادرون قبل أن يقرؤوا حرفًا.

المقاييس الثلاثة

1. أكبر عرض للمحتوى – LCP

يقيس Largest Contentful Paint الزمن حتى يظهر أكبر عنصر مرئي في الجزء الأول من الشاشة، وغالبًا ما يكون الصورة الرئيسية أو العنوان الكبير. إنه يجيب عن سؤال الزائر: «هل بدأت الصفحة تعرض ما جئت من أجله؟».

2. التفاعل حتى العرض التالي – INP

يقيس Interaction to Next Paint سرعة استجابة الصفحة لتفاعلات الزائر طوال زيارته، مثل النقر على زر أو فتح قائمة أو الكتابة في حقل. وقد أصبح هذا المقياس جزءًا من المؤشرات الأساسية في مارس 2024 بدلًا من مقياس أقدم اسمه FID كان يقيس التأخير في أول تفاعل فقط.

3. الإزاحة التراكمية للتخطيط – CLS

يقيس Cumulative Layout Shift مقدار تحرك عناصر الصفحة بشكل غير متوقع أثناء عرضها، كأن يظهر إعلان أو صورة فجأة فيدفع النص إلى الأسفل. رقمه ليس بالثواني، بل قيمة تعكس حجم الإزاحة ومسافتها.

توصي جوجل بأن تحقق الصفحة الحد «الجيد» في 75% على الأقل من الزيارات الحقيقية، مع قياس الهواتف والحواسيب كلًا على حدة. أي أن المهم ليس تجربة جهازك السريع في المكتب، بل تجربة معظم زوارك على أجهزتهم وشبكاتهم الحقيقية.

بيانات المختبر وبيانات المستخدمين الحقيقيين

هذا فرق يربك كثيرين. بيانات المختبر تأتي من اختبار محاكاة يُجرى مرة واحدة بجهاز وشبكة افتراضيين، وهي ممتازة لتشخيص المشكلات وتجربة الإصلاحات فورًا. أما البيانات الميدانية فتُجمع من زيارات مستخدمين حقيقيين لمتصفح كروم على مدى الأيام الثمانية والعشرين الأخيرة، وهي ما تعكس التجربة الفعلية. قد تحصل على درجة مختبر ممتازة بينما البيانات الميدانية ضعيفة، والعكس، لأن جمهورك الحقيقي قد يستخدم هواتف أبطأ أو شبكات أضعف من المحاكاة. والمواقع الصغيرة الجديدة قد لا تملك بيانات ميدانية كافية بعد، وهذا طبيعي.

كيف تقيس؟

• PageSpeed Insights: ضع رابط الصفحة، فتحصل على البيانات الميدانية إن وُجدت، وعلى تحليل مختبر مع اقتراحات مرتبة حسب الأثر.
• تقرير مؤشرات أداء الويب الأساسية في Search Console: يجمع صفحات موقعك المتشابهة في مجموعات، ويوضح أيها جيد وأيها يحتاج إلى تحسين.
• أدوات المطور في كروم: لوحة Lighthouse ولوحة الأداء تسمحان بتحليل مفصل أثناء العمل على الإصلاح.

يشرح الفيديو التالي من فريق Chrome for Developers كيفية تحسين هذه المؤشرات، باللغة الإنجليزية:

أشهر الأسباب وطرق العلاج

عندما يكون LCP بطيئًا

• صور ضخمة: صورة بعرض آلاف البكسلات تُعرض في مساحة صغيرة. اضغط الصور، واستخدم صيغًا حديثة مثل WebP أو AVIF، وقدّم أحجامًا مختلفة حسب الشاشة.
• تأخير تحميل الصورة الرئيسية: التحميل الكسول (Lazy loading) مفيد للصور البعيدة، لكنه يضر إذا طُبق على الصورة الأولى الظاهرة. اجعل الصورة الرئيسية تُحمَّل مبكرًا بأولوية عالية.
• خادم بطيء: استخدم التخزين المؤقت للصفحات، وشبكة توصيل محتوى (CDN) قريبة من جمهورك.
• ملفات تمنع العرض: ملفات CSS وجافاسكريبت كبيرة يجب تحميلها قبل ظهور أي شيء.

عندما يكون INP ضعيفًا

• جافاسكريبت ثقيل: مهام طويلة تشغل المتصفح فلا يستطيع الاستجابة للنقر. قسّم المهام الطويلة، وأزل الكود غير المستخدم.
• إضافات وسكربتات خارجية كثيرة: أدوات الدردشة والتتبع والإعلانات. راجعها واحتفظ بالضروري فقط، وأجّل تحميل ما لا يلزم فورًا.

عندما يكون CLS مرتفعًا

• صور بلا أبعاد محددة: حدد العرض والارتفاع أو نسبة العرض إلى الارتفاع، ليحجز المتصفح المساحة مسبقًا.
• إعلانات ولافتات تظهر فجأة: احجز لها مكانًا ثابتًا، ولا تدفع المحتوى الموجود إلى الأسفل.
• الخطوط: تبديل الخط بعد تحميله قد يغير حجم النص. استخدم إعدادات عرض الخطوط المناسبة وحمّل الخطوط المهمة مبكرًا.

ماذا لو كان موقعك على ووردبريس؟

أنظمة إدارة المحتوى مثل ووردبريس تسهل بناء المواقع كثيرًا، لكن كل إضافة (Plugin) تُثبتها قد تضيف ملفات CSS وجافاسكريبت إلى كل الصفحات، حتى الصفحات التي لا تحتاجها. راجع الإضافات دوريًا، واحذف ما لا تستخدمه، واختر قالبًا خفيفًا، واستخدم إضافة تخزين مؤقت موثوقة. وقبل أي تحديث كبير أو تغيير في الإضافات، جرّب التغيير على نسخة تجريبية من الموقع، ثم قِس المؤشرات قبل النشر وبعده.

قائمة تدقيق تقني سريعة لأي موقع

1. كل الصفحات المهمة مفهرسة وتظهر في خريطة الموقع.
2. الموقع يعمل بـ HTTPS، والنسخ القديمة تحوّل إلى الجديدة بتحويل دائم.
3. الصفحات مريحة على الهاتف: نص مقروء، وأزرار كبيرة بما يكفي للمس، ولا تمرير أفقي.
4. الصور مضغوطة ولها أبعاد ونص بديل.
5. لا توجد روابط داخلية معطلة تؤدي إلى صفحات خطأ 404.
6. المؤشرات الثلاثة في النطاق الجيد على الهاتف أولًا.

التحسين التقني يكمل ما تعلمته في مقال كيف يعمل محرك بحث جوجل، ويخدم المحتوى الذي تخطط له في مقال بحث الكلمات المفتاحية. وبعد كل تحسين، قِس الأثر كما نشرح في مقال قياس نتائج التسويق الرقمي. وفي كورس التسويق الرقمي وتحسين محركات البحث في أكاديمية بدر التعليمية نجري تدقيقًا تقنيًا كاملًا لمواقع حقيقية. ولمصادر إضافية زر المكتبة التعليمية، أو جرّب أداة اكتشف مسارك.