تسريع متجر Shopify: ما الذي تتحكم فيه وما الذي لا تتحكم فيه

لتسريع متجر Shopify (شوبيفاي)، ابدأ بالفصل بين ما تتحكم فيه Shopify وما تتحكم فيه أنت. تدير Shopify الخوادم وشبكة توصيل المحتوى (CDN) والتخزين المؤقت، فلا تنطبق عليك نصائح الاستضافة. وما يبطّئ معظم المتاجر يقع في جانبك: التطبيقات، وقالب ثقيل، وصور كبيرة، وخطوط إضافية، وسكربتات من أطراف خارجية. قِس أولاً، ثم أزل أكبر عنصر مكلف قبل أن تلمس أي شيء آخر.

ما الذي تتحكم فيه Shopify وما الذي تتحكم فيه أنت؟

تصف وثائق المطوّرين لدى Shopify جانب المنصة: شبكة CDN مدعومة بـ Cloudflare، وضغط Brotli أو gzip، وبروتوكولا HTTP/3 وTLS 1.3، وصور مخزّنة مؤقتاً على خوادم حول العالم. لا تستطيع ضبط ذلك، ولا تحتاج إلى ذلك.

صفحة الدفع مختلفة: تخصّصها في محرر الدفع والحسابات (checkout and accounts editor) وعبر التطبيقات، لا بتعديل شيفرة القالب. ويغطي هذا الدليل الصفحة الرئيسية والمجموعات والمنتجات.

كيف تقيس سرعة متجر Shopify؟

استخدم أداتين، وتوقّع أن تختلفا قليلاً.

تقارير أداء الويب في Shopify (web performance reports) تعرض Core Web Vitals من زوار حقيقيين. يوجد ملخص ضمن Online Store ثم Themes، وتجد التقارير كاملة ضمن Analytics ثم Reports، بحسب التاريخ والصفحة ونوع الصفحة والجهاز. وتضع المخططات علامات على تثبيت التطبيقات وتحديثات القالب والشيفرة الجديدة، فتستطيع ربط تغيير ما بانخفاض في الدرجة. وتتأخر البيانات حتى 36 ساعة، وتغطي 90 يوماً، وتتطلب صلاحية الموظف Reports، وتتطلب وجود زوار: فالمتجر في الوضع الخاص (private mode) ليس له درجات.

PageSpeed Insights يعطي بيانات ميدانية (field data) من مستخدمي Chrome الحقيقيين على مدى 28 يوماً، إضافة إلى بيانات مخبرية (lab data) من تشغيل محاكى واحد. لا تتضمن البيانات المخبرية INP، وقد لا تتوفر بيانات ميدانية لمتجر صغير. استخدم التشغيل المخبري لاكتشاف الأسباب، والبيانات الميدانية للحكم على النتائج.

يعرّف web.dev المقاييس الثلاثة: LCP (التحميل) وINP (الاستجابة) وCLS (الثبات البصري). ويشرحها دليلنا عن تسريع WooCommerce ببساطة، وتنطبق هنا أيضاً نصائحه عن الصور والخطوط والسكربتات. اختبر الصفحات التي تدرّ المال، على هاتف، واحفظ الأرقام أولاً.

كيف تبطّئ التطبيقات متجر Shopify، وكيف تزيل تطبيقاً بشكل نظيف؟

نصيحة Shopify في الأداء هي الاحتفاظ فقط بالتطبيقات التي تخلق قيمة تعوّض تكلفتها، وإزالة الباقي. والإزالة ليست نظيفة دائماً: تقول Shopify إن بعض التطبيقات تضيف شيفرة إلى القالب لا تُزال عند إلغاء التثبيت. أما التطبيقات التي تستخدم app blocks وapp embeds فيمكن تشغيلها وإيقافها في محرر القوالب.

1. اسرد تطبيقاتك ضمن Settings ثم Apps: ما يفعله كل تطبيق وتكلفته وهل يستخدمه أحد.
2. اعرف التاريخ. تُظهر علامات الأحداث في التقارير متى ثُبّتت التطبيقات. وانخفاض الدرجة بعد ذلك خيط يستحق التتبع، وليس دليلاً قاطعاً.
3. اختبر في نسخة. كرّر القالب، وافتح App embeds في الشريط الجانبي للمحرر، وأوقف عناصر التضمين واحداً تلو الآخر وقِس.
4. اسأل المطوّر عن خطوات التنظيف قبل إلغاء التثبيت (Settings ثم Apps ثم Get support).
5. ألغِ التثبيت من قائمة التطبيق. تقول Shopify إن الرسوم المتكررة المستقبلية للتطبيق المدفوع تتوقف، لكن قد تدين بالدورة الحالية، والرسوم التي تُفوتَر خارج Shopify يلزم إلغاؤها لدى المطوّر.
6. ابحث في نسخة القالب ضمن Edit code عن اسم التطبيق ونطاق مطوّره. أزل فقط المراجع إلى التطبيقات التي ألغيت تثبيتها، واحذف ملف المقطع (snippet) مع السطر الذي يستدعيه، ثم عاين.
7. انشر النسخة بعد التأكد من أن صفحتي السلة والمنتج تعملان، واحتفظ بالقالب القديم نسخة احتياطية.

ويتناول دليلنا عن أفضل تطبيقات Shopify اختيار البدائل.

هل يجعل قالبك المتجر أبطأ؟

