دليل Shopify تحسين السرعة

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

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

يمكن أن يؤدي التحسين لمدة ثانية واحدة في سرعة الموقع إلى + 8000 دولار في الإيرادات لهذا الموقع.

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

ما هي تحسينات سرعة الموقع Shopify لديك بالفعل؟

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

بعد إنشاء موقع Shopify جديد ، ستجد أنه يجب تنفيذ ميزات الأداء التالية بالفعل:

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

كيفية تحسين Shopify سرعة الموقع:

باتباع هذه الخطوات ، يمكنك تسريع موقع Shopify بشكل كبير:

• اختر سمة Shopify خفيفة الوزن
• تقليل أحجام الصور الكبيرة
• ضغط الصور
• استبدل صور GIF بصور ثابتة
• تحميل صور كسول
• تقييد تطبيقات JavaScript و Shopify الخاصة بطرف ثالث
• ترحيل رموز التعقب إلى Google Tag Manager
• قم بتشغيل متجرك من خلال Google PageSpeed ​​Insights

1. اختر سمة Shopify خفيفة الوزن (البيانات الأصلية)

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

لإعطائك فكرة عن بعض السمات ذات الأداء الأفضل ، اختبرنا أكثر من 200 قالب متوفرة في متجر Shopify Theme وقمنا بتسجيل معيار First Contentful Paint (FCP) و Time To Interactive (TTI) من Google PageSpeed ​​Insights. يمكنك العثور أدناه على السمات الأفضل أداءً التي حددتها اختباراتنا:

1. إنشاء سمة (1.1 FCP ، 7.8 TTI)
2. موضوع اللعبة (1.1 FCP ، 7.7 TTI)
3. سمة دافئة (1.9 FCP ، 7.8 TTI)
4. سمة خفيفة (1.1 FCP ، 7.8 TTI)
5. موضوع في الهواء الطلق (1.1 FCP ، 8.1 TTI)

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

2. تقليل أحجام الصور الكبيرة

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

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

تستخدم هذه الصفحة 173 طلب صور بحجم إجمالي 14 ميجا بايت في أصول الصور

كذلك ، يمكن للصور غير المحسّنة أن تجعل صفحة موقعك أثقل. غالبًا ما يتم تحميل الصور بأحجام أكبر بكثير من "حجم عرضها". هذا هو الحجم الذي يراه المستخدمون بالفعل في المتصفح:

تحتوي هذه الصفحة على حجم فعلي يبلغ ضعف حجم العرض تقريبًا

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

يمكنك العثور على صور أكبر في صفحة معينة باستخدام Chrome DevTools. ما عليك سوى النقر بزر الماوس الأيمن وتحديد "فحص". انتقل إلى علامة التبويب "الشبكة" وقم بتحديث الصفحة. سيُظهر لك هذا جميع الموارد المستخدمة لتحميل صفحتك. يمكنك بعد ذلك الفرز حسب "الحجم" للعثور على أكبر الأصول.

إذا رأيت أي صور كبيرة (100+ كيلوبايت) ، فابحث عن تلك الصورة على صفحتك وانقر مرة أخرى بزر الماوس الأيمن واختر "فحص". سيظهر لك التمرير فوق رابط الصورة حجم التجسيد مقارنة بالحجم الفعلي (الجوهري).

3. ضغط الصور

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

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

عندما يتعلق الأمر بضغط الصور ، فإننا نفضل استخدام مزيج من هاتين الطريقتين:

• Shopify التطبيقات: ستقوم بعض التطبيقات بضغط الصور تلقائيًا عند التحميل. لقد كانت لدينا تجارب جيدة مع Crush.pics.
• Optimizilla: يتيح لك ذلك ضغط أصول الصور الكبيرة يدويًا قبل تحميلها على موقعك.

4. استبدال صور GIF بالصور الثابتة

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

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

تبلغ مساحة أصل GIF الفردي 2.8 ميجا بايت

لقد رأينا حالات حيث يمثل استخدام صورتين أو ثلاث صور GIF أكثر من 10 ميغا بايت من صفحة واحدة. تضيف هذه الملفات إلى وزن الصفحة بشكل كبير لذا نوصي بمحاولة استبدالها بصور ثابتة حيثما أمكن ذلك. يمكن أن يؤدي هذا إلى توفير كبير في الموارد وتحسين Shopify تحسين السرعة.

5. تحميل الصور كسول

عند تشغيل قائمة مواقع Shopify الخاصة بنا من خلال PageSpeed ​​Insights ، كانت إحدى التوصيات الأكثر شيوعًا التي وجدناها هي "تأجيل الصور خارج الشاشة". هذا مؤشر على أنه يتم تحميل جميع أصول صور الموقع مرة واحدة:

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

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

6. الحد من تطبيقات JavaScript و Shopify الخاصة بطرف ثالث

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

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

