سرعة الموقع Core Web Vitals شوبيفاي: ما تقيسه وما يمكنك إصلاحه
دليل سرعة الموقع Core Web Vitals شوبيفاي: معنى LCP و CLS و INP للمتاجر، القياس عبر Search Console و Lighthouse، الإصلاحات التي تحرك الأرقام، وما لا يمكنك تغييره.
الكاتب: موسى الحلو · نُشر · 6 دقائق قراءة
سرعة الموقع Core Web Vitals شوبيفاي تُقاس بثلاثة أرقام يعتمدها Google من زيارات المستخدمين الحقيقيين: LCP لسرعة ظهور أكبر عنصر مرئي، INP لسرعة استجابة الصفحة للنقر، و CLS لثبات التصميم أثناء التحميل. في متاجر Shopify، معظم المشاكل تأتي من صور البطل غير المحسّنة، والتطبيقات التي تحقن سكربتات في كل صفحة، والعناصر التي تقفز أثناء التحميل. هذا الدليل يشرح ما تعنيه المقاييس للمتجر، كيف تقيسها بشكل صحيح، والإصلاحات التي تحرك الأرقام فعلاً، وما لا يمكنك تغييره في Shopify.
ما هي Core Web Vitals ولماذا تهم المتجر؟
Core Web Vitals هي مجموعة مقاييس من Google لتجربة الصفحة الفعلية، وليست درجة تقنية مجردة. لكل مقياس عتبة جيدة موثقة:
| المقياس | ما يقيسه | جيد | يحتاج تحسين | ضعيف |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | الوقت حتى ظهور أكبر عنصر مرئي (غالباً صورة البطل أو صورة المنتج) | حتى 2.5 ث | 2.5 إلى 4 ث | أكثر من 4 ث |
| INP (Interaction to Next Paint) | التأخير بين نقر المستخدم واستجابة الصفحة بصرياً | حتى 200 مللي ث | 200 إلى 500 | أكثر من 500 |
| CLS (Cumulative Layout Shift) | مقدار قفز العناصر أثناء التحميل | حتى 0.1 | 0.1 إلى 0.25 | أكثر من 0.25 |
لماذا يهم المتجر؟ لأن العميل في الخليج يتصفح من الجوال غالباً، وعلى شبكة متغيرة، وإذا تأخرت صورة المنتج أو قفز زر الإضافة للسلة لحظة الضغط، فالنتيجة طلب ضائع. Google يستخدم هذه المقاييس كإشارة ترتيب ضمن تجربة الصفحة، لكن أثرها على معدل التحويل أكبر وأسرع من أثرها على الترتيب.
كيف تقيس بشكل صحيح: بيانات حقيقية مقابل اختبار معملي
هناك مصدران مختلفان، والخلط بينهما سبب معظم الجدل حول السرعة:
تقرير Core Web Vitals في Search Console: يعتمد على بيانات مستخدمين حقيقيين (تقرير تجربة المستخدم في Chrome) خلال 28 يوماً، مجمّعة حسب مجموعات الصفحات. هذا ما يعتمده Google، وهو المرجع الذي تحكم به على متجرك. إعداد Search Console نفسه شرحناه في Google Search Console للمتاجر الإلكترونية.
Lighthouse و PageSpeed Insights: اختبار معملي لصفحة واحدة في بيئة محاكاة. مفيد للتشخيص لأنه يخبرك ما الذي يبطئ الصفحة، لكن درجته من 100 ليست ما يراه Google في الترتيب، وتتغير مع كل تشغيل.
القاعدة: احكم بـ Search Console، وشخّص بـ Lighthouse. ولا تطارد درجة 100 في Lighthouse، فمتاجر كثيرة ناجحة تعمل بدرجات متوسطة في الاختبار المعملي وبيانات حقيقية جيدة.
أسباب ضعف LCP في متاجر شوبيفاي وإصلاحها
LCP هو المقياس الأكثر شيوعاً في الفشل. في المتاجر، أكبر عنصر هو غالباً صورة البطل في الصفحة الرئيسية أو صورة المنتج الأولى. الإصلاحات بترتيب الأثر:
- حجم الصورة وصيغتها: ارفع صور البطل بأبعاد مناسبة للجوال، ودع Shopify يقدمها بصيغ حديثة عبر معاملات الصور في القالب. صورة بطل بحجم 3 ميغابايت هي أول ما نجده في أي تدقيق.
- التحميل الكسول في المكان الخطأ: صورة البطل يجب ألا تُحمّل كسولاً (lazy)؛ العكس صحيح للصور أسفل الصفحة. بعض القوالب تطبق lazy على كل شيء.
- السلايدر في أعلى الصفحة: عدة صور وسكربت تحريك يؤخران أكبر عنصر. صورة ثابتة واحدة مع نص واضح تحوّل أفضل في الغالب وتظهر أسرع.
- الخطوط: خطوط عربية مخصصة ثقيلة تؤخر النص. استخدم خطاً واحداً أو اثنين وحمّلهما مسبقاً.
- السكربتات المحجوبة: تطبيقات تحقن سكربتات في رأس الصفحة قبل المحتوى. هذا الموضوع يستحق مقاله الخاص: تطبيقات شوبيفاي التي تبطئ المتجر.
INP: لماذا تتأخر استجابة النقر؟
INP حلّ محل FID عام 2024، ويقيس كل التفاعلات لا الأول فقط. في المتاجر يظهر التأخير عند فتح القائمة، تغيير متغير المنتج، أو الضغط على إضافة للسلة. الأسباب الشائعة:
- تطبيقات كثيرة تعمل في الخلفية (تقييمات، نوافذ منبثقة، دردشة، تتبع متعدد) تتنافس على الخيط الرئيسي للمتصفح.
- سكربتات قالب ثقيلة لتأثيرات بصرية.
- بكسلات تتبع مكررة (بكسل من القناة الرسمية وآخر يدوي).
الإصلاح يبدأ بجرد التطبيقات: احذف ما لا يستخدمه المتجر، وتأكد أن التطبيقات المحذوفة لم تترك كوداً في القالب. ثم راجع التتبع حتى لا يكون مكرراً.
CLS: العناصر التي تقفز
CLS يحدث عندما يُدفع المحتوى أثناء التحميل: شريط إعلان يظهر فوق الصفحة، صور بلا أبعاد محددة، شارة تقييمات تُحقن بعد تحميل الصفحة، أو خط يتبدل بعد ظهوره. الإصلاحات:
- حدد العرض والارتفاع لكل صورة في القالب حتى يحجز المتصفح مساحتها.
- احجز ارتفاعاً ثابتاً لشرائط الإعلانات والعناصر الديناميكية مثل التقييمات والعدادات.
- تجنب النوافذ المنبثقة التي تدفع المحتوى بدل أن تطفو فوقه.
- اضبط الخطوط بحيث لا يتبدل مقاس النص بعد التحميل.
ما لا يمكنك تغييره في شوبيفاي
جزء من الصراحة مع التاجر هو توضيح الحدود:
- البنية التحتية وشبكة التوزيع: Shopify يديرها عالمياً ولا تتحكم بالخوادم.
- صفحة الدفع: محسّنة ومقفلة في معظم الخطط. لا تُهدر وقتاً على قياسها.
- سكربتات Shopify الأساسية: تُحمّل في كل متجر ولا تُحذف.
- درجة Lighthouse المثالية: غير واقعية مع تطبيقات التقييمات والدردشة والتتبع التي يحتاجها المتجر فعلاً.
ما تتحكم به هو القالب، الصور، التطبيقات، والخطوط. وهذا كافٍ لنقل معظم المتاجر من ضعيف إلى جيد. الدليل الأوسع في تسريع متجر شوبيفاي.
ملاحظة خاصة بالمتاجر العربية: الخطوط والاتجاه
المتاجر العربية تواجه سببين إضافيين لضعف المقاييس لا يظهران في المتاجر الإنجليزية. الأول هو الخطوط: الخط العربي المخصص أثقل حجماً من نظيره اللاتيني غالباً، وتحميل ثلاثة أوزان منه يؤخر ظهور النص ويسبب تبديلاً مرئياً بعد التحميل يرفع CLS. الحل هو الاكتفاء بوزنين على الأكثر، وتحميل الخط الأساسي مسبقاً، وضبط سلوك الإظهار بحيث يُعرض النص بخط النظام ثم يُستبدل دون تغيير في الأبعاد.
السبب الثاني هو القوالب التي حُوّلت إلى الاتجاه من اليمين إلى اليسار بطبقة CSS إضافية فوق القالب الأصلي. هذه الطبقة تُحمّل بعد الأنماط الأساسية، فيُرسم التصميم مرتين ويقفز المحتوى. اختر قالباً يدعم RTL أصلاً أو ادمج تعديلات الاتجاه في ملف الأنماط الرئيسي بدل طبقة منفصلة.
خطة عمل في أسبوع
| اليوم | المهمة |
|---|---|
| 1 | افتح تقرير Core Web Vitals في Search Console وحدد مجموعات الصفحات الضعيفة على الجوال |
| 2 | شغّل Lighthouse على صفحة من كل مجموعة وسجّل أكبر عنصر والسكربتات المحجوبة |
| 3 | أعد ضغط ورفع صور البطل وصور المنتجات الأولى |
| 4 | جرد التطبيقات: احذف غير المستخدم، ونظّف بقايا الكود في القالب |
| 5 | حدد أبعاد الصور واحجز مساحات العناصر الديناميكية |
| 6 | راجع التتبع: بكسل واحد لكل منصة، لا تكرار |
| 7 | أعد القياس وسجّل معدل التحويل من الجوال كخط أساس للمقارنة بعد 28 يوماً |
من واقع تجربتنا
في متجر Xmart للإلكترونيات في الأردن، وهو متجر بآلاف المنتجات، أجرينا تدقيق أداء لقالب Xtra وإصلاحات سرعة ضمن إدارتنا للحساب، لأن إعلانات بعائد مرتفع تخسر قيمتها إذا وصل العميل إلى صفحة بطيئة. السرعة هناك لم تكن مشروعاً منفصلاً بل جزءاً من حماية عائد الإعلانات وتحويل الجوال. التفاصيل في دراسة حالة Xmart. وفي كل تدقيق تحويل نجريه عبر خدمة تحسين معدل التحويل، سرعة الجوال بند ثابت إلى جانب صفحة المنتج والسلة والدفع.
الخلاصة
سرعة الموقع Core Web Vitals شوبيفاي ليست سباقاً نحو درجة 100، بل ثلاثة أرقام من مستخدمين حقيقيين: LCP و INP و CLS. أصلح صور البطل، قلّل التطبيقات، احجز مساحات العناصر، ونظّف التتبع، ثم قس الأثر على معدل التحويل من الجوال في Search Console بعد 28 يوماً. هذا يكمل أساسيات SEO لمتاجر شوبيفاي من جهة تجربة الصفحة.
أرسل لنا رابط متجرك عبر واتساب ونرسل لك قراءة لتقرير Core Web Vitals مع أول ثلاثة إصلاحات تستحق وقتك.
تريد تطبيق هذا على متجرك؟
فريق E-SAFQA يبني ويدير متاجر Shopify ويشغّل إعلاناتها. راسلنا على واتساب واحصل على تدقيق مجاني.
أسئلة شائعة
ما هي العتبات الجيدة لـ Core Web Vitals؟
وفق توثيق Google: LCP حتى 2.5 ثانية، INP حتى 200 مللي ثانية، CLS حتى 0.1، مقاسة عند النسبة المئوية 75 من زيارات المستخدمين الحقيقيين.
لماذا يختلف تقييم Lighthouse عن تقرير Search Console؟
Lighthouse يختبر الصفحة في بيئة محاكاة واحدة، بينما Search Console يجمع بيانات المستخدمين الحقيقيين عبر أجهزتهم وشبكاتهم خلال 28 يوماً. التقرير الثاني هو ما يعتمده Google.
هل تؤثر Core Web Vitals على ترتيب متجري في Google؟
هي إشارة ترتيب ضمن تجربة الصفحة، لكن أثرها على الترتيب أصغر من أثر المحتوى والروابط. أثرها الأكبر على معدل التحويل من الجوال.
هل يمكنني تحسين سرعة صفحة الدفع في شوبيفاي؟
صفحة الدفع تُدار من Shopify ولا تُعدّل في معظم الخطط، وهي محسّنة أصلاً. ركّز جهدك على الصفحة الرئيسية وصفحات التصنيفات والمنتجات.