قد يفعل. توصي Shopify بقالب محدّث ومحسّن، وتقول إن عائلة قوالبها المجانية Horizon وقوالب Online Store 2.0 محسّنة لأداء الويب. وتقول أيضاً إن الحركات المتحركة (animations) وانتقالات الصفحات وكثرة الأقسام قد تبطّئ الصفحات. وتُظهر بيانات أداء القوالب لديها كيف تؤدي القوالب الشائعة في متاجر حقيقية، وتشير إلى أن التطبيقات ومديري الوسوم والتخصيصات تؤثر في الدرجة أيضاً.

يشترط متجر القوالب متوسط درجة أداء في Lighthouse لا تقل عن 60. وهذا حد أدنى، لذا اختبر القالب بمنتجاتك أنت. أزل الأقسام غير المستخدمة، وجرّب إيقاف الحركات، واقرأ كيف تختار قالب Shopify قبل التبديل، فالإعدادات لا تنتقل معك.

ماذا تفعل بشأن الصور والخطوط والتحميل الكسول؟

الصور. تقول إرشادات Shopify للصور إن الصور لا تُضغط عند الرفع، لذا حدّد مقاساتها بنفسك: 2048 في 2048 بكسل يُعرض عادةً بأفضل صورة لصور المنتجات المربعة، ونصيحتها في الأداء هي JPEG للصور الفوتوغرافية وPNG للرسومات ذات الشفافية. اعرض عدداً أقل من الصور عالية الجودة في الصفحة، وتجنب الفيديو الضخم أو الذي يعمل تلقائياً، كما يقول دليل Shopify لسرعة المواقع. وتقدّم شبكة CDN في Shopify صيغتي WebP أو AVIF حيث تدعمهما المتصفحات.

التحميل الكسول (lazy loading). حمّل كسولاً الصور التي تقع أسفل الشاشة الأولى فقط. ولا تحمّل كسولاً أبداً صورة LCP المحتملة، مثل البانر الرئيسي. أعطها fetchpriority="high" وحدّد عرض الصور وارتفاعها حتى لا تقفز الصفحة، كما ينصح web.dev. والقوالب التي تستخدم فلتر image_tag من Shopify تحصل على مقاسات متجاوبة تلقائياً.

الخطوط. توصي Shopify بـخطوط النظام، فلا تحتاج إلى تنزيل؛ غيّر الخطوط ضمن Theme settings ثم Typography. وللخطوط المخصصة، يقترح web.dev صيغة WOFF2 وأقل عدد ممكن من الملفات وتحميلاً مسبقاً (preload) للأهم فقط. والخط العربي المنفصل ملف إضافي، فافحص ما تطلبه صفحاتك العربية.

كيف تؤثر سكربتات الأطراف الخارجية ومديرو الوسوم في السرعة؟

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

تشغّل أحداث العملاء (customer events) في Shopify بكسلات التتبع داخل بيئة معزولة (sandbox) دون تعديل شيفرة القالب، مع أن Shopify لا تدعم البكسلات المخصصة. أزل مقاطع منع الوميض الخاصة باختبارات A/B عندما لا يكون أي اختبار قيد التشغيل، وتجنب التطبيقات التي تتلاعب بنتائج Lighthouse: تحذّر إرشادات Shopify للمطوّرين منها.

ما عادات صفحات المنتج والمجموعة التي تساعد؟

كل أداة إضافية في صفحة المنتج هي شيفرة: التقييمات والعروض الإضافية والنوافذ المنبثقة والأشرطة الثابتة. احتفظ بما يستحق مكانه، واحجز مساحة لمحتوى التطبيقات حتى لا يتغير التخطيط (web.dev عن CLS). وتقول Shopify أن تقسّم المجموعات الكبيرة إلى صفحات (pagination) كي يُحمَّل عدد أقل من المنتجات في وقت واحد. وإذا كانت الصفحات تبدأ ببطء، يستطيع مطوّر تحليل أداء القالب بأداة Theme Inspector for Chrome من Shopify.

ترتيب مُرتّب الأولويات لتسريع Shopify

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

الأسئلة الشائعة

ما درجة PageSpeed الجيدة لمتجر Shopify؟

لا تطارد الدرجة 100. اجتياز مقاييس Core Web Vitals الثلاثة للزوار الحقيقيين أهم، وتُحتسب صفحتا المنتج والمجموعة لديك أكثر من درجة مخبرية مثالية للصفحة الرئيسية.

لماذا تختلف تقارير Shopify عن PageSpeed Insights؟

تستخدم تقارير Shopify زواراً حقيقيين ضمن نطاق التواريخ الخاص بها. أما PageSpeed Insights فتجمع 28 يوماً من البيانات الميدانية مع تشغيل محاكى واحد. قارن الاتجاهات لا الأرقام المنفردة.

هل تعني شبكة CDN في Shopify أنني أستطيع تجاهل تحسين الصور؟

لا. تختار الشبكة الصيغة وتخزّن الصور مؤقتاً حول العالم، لكن Shopify تقول إن الصور لا تُضغط عند الرفع، وعدد ما تعرضه منها خيارك.

هل سيجعل تغيير القالب المتجر أسرع؟

فقط إذا كان القالب هو السبب. أبقِ عاداتك نفسها مع التطبيقات والسكربتات وسيتباطأ القالب الجديد بالطريقة نفسها.

الخطوات التالية

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