الموقع البطيء يكلفك مرتين: يغادر الزوار قبل أن يروا عرضك، ويقلّ سبب محركات البحث لإظهارك. تقيس جوجل تجربة الصفحة الفعلية بثلاثة مؤشرات تسمى مؤشرات الويب الأساسية (Core Web Vitals). يشرح هذا الدليل معناها وكيفية قياسها وأي الإصلاحات تحدث الفرق الأكبر عادةً.
أهم النقاط
- تقيس المؤشرات التحميل (LCP) والاستجابة (INP) وثبات التخطيط (CLS).
- القيم الجيدة عند جوجل: LCP بحد أقصى 2.5 ثانية، وINP بحد أقصى 200 مللي ثانية، وCLS بحد أقصى 0.1، عند النسبة المئوية 75 من الزيارات الفعلية.
- الصور وجافاسكربت والاستضافة أكثر أسباب بطء الصفحات شيوعاً.
- السرعة جزء من تجربة المستخدم؛ تفيد التحويلات كما تفيد تحسين محركات البحث.
ما المؤشرات الثلاثة؟
أكبر عنصر مرئي (LCP): التحميل
هو الوقت الذي يستغرقه ظهور أكبر عنصر مرئي، وغالباً صورة رئيسية أو عنوان. القيمة الجيدة 2.5 ثانية أو أقل. وهو أكثر المؤشرات تأثراً بحجم الصور وسرعة الخادم والموارد المعطّلة للعرض.
الاستجابة للتفاعل (INP): سرعة الرد
يقيس مدى سرعة استجابة الصفحة عندما ينقر المستخدم أو يلمس أو يكتب. القيمة الجيدة 200 مللي ثانية أو أقل. والسبب المعتاد للنتائج الضعيفة جافاسكربت ثقيلة تعمل على الخيط الرئيسي.
ثبات التخطيط (CLS): عدم القفز
يقيس الحركة غير المتوقعة للمحتوى أثناء التحميل، كزر يقفز لحظة لمسك له. القيمة الجيدة 0.1 أو أقل. وسببه غالباً صور بلا أبعاد، وخطوط تتأخر في التحميل، وإعلانات أو شرائط تُدرج فوق المحتوى.
كيف تقيس
- PageSpeed Insights يعرض بيانات المختبر (Lighthouse) وبيانات المستخدمين الفعليين في Chrome عند توفرها.
- Google Search Console فيه تقرير لمؤشرات الويب الأساسية يصنّف روابطك إلى جيد ويحتاج تحسيناً وضعيف.
- Lighthouse في أدوات مطوري Chrome يساعدك في تجربة التغييرات محلياً. اختبر بإعدادات الجوال لأن أغلب المشكلات تظهر هناك.
البيانات الميدانية من الزوار الفعليين هي ما تعتمد عليه جوجل؛ أما اختبارات المختبر فلإيجاد المشكلات وإصلاحها.
الإصلاحات الأكثر تأثيراً
1. حسّن الصور
الصور عادةً أكبر الملفات في الصفحة. غيّر مقاسها لتطابق حجم عرضها، واضغطها، واستخدم صيغاً حديثة مثل WebP أو AVIF. أضف عرضاً وارتفاعاً صريحين ليحجز المتصفح المساحة، وأجّل تحميل الصور أسفل الشاشة، ولا تؤجل الصورة الرئيسية في أعلى الصفحة.
2. قلّل جافاسكربت
كل سكربت يجب تنزيله وتحليله وتنفيذه. احذف المكتبات غير اللازمة، وقسّم الشيفرة بحيث تحمّل كل صفحة ما تستخدمه فقط، وأجّل سكربتات الأطراف الثالثة مثل أدوات المحادثة والتحليل إلى ما بعد جاهزية الصفحة. والصفحات الثابتة أو المولَّدة على الخادم بأقل شيفرة على العميل هي الأسرع للمواقع التسويقية، ولهذا نبني صفحاتنا بهذه الطريقة.
3. استضافة جيدة وشبكة توزيع محتوى
الاستجابة الأولى السريعة تسهّل كل المؤشرات الأخرى. استضف قرب زوارك أو خلف شبكة توزيع محتوى (CDN)، وفعّل HTTP/2 أو HTTP/3 والضغط (Brotli أو gzip)، واحفظ الملفات الثابتة مؤقتاً لمدة طويلة بأسماء ملفات مرقّمة الإصدار.
4. تعامل مع الخطوط بعناية
استخدم أوزان الخطوط التي تحتاجها فقط، وقدّمها من نطاقك أو حمّلها مسبقاً، واستخدم font-display: swap ليظهر النص فوراً. وللمواقع ثنائية اللغة، حمّل الخط العربي في الصفحات العربية فقط.
5. امنع قفز التخطيط
أعطِ الصور والفيديوهات والمحتوى المضمّن أبعاداً ثابتة أو نسبة أبعاد، واحجز مساحة للشرائط والإعلانات، ولا تدرج محتوى فوق ما يقرأه المستخدم.
6. أبقِ قاعدة البيانات والإضافات خفيفة
في مواقع أنظمة إدارة المحتوى، من الأسباب المتكررة الاستعلامات البطيئة وكثرة الإضافات. احذف الإضافات غير المستخدمة، وفعّل التخزين المؤقت للصفحات، وحدّث البرمجيات.
شخّص الصفحة البطيئة خطوة بخطوة
لا تخمّن، اتبع الدليل. شغّل PageSpeed Insights على تبويب الجوال واقرأ البيانات الميدانية أولاً. إن كان LCP ضعيفاً فافتح التشخيصات وحدد عنصر LCP، وهو غالباً صورة أو عنوان كبير. تحقق من حجم ملفه، وهل أُجّل تحميله بالخطأ، وهل يعطّله شيء كملف تنسيق ثقيل أو سكربت في رأس الصفحة. وإن كان INP ضعيفاً فسجّل أداء الصفحة في أدوات مطوري Chrome أثناء لمس العنصر البطيء وابحث عن المهام الطويلة. وإن كان CLS ضعيفاً ففعّل إبراز تغيّر التخطيط وانظر أي العناصر تقفز. أصلح سبباً واحداً في كل مرة وأعد الاختبار لتعرف ما نجح.
سكربتات الأطراف الثالثة: التكلفة الخفية
أدوات المحادثة ومديرو الوسوم وخرائط الحرارة والمحتوى المضمّن من وسائل التواصل وبكسلات الإعلانات، كل منها يضيف طلبات شبكة وعملاً على الخيط الرئيسي، ولا تتحكم أنت في شيفرتها. راجعها دورياً: احذف ما لا يستخدمه أحد، وحمّل الباقي بعد أن تصبح الصفحة تفاعلية، وفضّل البدائل الخفيفة. وللفيديو اعرض صورة مصغرة وحمّل المشغّل عند النقر فقط. وللخرائط استخدم صورة ثابتة حتى يتفاعل الزائر. هذه التعديلات الصغيرة تحسّن INP وLCP غالباً أكثر من أي ترقية للخادم.
حدّد ميزانية للأداء
ميزانية الأداء حدّ تتفق على ألا تتجاوزه، مثل أقصى حجم للصور في الصفحة أو أقصى كمية لجافاسكربت. حين يجب أن تتسع كل ميزة جديدة ضمن الميزانية، تتحول السرعة من مشروع لمرة واحدة إلى عادة. دوّن الحدود، وافحصها قبل كل إصدار، وارفض الإضافات التي تخرقها ما لم يُحذف شيء آخر.
لماذا الصفحات الثابتة والمولَّدة على الخادم سريعة؟
حين تُجهَّز الصفحة مسبقاً وتُقدَّم من شبكة توزيع محتوى، يستلم المتصفح HTML جاهزاً فوراً ولا يحتاج إلا إلى قدر قليل من جافاسكربت لعرضه. أما العرض على جهة العميل فيرسل صفحة شبه فارغة ويبني المحتوى في المتصفح، فيتأخر LCP ويستهلك معالجاً أكثر في الهواتف. وللمواقع التسويقية والمدونات وصفحات الخدمات، يكون HTML المولَّد مسبقاً مع سكربتات صغيرة موجّهة للتفاعل غالباً أفضل توازن بين السرعة وتحسين محركات البحث والبساطة. ويمكن للميزات الديناميكية كلوحات التحكم والسلال أن تحمّل شيفرتها حيث تلزم فقط.
نصائح لاختبار الجوال في الأردن والمنطقة
- اختبر على هاتف أندرويد متوسط المواصفات، وليس على حاسوب سريع فقط، فكثير من الزوار يستخدمون أجهزة كهذه.
- أبطئ الشبكة في أدوات المطورين إلى نمط جوال أبطأ لترى ما يعيشه الزائر المعتاد.
- اختبر الصفحات العربية على حدة، فالخطوط والتخطيط من اليمين إلى اليسار قد يؤثران في التحميل والثبات.
- افحص الصفحات بعد تحميل شرائط الموافقة وأدوات المحادثة لأنها كثيراً ما تسبب قفزات.
السرعة والتحويلات
السرعة ليست عامل ترتيب فحسب. الصفحة التي تستجيب بسرعة تبدو أكثر احترافية، وتقلل التخلي عنها على الجوال، وتسهّل إكمال النماذج والدفع. تعامل مع الأداء كجزء من منتجك، وأعد الاختبار بعد كل تغيير مهم.
مكاسب سريعة تنجزها في يوم واحد
- حوّل أكبر صورك إلى WebP وغيّر مقاسها إلى الأبعاد التي تُعرض بها.
- أضف العرض والارتفاع لكل صورة وفيديو حتى لا يقفز التخطيط.
- احذف أي إضافة أو سكربت أو وزن خط لا يستخدمه شيء.
- حمّل الصورة الرئيسية والخط الأساسي مسبقاً، وأجّل تحميل كل ما هو أسفل الشاشة.
- فعّل الضغط والتخزين المؤقت طويل الأمد للملفات الثابتة عند مزوّد الاستضافة أو شبكة توزيع المحتوى.
- انقل أدوات المحادثة والتحليل وما شابهها لتُحمَّل بعد أن تصبح الصفحة قابلة للاستخدام.
- أعد الاختبار على الجوال وسجّل الأرقام قبل وبعد لترى ما حققه كل تغيير.
تختلف النتائج الفعلية من موقع إلى آخر، ولذلك يهم تسجيل الأرقام. وإن لم يفد تغيير ما فتراجع عنه وجرّب التالي بدل تكديس التخمينات.
مدخل إلى مراقبة الأداء باستمرار
الأداء ليس اختباراً لمرة واحدة؛ فالسكربتات الجديدة والصور المرفوعة والإضافات المحدّثة تغيّره دون أن تشعر. راقب بيانات الزوار الفعليين في Search Console، وضع في رزنامتك مراجعة شهرية قصيرة، وسجّل عند كل تحديث كبير أرقام المؤشرات الثلاثة قبل النشر وبعده. وإن لاحظت تراجعاً فابحث عن آخر تغيير سبقه، فغالباً يكون السبب واضحاً. ومن المفيد أن يتحمل شخص واحد مسؤولية الأداء في الفريق ليبقى الاهتمام مستمراً.
روتين بسيط للأداء
- اختبر صفحاتك الرئيسية على الجوال عبر PageSpeed Insights.
- أصلح أكبر مشكلة أولاً، وغالباً الصور أو جافاسكربت.
- أعد الاختبار وكرر.
- راجع تقرير Search Console شهرياً.
- اختبر بعد إضافة أي سكربت أو إضافة أو صورة كبيرة.
الأسئلة الشائعة
هل مؤشرات الويب الأساسية عامل ترتيب؟
نعم، تستخدم جوجل إشارات تجربة الصفحة، ومنها مؤشرات الويب الأساسية، في الترتيب. وهي عامل من عوامل كثيرة، وتبقى ملاءمة المحتوى الأهم، لكن التجربة السيئة قد تعطّل صفحة جيدة.
ما الدرجة الجيدة في PageSpeed؟
الدرجة تقدير مخبري؛ الهدف الحقيقي اجتياز عتبات المؤشرات الثلاثة للمستخدمين الفعليين. الدرجة العالية مؤشر مفيد وليست الهدف بحد ذاتها.
لماذا يبطؤ موقعي على الجوال فقط؟
للهواتف قدرة معالجة أقل واتصالات أبطأ غالباً، فتتضرر أكثر من الصور الكبيرة وجافاسكربت الثقيلة. اختبر دائماً بإعدادات الجوال.
هل أستطيع الإصلاح بنفسي؟
ضغط الصور وحذف الإضافات غير المستخدمة في متناول أغلب أصحاب المواقع. أما المشكلات الأعمق في الشيفرة والبنية فتحتاج غالباً إلى مطور.
كم مرة يجب أن أختبر السرعة؟
اختبر صفحاتك الرئيسية بعد كل تغيير مهم، وراجع تقرير Search Console شهرياً على الأقل، فالسكربتات والإضافات والصور الجديدة قد تبطّئ الموقع بصمت.
هل تجعل شبكة توزيع المحتوى الموقع سريعاً وحدها؟
تساعد في زمن التوصيل، لكنها لا تصلح الصور الكبيرة أو جافاسكربت الثقيلة أو شيفرة الخادم البطيئة. استخدمها مع بقية الإصلاحات في هذا الدليل.
الخطوة التالية
هل تريد معرفة أداء موقعك؟ اطلع على خدمتي تطوير المواقع والاستضافة وDevOps، أو اطلب مراجعة للسرعة.
هذا المقال لم يعد متاحاً. العودة إلى المدونة
