Shopify تحسين سرعة المتجر: دليل كامل

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

لماذا تعد سرعة متجر Shopify مهمة بالنسبة للمبيعات

نشرت Google بحثًا يوضح أن التأخير بمقدار 100 مللي ثانية في تحميل الصفحة يمكن أن يؤدي إلى انخفاض بنسبة 1% في التحويلات. بالنسبة لمتجر يحقق إيرادات شهرية قدرها 50000 دولار، فهذا يعني خسارة 500 دولار لكل عُشر ثانية إضافية. تؤثر السرعة على أكثر من مجرد تجربة المستخدم؛ إنه عامل تصنيف أساسي لبحث Google.

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

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

كيفية قياس سرعة متجر Shopify الخاص بك

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

جوجل PageSpeed رؤى

ابدأ هنا. زيارةpagespeed.web.devوأدخل عنوان URL الخاص بمتجر Shopify. تقيس PageSpeed ​​Insights تجربة المستخدم في العالم الحقيقي (البيانات الميدانية) وأداء المختبر. يقوم بتعيين درجات من 0 إلى 100 ويحدد مشكلات محددة.

ركز على قسم "مؤشرات الويب الأساسية" أولاً. تؤثر هذه المقاييس الثلاثة بشكل مباشر على تجربة المستخدم وتصنيفات البحث. الدرجة التي تزيد عن 90 تعتبر ممتازة؛ فوق 50 مقبول؛ أقل من 50 يتطلب اتخاذ إجراءات فورية.

اختبر صفحتك الرئيسية وصفحة المنتج. غالبًا ما يتم تحميل الصفحات الرئيسية وصفحات المجموعة بشكل مختلف عن صفحات المنتجات الفردية بسبب عدد الصور والبرامج النصية للتطبيقات.

تقرير سرعة المتجر المدمج في Shopify

قم بتسجيل الدخول إلى مسؤول Shopify الخاص بك وانتقل إلى قنوات المبيعات > المتجر عبر الإنترنت > السمات. انقر فوق "فتح المظهر الحالي" وابحث عن "سرعة المتجر عبر الإنترنت". يعرض هذا التقرير اتجاهات الأداء ويحدد التطبيقات التي تؤدي إلى إبطاء متجرك.

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

GTmetrix وWebPageTest

يوفر كل من GTmetrix وWebPageTest مخططات انحدارية توضح تسلسل التحميل لكل مورد على صفحتك. إنها تكشف عن البرامج النصية التي تمنع العرض والأصول التي تهدر النطاق الترددي.

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

أكبر ستة أسباب لبطء متاجر Shopify

1. الصور غير المحسنة

تمثل الصور ما بين 50 إلى 70% من وزن صفحة متجر Shopify النموذجي. يمكن أن يصل حجم صورة المنتج غير المضغوطة من الكاميرا إلى 3-5 ميغابايت. التحميل مباشرة إلى Shopify بدون تحسين يقتل الأداء.

يقدم Shopify الصور تلقائيًا من خلال CDN الخاص به وينشئ متغيرات سريعة الاستجابة، لكنه لا يقوم بضغطها. لا تزال الصورة مقاس 4000 × 3000 بكسل المعروضة بعرض 500 بكسل تقوم بتحميل الدقة الكاملة، ثم يقوم المتصفح بتغيير حجمها.

تنسيقات الصور الحديثة مثل WebP أصغر بنسبة 25-35% من JPG وبجودة مماثلة. معظم التجار لا يستخدمونها. إلى جانب التحميل البطيء (الموضح أدناه)، غالبًا ما تكون الصور المحسنة أكبر فوز.

2. عدد كبير جدًا من تطبيقات الطرف الثالث (خاصة تلك التي تقوم بإدخال البرامج النصية)

متوسط ​​متجر Shopify يدير 20-30 تطبيقًا. يمكن لكل تطبيق إدخال JavaScript في واجهة متجرك. المزيد من البرامج النصية يعني تحميلًا أبطأ للصفحة، والمزيد من عمل وحدة المعالجة المركزية، ومقاييس أطول لمؤشرات أداء الويب الأساسية.

بعض التطبيقات لا يمكن تجنبها. معالجات الدفع، والتقاط البريد الإلكتروني، والمراجعات - هذه تضيف قيمة. لكن العديد من التجار يقومون بتثبيت التطبيقات دون التحقق مما إذا كان يتم استخدامها بالفعل أم لا.

