تحسين أداء متجرك الإلكتروني
يتكون متجرك الإلكتروني من مجموعة من الميزات، مثل رمز القالب، والتطبيقات، والصور، ومقاطع الفيديو، وعناصر العرض الدوارة، وموجزات وسائل التواصل الاجتماعي، والتحليلات. يمكن لهذه الميزات تحسين تجربة الزائر وتوسيع إمكانيات موقعك.
ومع ذلك، يمكن أن تؤثر كل ميزة تضيفها إلى متجرك الإلكتروني على أداء متجرك. فقد تؤدي بعض الميزات إلى إبطاء موقعك أو إحداث سلوكيات غير متوقعة يمكن أن تؤثر على تجربة المستخدم.
يركز أداء الويب على تحسين تجربة المستخدم. يركز أداء الويب حاليًا على ثلاثة مجالات رئيسية تنعكس أيضًا في مؤشرات أداء الويب الأساسية:
- سرعة التحميل، والتي تُقاس بمؤشر Largest Contentful Paint (LCP)
- استقرار التخطيط، والذي يُقاس بمؤشر Cumulative Layout Shift (CLS)
- الاستجابة لتفاعل المستخدم، والتي تُقاس بمؤشر Interaction to Next Paint (INP)
تحسين أداء الويب يعني زيادة احتمالية بقاء عملائك في موقعك وإجراء تحويلات.
في هذه الصفحة
التحسينات لمتجرك الإلكتروني
يحتوي متجرك الإلكتروني على ميزة تحسين الويب المدمجة فيه. تم دمج تحسين الويب أيضًا في أي ميزات جديدة. لست بحاجة إلى القيام بأي إجراء خاص للاستفادة من الميزات التالية:
- تتم استضافة متجرك الإلكتروني على خوادم عالمية سريعة ولا تفرض أي قيود على النطاق الترددي لمتجرك. يمكنك التحقق من حالة متجر Shopify الخاص بك على Shopify Status.
- يحتوي متجرك الإلكتروني على شبكة توصيل محتوى (CDN) تديرها Cloudflare وتضمن تحميل متجرك الإلكتروني بسرعة في جميع أنحاء العالم. يمكنك التحقق من حالة شبكة CDN في صفحة حالة Cloudflare.
- للحفاظ على سرعة أوقات التحميل، يتم تحسين الصور تلقائيًا باستخدام شبكة CDN للصور. بالاقتران مع رمز القالب الخاص بك، يمكن لشبكة CDN للصور تقديم أفضل تنسيق للصور والذي تم تغيير حجمه وضغطه أيضًا للحفاظ على أحجام الملفات صغيرة.
العوامل التي تؤثر على أداء الويب
بالنسبة إلى متاجر Shopify، تعتبر العوامل التالية هي الأكثر تأثيرًا على أداء الويب:
- قالب متجرك الإلكتروني
- التطبيقات التي ثبّتها
- أي رمز إضافي لجهة خارجية أضفته يدويًا إلى متجرك، بما في ذلك برامج إدارة الإشارات والإشارات الموجودة بداخلها
وهذا يعني أنه يجب عليك التركيز على ما يلي لتحسين أداء الويب الخاص بك:
- استخدم قالبًا مُحدّثًا ومُحسّنًا. جميع قوالب عائلة قوالب Horizon، وقوالب المتجر الإلكتروني 2.0 من Shopify مجانية ومُحسّنة لأداء الويب. بالإضافة إلى ذلك، تم تحسين العديد من القوالب الأخرى التابعة لجهات خارجية لتعزيز أداء الويب. يمكنك مراجعة أحدث بيانات أداء القوالب.
- إذا كان قالبك يوفر انتقالات بين الصفحات أو رسومًا متحركة أخرى، فقارن أداء الويب قبل تنشيطها وبعده. يمكن للرسوم المتحركة إبطاء الصفحات.
- تجنب إضافة عدد كبير جدًا من الأقسام إلى قوالب الصفحات في قالبك. يمكن أن تؤدي الأعداد الكبيرة من الأقسام في الصفحات إلى تقليل أداء الويب.
- إذا كانت لديك مجموعات تحتوي على كميات كبيرة من المنتجات، ففكر في تفعيل ترقيم الصفحات للحد من عدد المنتجات التي يتم تحميلها في وقت واحد.
- قم بتقييم التطبيقات المثبتة ورمز الجهات الخارجية للتأكد من أنها توفر قيمة كافية لتعويض أي خسائر محتملة في الأداء.
- قم بمراجعة برنامج إدارة الإشارات الخاص بك لإزالة أي إشارات غير مستخدمة أو ذات قيمة منخفضة. تعرّف على المزيد حول أفضل الممارسات للإشارات وبرامج إدارة الإشارات.
أدوات الاختبار
يمكنك استخدام الأدوات التالية لفحص أداء متجرك الإلكتروني:
- تقارير أداء الويب: تستخدم تقارير أداء الويب من Shopify مؤشرات أداء الويب الأساسية لقياس تجربة المستخدمين الفعليين في متجرك الإلكتروني.
- أداة PageSpeed Insights: يمكنك تشغيل تقاريرك الخاصة باستخدام أداة PageSpeed Insights من Google لعرض مقاييس أكثر تفصيلاً للصفحات الموجودة في متجرك.
فهم توصيات الأداء من الجهات الخارجية
قد تقترح أدوات فحص الأداء التابعة لجهات خارجية إجراء تغييرات لتحسين سرعة متجرك. ومع ذلك، فإن العديد من هذه التوصيات تم تنفيذها بالفعل بواسطة Shopify أو لا تنطبق على متاجر Shopify.
التحسينات المضمّنة بالفعل في Shopify
يشتمل متجر Shopify الخاص بك تلقائيًا على تحسينات الأداء التالية:
شبكة توصيل المحتوى (CDN): توفر Shopify شبكة CDN ذات مستوى عالمي بدون أي رسوم إضافية، مما يضمن أداءً عالميًا سريعًا. يتم تقديم جميع الأصول باستخدام HTTP/2، مما يقلل من العبء مقارنة بالبروتوكولات القديمة.
التخزين المؤقت للمتصفح: تحدد Shopify التخزين المؤقت للمتصفح للموارد القابلة للتخزين المؤقت بعام واحد، وهو أقصى مدة ممكنة. وهذا يعني أن الزوار المتكررين لمتجرك سيستمتعون بأوقات تحميل أسرع.
ضغط Gzip: تستخدم Shopify ضغط gzip على ملفات CSS وJavaScript والمستندات والصفحات لتقليل النطاق الترددي وتحسين أوقات التحميل. تم تمكين Keep-alive أيضًا لاسترجاع ملفات متعددة.
تحسين الصور: تقوم Shopify تلقائيًا بضغط صور JPG باستخدام خوارزميات متقدمة، مما يوازن بين الضغط والجاذبية المرئية. غالبًا ما يتم تقديم الصور بتنسيق WebP للحصول على ضغط أفضل وتحميل أسرع.
تصغير الملفات: تقوم Shopify تلقائيًا بتصغير ملفات CSS وJavaScript عند طلبها بواسطة واجهة متجرك، مما يقلل من أحجام الملفات دون التأثير على الوظائف.
عندما لا تنطبق توصيات الجهات الخارجية
قد تقترح أدوات الفحص التابعة لجهات خارجية تغييرات لا تتعلق بمتاجر Shopify:
- إعدادات مستوى الخادم: إن التوصيات المتعلقة بإعداد الخادم، أو رؤوس HTTP، أو سياسات التخزين المؤقت تم تحسينها بالفعل من خلال البنية التحتية لـ Shopify.
- تنفيذ شبكة CDN: تعتبر الاقتراحات الخاصة بإضافة شبكة CDN غير ضرورية لأن Shopify تتضمن شبكة CDN عالية الأداء بشكل افتراضي.
- إعدادات الضغط: تم تنفيذ التوصيات المتعلقة بتمكين الضغط بالفعل عبر منصة Shopify.
العمل بالتوصيات ذات الصلة
ركز على التوصيات التي تتعلق بمحتوى متجرك وميزاته المحددة:
- تحسين الصور: تأكد من أن الصور التي تم تحميلها بحجم مناسب واستخدم التنسيقات الموصى بها.
- تقييم التطبيقات: فكر فيما إذا كانت التطبيقات المثبتة توفر قيمة كافية لتعويض أي تأثير على الأداء.
- تحسين القالب: اختر قوالب محسّنة للأداء وقلل من عدد الأقسام في قوالب الصفحات.
استكشاف أخطاء بطء تحميل الصفحات وإصلاحها
إذا كان متجرك يستغرق وقتًا طويلاً في التحميل، فاتبع هذه الخطوات لتحديد المشكلة وحلها:
الخطوة 1: التحقق من المشكلة
- اختبر سرعة تحميل متجرك بنفسك من أجهزة واتصالات إنترنت مختلفة.
- اطلب من آخرين اختبار متجرك للتأكد من أنها ليست مشكلة محلية في اتصالك بالإنترنت.
- استخدم أدوات الاختبار مثل PageSpeed Insights للحصول على مقاييس أداء محددة.
الخطوة 2: تحديد السبب
التحقق من التطبيقات الزائدة: كثرة التطبيقات التي تحمّل الأصول على واجهة متجرك يمكن أن تبطئ الأداء. راجع تطبيقاتك المثبتة وأزل أي تطبيق غير ضروري للمبيعات.
مراجعة الصور الكبيرة: الصفحات التي تحتوي على العديد من الصور عالية الجودة قد يتم تحميلها ببطء. حسّن صورك أو قلل من العدد المعروض. تعرف على المزيد حول أحجام الصور الموصى بها.
تحديد البرامج النصية البطيئة: إذا توقف موقعك كصفحة بيضاء قبل التحميل دفعة واحدة، فاستخدم أدوات المطور في متصفحك لتحديد البرامج النصية بطيئة التحميل. تواصل مع مطوّر التطبيق أو القالب لحل المشكلة.
الخطوة 3: اتخاذ إجراء
إزالة التطبيقات غير الضرورية: لا يؤدي إلغاء تثبيت أحد التطبيقات إلى إزالة الكود الخاص به تلقائيًا من قالبك. قد تحتاج إلى التواصل مع مطور التطبيق للحصول على تعليمات الإزالة الكاملة.
تحسين الصور: استخدم تنسيقات الملفات المناسبة (JPG للصور الفوتوغرافية، وPNG للرسومات ذات الخلفيات الشفافة) وقم بتغيير حجم الصور لتتناسب مع حجم عرضها.
تقييم أداء القالب: فكر في التبديل إلى قالب محسّن للأداء إذا كان قالبك الحالي يتسبب في بطء كبير.
الحصول على الدعم المتعلق بأداء المتجر الإلكتروني
إذا كنت تستخدم قالبًا مجانيًا من Shopify، فقد يتمكن فريق دعم Shopify من مساعدتك في تحسينات الأداء الأساسية.
إذا كنت تستخدم قالبًا من جهة خارجية وتحتاج إلى مساعدة، فيجب عليك التواصل مع مطوّر القالب، أو توظيف خبير أداء ويب على Shopify، أو توظيف شريك Shopify لتحسين أداء وسرعة الموقع. تعرف على المزيد حول توظيف شريك Shopify.
إذا كانت مشكلة الأداء لديك ناتجة عن أحد التطبيقات، فيمكنك التواصل مع مطوّر التطبيق.
إذا كان لديك فريق تطوير أو شريك وكالة، فيمكنك أيضًا التواصل معهم للحصول على مزيد من المساعدة.
المعلومات الفنية والموارد الخاصة باستكشاف الأخطاء وإصلاحها
إذا كنت مطورًا يسعى لتحسين أداء واجهة متجر Shopify أو قوالبها أو تطبيقاتها، فيمكنك مراجعة الموارد التالية لكل مقياس من مقاييس Core Web Vitals. تعرف على المزيد حول أفضل ممارسات الأداء لقوالب Shopify.
سرعة التحميل
يقيس Largest Contentful Paint (LCP) سرعة التحميل، بناءً على مدى سرعة ظهور أكبر عنصر على الشاشة. يعد Time to first byte (TTFB) و first contentful paint (FCP) مقاييس مساعدة تساعدك على فهم مصدر السبب الجذري للمشكلة بشكل أفضل. يمكنك التعرف على المزيد حول تصحيح الأخطاء للبحث عن الأسباب الشائعة لبطء التحميل في واجهات متاجر Liquid على Shopify.
الاستقرار البصري
يقيس Cumulative Layout Shift (CLS) الاستقرار البصري، بناءً على مقدار تحرك المحتوى بشكل غير متوقع أثناء التحميل. للتعمق في تصحيح أخطاء CLS، اقرأ كيفية تحسين Cumulative Layout Shift (CLS) على مواقع Shopify.
التفاعل
يقيس Interaction to Next Paint (INP) التفاعل بناءً على الوقت الذي تستغرقه الصفحة لتصبح مستجيبة لمعظم إجراءات المستخدم. على سبيل المثال، إجراءات المستخدم مثل النقر فوق رابط أو زر.
إذا كنت تعاني من ضعف INP، فمن المحتمل أن يكون لديك الكثير من تعليمات JavaScript البرمجية في متجرك، سواء كانت من كود القالب، أو كود التطبيقات، أو أكواد جهات خارجية/مدير العلامات (tag manager). اعمل على تنظيف أكثر العناصر تسببًا في المشاكل. تعرف على المزيد حول 3 طرق للعثور على أكثر ملفات JavaScript المسببة لمشاكل تحميل الصفحة. إذا كنت لا تزال تواجه مشكلات مع INP، فتعرف على المزيد باستخدام الموارد المتوفرة على web.dev.