تحسين سرعة Shopify: القالب والتطبيقات والصور

الاستضافة في Shopify واحدة لكل المتاجر، لذا تعتمد السرعة على قالبك وتطبيقاتك وصورك. كيف تقيسها وما الذي تصلحه أولًا.

بقلم Denis Veisllari

كل متاجر Shopify تعمل على الخوادم نفسها وشبكة CDN نفسها، لذا فالمتجر البطيء بطيء بسبب ما يحمّله: القالب، وسكربتات التطبيقات، والصور، والفيديو. تحسين السرعة في Shopify يعني حذف هذه العناصر أو تصغيرها، لا تغيير الاستضافة. وفي معظم المتاجر تأتي أكبر المكاسب من حذف شيفرة التطبيقات غير المستخدمة، وضغط صورة الواجهة الرئيسية، وتأخير تحميل الأدوات.

يوضح هذا الدليل كيف تقيس السرعة بشكل صحيح، ثم يمر على الإصلاحات بالترتيب الذي يؤتي ثماره عادة. وهو جزء من دليل SEO لمتاجر Shopify.

قِس الصفحات الصحيحة

اختبر صفحة منتج وصفحة مجموعة، لا الصفحة الرئيسية فقط. فهذه هي الصفحات التي تتصدر والتي يصل إليها المشترون.

  • Google PageSpeed Insights تعطي درجات مختبرية لتحميل واحد، وإن كان لمتجرك عدد كافٍ من الزوار، تعطي مؤشرات Core Web Vitals الحقيقية من مستخدمي Chrome خلال آخر 28 يومًا. أرقام المستخدمين الحقيقيين هي التي تعتمدها Google.
  • تقرير Core Web Vitals في Search Console يجمع عناوينك حسب الحالة، لترى إن كانت كل صفحات المنتجات تشترك في مشكلة واحدة.
  • تقرير أداء الويب في Shopify ضمن Analytics يعرض مقاييس المستخدمين الحقيقيين نفسها عبر الزمن، وهذا مفيد للتحقق مما إذا كان تغيير ما قد ساعد.

ركّز على مؤشرات Core Web Vitals الثلاثة: Largest Contentful Paint (سرعة ظهور الصورة أو النص الرئيسي)، وInteraction to Next Paint (سرعة استجابة الصفحة للنقر)، وCumulative Layout Shift (مقدار قفز العناصر في الصفحة). الدرجات المختبرية تتأرجح من اختبار لآخر، فلا تلاحق درجة 100 مثالية.

1. احذف شيفرة التطبيقات التي لا تستخدمها

التطبيقات هي السبب الأكثر شيوعًا لبطء متجر Shopify. فكل تطبيق يمسّ واجهة المتجر قد يضيف JavaScript وCSS إلى كل صفحة.

  • اكتب قائمة بالتطبيقات لديك. ألغِ تثبيت أي تطبيق لم تعد تستخدمه.
  • إلغاء التثبيت لا يحذف دائمًا الشيفرة التي أضافها التطبيق إلى القالب. ابحث في ملفات قالبك (Online Store > Themes > Edit code) عن اسم التطبيق واحذف المقتطفات ووسوم السكربت المتبقية.
  • فضّل التطبيقات التي تستخدم امتدادات القالب (theme app extensions)، أي كتل التطبيقات التي تضيفها في محرر القالب. فهي تُحذف بنظافة عند إلغاء التثبيت ولا تُحمَّل إلا حيث تضعها.
  • وللتطبيقات التي تبقيها، تحقق مما إذا كانت تُحمَّل في كل صفحة. جدول المقاسات لا يحتاجه إلا صفحات المنتجات.

2. أصلح أكبر صورة