أسوأ الجناة هي تطبيقات التسويق التي تتتبع سلوك المستخدم، وبرامج الولاء، وأدوات التخصيص المرئية. تقوم هذه بتنزيل حزم JavaScript الثقيلة في كل صفحة. يمكن لتطبيق مراجعة واحد سيئ الترميز أن يضيف 300 مللي ثانية إلى LCP (أكبر رسم محتوى).

3. المواضيع المتضخمة أو سيئة الترميز

موضوع Shopify الخاص بك هو الأساس. تجمع بعض السمات jQuery وأطر عمل CSS غير المستخدمة والمكتبات القديمة. قد يقوم موضوع عمره 10 سنوات بتحميل تبعيات لم تعد تخدم أي غرض.

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

مشكلات السمات الشائعة: الخطوط المخصصة غير المستخدمة، وصور base64 المضمنة في CSS، وإصدارات Bootstrap المتعددة، ومكتبات الأدوات المساعدة المكررة. قم بمراجعة كود السمة الخاصة بك لتحديد الوزن الميت.

4. حزم JavaScript كبيرة ونصوص برمجية لحظر العرض

تنفيذ جافا سكريبت مكلف. أثناء تشغيل JavaScript الخاص بموضوعك، لا يستطيع المتصفح رسم الصفحة. إذا كانت نصوصك البرمجية كبيرة أو سيئة التسلسل، فستبدو صفحتك مجمدة بالنسبة للزائرين.

غالبًا ما يتم تحميل البرامج النصية التابعة لجهات خارجية من التطبيقات بشكل متزامن، مما يعني أنها تحظر كل شيء آخر. يسمح مدير البرامج النصية الأصلي في Shopify بالتحميل غير المتزامن، لكن العديد من التطبيقات لا تتبع هذا النمط.

تقوم العديد من المتاجر بتحميل وحدات بكسل التتبع والتحليلات وأدوات الدردشة والبرامج النصية لتحسين التحويل قبل أن تصبح الصفحة تفاعلية. يمكن أن تضيف هذه 2-3 ثوانٍ إلى وقت التفاعل (TTI).

5. لا يوجد تحميل بطيء للصور الموجودة في الجزء السفلي من الصفحة

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

يؤدي التحميل البطيء إلى تأجيل تحميل الصور حتى يكون المستخدم على وشك التمرير إلى العرض. بالإضافة إلى تحسين الصورة، يمكن أن يؤدي ذلك إلى تقليل وقت التحميل الأولي للصفحة بنسبة 30-50%.

غالبًا ما تحتوي سمات Shopify التي تم إنشاؤها في السنوات الثلاث الماضية على ميزة التحميل البطيء المضمنة. أما السمات الأقدم فلا تحتوي على ذلك. إنه فوز سريع إذا كان موضوعك يدعمloading="lazy"سمة.

6. التخزين المؤقت لـ CDN مفقود أو تم تكوينه بشكل خاطئ

يقدم Shopify الصور من خلال CDN الخاص به عالميًا، وهو أمر ممتاز. ولكن من الممكن أن يتم تكوين رؤوس التخزين المؤقت وسياسات التخزين المؤقت للمتصفح بشكل خاطئ.

لا تقوم بعض المتاجر بتعيين رؤوس ذاكرة التخزين المؤقت على الأصول، مما يجبر المتصفحات على إعادة التحقق من صحة الملفات الثابتة أو إعادة تنزيلها في كل زيارة. يقوم البعض الآخر بتعيين عمر ذاكرة التخزين المؤقت قصيرًا جدًا (على سبيل المثال، يوم واحد بدلاً من 30 يومًا).

لن يظهر التخزين المؤقت الذي تم تكوينه بشكل خاطئ في PageSpeed ​​Insights، لكن الزائرين المتكررين يرون عقوبات على الأداء. تحقق من إعدادات ذاكرة التخزين المؤقت لموضوعك وتأكد من تكوين CDN الخاص بـ Shopify بشكل صحيح.

كيفية تسريع متجر Shopify الخاص بك – إصلاحات قابلة للتنفيذ

تحسين الصورة

ابدأ بمراجعة الصور المجمعة. قم بتنزيل صور المنتج الخاص بك وتشغيلهاtinypng.comأو إيماجوبتي. سترى مقدار الوزن الذي يمكن خفضه دون فقدان الجودة.