ومع ذلك ، تذكر أن هذه الإضافات تأتي بتكلفة الأداء.

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

مثال لمتجر Shopify الذي يستخدم عددًا كبيرًا من أكواد تتبع الطرف الثالث

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

1. كم مرة نستخدم هذه الميزة بالفعل؟
2. هل هذا "ضروري" أم "ممتع"؟
3. هل يوجد خيار أخف وزن يمكننا استخدامه؟
4. هل الفائدة التي نحصل عليها من هذا تستحق مقايضة الأداء؟
5. هل هناك أي مقاييس يمكننا الرجوع إليها لمعرفة عدد مرات استخدام المستخدمين لهذه الميزة؟

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

لست متأكدا من أين تبدأ؟ في ما يلي بعض أكواد الطرف الثالث التي وجدناها Shopify تستخدم المتاجر التي تميل إلى إحداث تأثيرات أكبر على الأداء:

• لاكي أورانج
• سومو
• خفير
• زين ديسك
• المغزى
• باي بال
• كلافيو
• الملكة
• يوتبو

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

7. ترحيل رموز التتبع إلى Google Tag Manager

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

1. أضف Google Tag Manager إلى متجر Shopify الخاص بك
2. انتقل إلى العلامات> جديد وابحث عن العلامات المضمنة في "أنواع العلامات" التي تستخدمها في Shopify.
3. نفِّذ هذه العلامات في برنامج إدارة العلامات من Google
4. إذا لم تجد أي علامة مضمنة ، يمكنك اختيار "HTML مخصص" وإضافة علامتك
5. ضبط الزناد الخاص بك بشكل صحيح. في كثير من الأحيان يتم تعيين هذا على "جميع الصفحات"
6. انشر تغييرات Google Tag Manager
7. انتقل مرة أخرى إلى Shopify وقم بإزالة أي تطبيقات أضفتها عبر Google Tag Manager
8. انتقل إلى متجرك واختبر أن علاماتك الجديدة تعمل بشكل صحيح. يمكنك القيام بذلك باستخدام وضع "معاينة" في برنامج إدارة العلامات من Google

ضع في اعتبارك نقل وحدات البكسل للتتبع مثل Google Analytics و Hotjar و Facebook ورموز الجهات الخارجية الأخرى إلى Google Tag Manager.

8. قم بتشغيل متجرك من خلال Google PageSpeed ​​Insights

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

يمكنك استعادة كمية لا بأس بها من البيانات ويمكن أن تكون مربكة إلى حد ما. دعونا نناقش نقاط البيانات الرئيسية التي ننظر إليها:

• First Contentful Paint: المدة التي يستغرقها عرض الجزء الأول من المحتوى. هذا مهم لتوضيح للمستخدم أن المحتوى بدأ في التحميل.
• وقت التفاعل: الوقت الذي تستغرقه الصفحة لتصبح تفاعلية لأول مرة مع المستخدم.

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

Shopify اختبارات أداء المتجر (البيانات الأصلية)

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

المنهجية:

لجمع هذه البيانات ، قمنا بقياس أداء الصفحة الرئيسية لأكثر من 400 موقع Shopify. قمنا بجمع نقاط البيانات مثل First Contentful Paint و Time to Interactive و حجم الصفحة وحجم الصورة وإجمالي الطلبات. جميع بيانات الأداء للنسخة المحمولة من الموقع. ثم قمنا بمقارنة 20٪ من الصفحات العلوية والسفلية بناءً على درجة Google PageSpeed.

أفضل 20٪:

• أول رسم مضمون: 2.78 ثانية
• وقت التفاعل: 8.98 ثانية
• إجمالي حجم الصفحة: 2.01 ميجا بايت
• إجمالي أصول الصورة: 1.11 ميجا بايت
• الطلبات: 72

متوسط:

• أول رسم مضمون: 3.8 ثانية
• وقت التفاعل: 22.1 ثانية
• إجمالي حجم الصفحة: 4.41 ميجا بايت
• إجمالي أصول الصورة: 2.1 ميجا بايت
• الطلبات: 171

أقل 20٪:

• أول رسم مضمون: 5.89 ثانية
• وقت التفاعل: 30.37 ثانية
• إجمالي حجم الصفحة: 5.54 ميجا بايت
• إجمالي أصول الصورة: 2.59 ميجا بايت
• الطلبات: 235

مصادر إضافية

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

أدوات اختبار سرعة الصفحة:

1. بينغدوم
2. Google Pagespeed Insights
3. WebPageTest.org
4. Chrome DevTools
5. منارة جوجل
6. فكر مع جوجل

تحسين الصورة:

• أوبتيميزيلا
• Crush.pics

اقرأ أكثر:

• تحسين سرعة الموقع باستخدام أدوات مطوري Chrome
• الدليل النهائي لسرعة الموقع

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