في معظم صفحات المنتجات والمجموعات، أكبر عنصر هو صورة منتج أو لافتة الواجهة الرئيسية. اجعلها سريعة:

  • ارفع ملفات معقولة. غيّر حجم الصور إلى عرض يتراوح بين 2,000 و2,500 بكسل تقريبًا قبل الرفع واضغطها. تقدّم شبكة CDN في Shopify نسخًا بأحجام مناسبة وصيغًا حديثة مثل WebP تلقائيًا، لكن الملف الأصلي الضخم ما زال يكلّف وقتًا.
  • لا تؤخر تحميل الصورة الأولى. الصور أعلى الصفحة يجب أن تُحمَّل فورًا. التحميل الكسول (lazy loading) للصور الموجودة في الأسفل.
  • استخدم صورًا متجاوبة. القوالب الحديثة تستخدم فلتري image_url وimage_tag في Shopify لتقديم الحجم المناسب لكل شاشة. وقد تقدّم القوالب القديمة حجمًا كبيرًا واحدًا لكل الأجهزة.
  • تجنب الفيديو الذي يعمل تلقائيًا في الواجهة الرئيسية. إن احتجت إلى فيديو، فاعرض صورة غلاف أولًا وحمّل الفيديو بعدها.

3. حمّل الأدوات لاحقًا

المراجعات وفقاعات المحادثة والنوافذ المنبثقة وشرائح البيع الإضافي وخلاصات وسائل التواصل نادرًا ما تحتاج إلى التحميل قبل المنتج.

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

4. استخدم قالبًا حديثًا

القوالب المبنية لـ Online Store 2.0، ومنها قوالب Shopify المجانية المبنية على Dawn، مصممة حول كتل التطبيقات والصور المتجاوبة وJavaScript أخف. أما قالب من سنوات عدة فيه شرائح عرض ثقيلة وjQuery فقد يبقى بطيئًا مهما حذفت منه.

قبل التبديل، اختبر صفحة المنتج التجريبية للقالب الجديد في PageSpeed Insights. القالب البطيء في عرضه التجريبي سيكون بطيئًا مع منتجاتك أيضًا.

5. أوقف قفز التخطيط

المحتوى الذي يقفز أثناء تحميل الصفحة يضر بمؤشر Cumulative Layout Shift ويزعج المشترين.

  • حدّد عرض الصور وارتفاعها (يضيفهما فلتر image_tag في Shopify).
  • احجز مساحة للافتات وأشرطة الإعلانات التي تظهر بعد التحميل.
  • حمّل الخطوط المخصصة مع font-display: swap وقلّل عدد الأوزان.

ما لا يساعد كثيرًا

  • تطبيقات التسريع. معظمها يضيف سكربتًا خاصًا به إلى الصفحة. حذف الشيفرة أفضل من إضافتها.
  • تغيير الاستضافة أو شبكة CDN. في Shopify لا يمكنك ذلك، ولا تحتاج إليه.
  • تصغير بضعة كيلوبايتات من CSS. نادرًا ما يحرّك مقاييس المستخدمين الحقيقيين مقارنة بحذف تطبيق أو إصلاح الصورة الرئيسية.

حافظ على السرعة

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

أسئلة شائعة

هل تؤثر سرعة Shopify في SEO؟ نعم، قليلًا. مؤشرات Core Web Vitals إشارة ترتيب، لكن المحتوى والملاءمة أهم. والسرعة أهم للمبيعات: فالمشترون يغادرون صفحات المنتجات البطيئة.

ما درجة السرعة الجيدة في Shopify؟ استهدف تقييم "Good" لمؤشرات Core Web Vitals في بيانات المستخدمين الحقيقيين (Largest Contentful Paint أقل من 2.5 ثانية، وInteraction to Next Paint أقل من 200 ميلي ثانية، وCumulative Layout Shift أقل من 0.1). الدرجة المختبرية من 100 مرشد، لا هدف.

لماذا متجري على Shopify بطيء على الهاتف؟ للهواتف معالجات واتصالات أبطأ، لذا يضر JavaScript الثقيل من التطبيقات أكثر بكثير هناك. اختبر على الهاتف أولًا.