بالنسبة إلى Shopify، فإن أفضل الممارسات هي تحميل صور لا يزيد عرضها عن 2000-2500 بكسل. تقوم شبكة CDN الخاصة بـ Shopify بتغيير حجمها تلقائيًا للجوال وسطح المكتب. تجنب تحميل صور بحجم 6000 بكسل "في حالة حدوث ذلك".

فكر في استخدام تطبيق مخصص لتحسين الصور إذا كان لديك مئات المنتجات. تقوم تطبيقات مثل Crush.pics أو Image Optimizer بأتمتة الضغط عبر الكتالوج الخاص بك. غالبًا ما يدفعون ثمن أنفسهم من خلال مدخرات النطاق الترددي في غضون أسابيع.

تنفيذ التحميل البطيء للصور الموجودة في الجزء السفلي من الصفحة. معظم سمات Shopify الحديثة تدعم هذا محليًا. إذا لم يكن الأمر كذلك، قم بإضافةloading="lazy"سمة لصور المنتج في رمز الموضوع الخاص بك.

تدقيق التطبيق

قم بإدراج كل تطبيق قمت بتثبيته. راجع كل واحد واسأل: هل أستخدم هذا بنشاط؟ هل يخدم أهداف عملي؟

قم بإلغاء تثبيت أي شيء لا تستخدمه. بعد ذلك، بالنسبة لتطبيقاتك النشطة، تحقق من تأثيرها في تقرير السرعة الخاص بـ Shopify. عادةً ما تكون التطبيقات ذات التأثير على مستوى المللي ثانية (أقل من 50 مللي ثانية) جيدة. التطبيقات التي تضيف 200 مللي ثانية + تستحق إعادة النظر.

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

تحسين الموضوع

قم بمراجعة كود المظهر الخاص بك. يمكن لمعظم متاجر Shopify الوصول إلى ملفات السمات الخاصة بها من خلال Admin > Themes > Actions > Edit code. ابحث عن الانتفاخ:

• أطر عمل CSS أو مكتبات الأدوات المساعدة غير المستخدمة
• لا يتم عرض الخطوط المخصصة فعليًا على أي صفحة
• جافا سكريبت المضمنة التي يمكن تأجيلها
• إصدارات متعددة من نفس المكتبة (jQuery، Bootstrap، إلخ.)
• عمليات تعبئة متعددة قديمة للمتصفحات القديمة التي لم تعد تدعمها

إذا كان القالب الخاص بك أقدم من 3 سنوات، ففكر في الترقية إلى قالب Shopify حديث. تم تصميم السمات الجديدة مع أخذ الأداء في الاعتبار واستخدام معايير الويب الحالية. التكلفة تستحق العناء إذا كان موضوعك الحالي يبطئ المبيعات.

جافا سكريبت وCSS

قم بتأجيل جافا سكريبت غير الهامة. يتيح لك محرر البرنامج النصي الخاص بـ Shopify وضع علامة على البرامج النصية على أنها غير متزامنة أو مؤجلة. وهذا يمنعهم من منع طلاء الصفحة.

تصغير ملفات CSS ودمجها حيثما أمكن ذلك. تعني ملفات CSS المتعددة طلبات HTTP متعددة. معظم منشئي القوالب الحديثة يقومون بذلك بالفعل، لكن القوالب المخصصة في بعض الأحيان لا تفعل ذلك.

إزالة CSS غير المستخدمة. يمكن لأدوات مثل PurgeCSS تحديد قواعد CSS التي لم يتم تطبيقها مطلقًا على صفحتك وإزالتها. هذا وحده يمكن أن يقلل حجم حزمة CSS بنسبة 40-60%.

تحميل كسول

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

أضف سمة HTML:<img src="..." loading="lazy">. وتتعامل المتصفحات الحديثة مع الباقي تلقائيًا. بالنسبة للصور الموجودة في الأقسام المخصصة، قد تحتاج إلى مكتبة جافا سكريبت للتحميل البطيء مثلlozad.js.

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

CDN والتخزين المؤقت

تحقق من أن CDN الخاص بـ Shopify نشط لصورك. في مسؤول Shopify الخاص بك، يجب تقديم جميع الصور منcdn.shopify.com. إذا رأيت عناوين URL للمجال المخصص، فقد يكون تكوينك قديمًا.

قم بتعيين رؤوس ذاكرة التخزين المؤقت في ملف التكوين الخاص بموضوعك. تكون توصيات Shopify عادةً 30 يومًا للأصول ذات الإصدار، ويومًا واحدًا لـ CSS/JS، و5 دقائق لـ HTML. وهذا يضمن تحميل الزائرين المتكررين من ذاكرة التخزين المؤقت بدلاً من إعادة التنزيل.

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

Shopify مؤشرات الويب الأساسية: شرح LCP وCLS وINP

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

LCP (أكبر طلاء محتوى)يقيس الوقت حتى تدخل أكبر كتلة نصية أو صورة إلى إطار العرض. الهدف: أقل من 2.5 ثانية. تظهر معظم مشكلات البطء في Shopify كضعف LCP. تعمل الصور غير المحسنة والبرامج النصية التي تحظر العرض وموارد الطرف الثالث البطيئة على توسيع LCP.

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

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

عادةً ما تعاني متاجر Shopify أكثر من غيرها مع LCP (عادةً الصور أو التطبيقات البطيئة)، تليها CLS (تحول التخطيط من المحتوى البطيء التحميل). لتحسين الثلاثة: تحسين الصور أولاً (أكبر تأثير لـ LCP)، وحجز مساحة للمحتوى الديناميكي (إصلاح CLS)، ومراجعة وقت تنفيذ JavaScript (تحسين INP).

متى يتم توظيف مطور Shopify لتحسين السرعة

يمكنك تحسين الكثير بنفسك. لكن بعض المشاكل تتطلب خبرة المطورين. فيما يلي ثلاث علامات تشير إلى أن الوقت قد حان لطلب المساعدة:

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

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

أنت تدفع آلاف الإعلانات شهريًا وكل تحويل مهم.على نطاق واسع، يمكن للتحسين لمدة 0.5 ثانية أن يعني آلاف الإيرادات الإضافية. يحقق تحسين الأداء الذاتي 80% من المكاسب. الـ 20% الأخيرة تتطلب هندسة أداء احترافية.

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

الأسئلة المتداولة

هل يؤثر موضوع Shopify على سرعة الصفحة؟

نعم، بشكل ملحوظ. يمثل المظهر الخاص بك ما بين 30 إلى 60% من وقت تحميل الصفحة اعتمادًا على القالب الذي تستخدمه ومدى تخصيصه. يتم تحميل المظهر الحديث المشفر جيدًا خلال 1-2 ثانية. قد يستغرق المظهر المتضخم القديم من 3 إلى 4 ثوانٍ قبل إضافة التطبيقات أو الصور. إذا كان عمرك أقل من 50 عامًا على PageSpeed ​​وتم تحسين تطبيقاتك، فمن المحتمل أن يكون موضوعك هو المشكلة.

كم عدد تطبيقات Shopify كثيرة جدًا؟

ليس هناك رقم سحري. تعمل معظم المتاجر بشكل جيد مع ما بين 15 إلى 25 تطبيقًا. يعتمد التأثير على ما تفعله التطبيقات وكيفية ترميزها. يمكن أن يؤدي تطبيق واحد سيئ الترميز إلى الإضرار بأكثر من خمسة تطبيقات محسّنة بشكل جيد. التدقيق حسب تأثير الأداء، وليس العد - استخدم تقرير سرعة Shopify لمعرفة التطبيقات التي تضيف أكبر عدد من المللي ثانية.

هل ستؤدي إزالة التطبيقات إلى تحسين درجاتي على الفور؟

عادة نعم، ولكن ليس دائما بشكل واضح. قد لا تعرض PageSpeed ​​Insights قفزة بمقدار 10 نقاط بعد إزالة تطبيق واحد. لكن زوار موقعك الفعليين سيشعرون بالفرق. يتم عرض الصفحات بشكل أسرع، وتستجيب الأزرار بشكل أسرع، ويرى المستخدمون أن متجرك أكثر حداثة. امنحها فترة تتراوح بين 24 و48 ساعة بعد إزالة التطبيقات قبل إعادة تشغيل الاختبارات.

ما هو أسرع قالب Shopify مجاني؟

يعد موضوع Dawn الرسمي الخاص بـ Shopify دائمًا من بين الأسرع. إنه خفيف الوزن، ومبني على معايير الويب الحالية، ويسجل 85+ على PageSpeed ​​لمعظم المتاجر. تشمل السمات المجانية السريعة الأخرى Prestige وRefresh. أسرع سمة لا تتوافق مع علامتك التجارية هي عديمة الفائدة - اختر سمة تناسب أهداف التصميم الخاصة بك، ثم قم بتحسينها.

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