أداء Shopify وتجربة الهاتف المحمول
المتجر السريع لا يشحن بشكل أسرع فحسب. فهو يستجيب بسرعة أكبر لنوايا العميل.
الهدف ليس تحقيق درجة مثالية معزولة، ولكن تحسين تحميل الصفحات المستخدمة بالفعل واستجابتها واستقرارها. ابدأ بالقياس، وحدد الشخص المسؤول، ثم قم بالتصحيح وفقًا لتأثير العمل.
لا تخلط بين Shopify وما تمت إضافته إلى Shopify
توفر المنصة الاستضافة وCDN والعديد من التحسينات. غالبًا ما تأتي عمليات التباطؤ من السمات والتطبيقات والبرامج النصية التسويقية والوسائط والتخصيصات.
نتيجة واحدة لا تحكي القصة بأكملها
قارن بيانات المستخدم الحقيقية وأنواع الصفحات المتعددة والاختبارات المعملية. الصفحة الرئيسية السريعة لا تعوض ورقة المنتج البطيئة.
الأبعاد الثلاثة التي يجب الانتباه إليها
يقيس عندما يصبح المحتوى الرئيسي المرئي متاحًا، وغالبًا ما يكون صورة أو عنوانًا كبيرًا.
يلاحظ سرعة الاستجابة بعد التفاعلات: القائمة أو المتغيرات أو المرشحات أو السلة أو الأزرار.
يقيس حركات المحتوى غير المتوقعة أثناء التحميل.
يقوم Shopify بتجميع هذه المقاييس في تقارير أداء الويب الخاصة به من بيانات حقيقية عند توفر حجم كافٍ.
طريقة التشخيص المكونة من 6 خطوات
اختر الصفحات المهمة
اختبر على الأقل الترحيب والمجموعة الرئيسية وورقة المنتج التمثيلية والسلة وصفحة التحرير.
ابدأ بالجوال
الاتصالات والمعالجات وأحجام الشاشات تجعل المشاكل أكثر وضوحًا. استخدم هاتفًا حقيقيًا لاستكمال الأدوات.
اقرأ تقارير Shopify
راقب عناصر الويب الأساسية وأنواع الصفحات المتأثرة والأحداث المقابلة للتثبيت أو التغيير.
قارن مع رؤى PageSpeed
يساعد الاختبار المعملي على اكتشاف موارد الحظر والصور الثقيلة والبرامج النصية والعمل المفرط للمتصفح.
عزل السبب
اختبر نسخة من السمة، وقم بتعطيل كتلة التطبيق أو البرنامج النصي مؤقتًا، ثم قارن قبل وبعد.
القياس بعد النشر
تستغرق البيانات الفعلية وقتًا لتعكس التغييرات. توثيق التاريخ ومراقبة التحويل أيضًا.
التحسينات الأكثر فعالية من حيث التكلفة
تطبيقات التدقيق
قم بإزالة الوظائف بدون قيمة كافية وتحقق من البرامج النصية التي تبقى بعد إلغاء التثبيت.
تفتيح الصورة الرئيسية
يخدم بحجم مناسب ويحافظ على الجودة المفيدة ويتجنب تأخير الصورة التي تشكل المحتوى الرئيسي.
استخدم الصور سريعة الاستجابة
يجب أن يقوم المتصفح بتنزيل إصدار سهل الاستخدام للشاشة بدلاً من ملف سطح المكتب الضخم على الهاتف المحمول.
تقليل جافا سكريبت
تفضل HTML وCSS عندما يكون ذلك ممكنًا. تحميل الوظائف فقط على الصفحات التي تحتاج إليها.
تأجيل البرامج النصية غير الأساسية
لا ينبغي لجميع الدردشة والمراجعات والخرائط ومقاطع الفيديو وأدوات التسويق أن تمنع العرض الأول.
الخطوط الرئيسية
حدد العائلات والدهون، أو قم بتحميل الملفات الأساسية فقط مسبقًا، أو فكر في خط النظام.
الأبعاد الاحتياطية
قم بتعيين عرض وارتفاع الصور ومقاطع الفيديو والأدوات لتجنب قفزات المحتوى.
مجداف المجموعات الكبيرة
لا تقم بتحميل مئات المنتجات مرة واحدة عندما يكون ترقيم الصفحات أو التحميل المتحكم فيه كافيًا.
تنظيف تتبع التسويق
قم بإزالة العلامات غير المستخدمة وتحقق من قيمة كل أداة تم تحميلها عبر مدير العلامات.
تحديد الأولويات حسب التأثير
| فعل | الأولوية المعتادة | لماذا |
|---|---|---|
| حذف تطبيق ثقيل وغير مفيد للغاية | عالي | يمكن تقليل جافا سكريبت والاستعلامات وعمل المتصفح عبر صفحات متعددة |
| تحسين البطل المحمول | عالي | غالبًا ما يؤثر العنصر المرئي الأكبر على التحميل المتصور |
| تأخير مقطع فيديو تحت خط الماء | عالي | تجنب تحميل الوسائط غير المرئية على الفور |
| الحد من الخطوط والدهون | متوسط | يقلل التنزيلات ويسرع عرض النص |
| تنظيف الكود السائل المتكرر | متوسط | يمكن تحسين وقت العرض على النماذج المعقدة |
| احصل على بضعة كيلو بايت على أيقونة صغيرة | ضعيف | تأثير محدود إذا ظلت النصوص والوسائط الرئيسية ثقيلة |
الصور: الإعدادات التي تهم حقًا
للقيام
- استخدم مرشحات الصور Shopify ذات العروض المتعددة
- أدخل الأبعاد لحجز المساحة
- تحميل الوسائط ببطء تحت الشاشة
- الموارد المضيفة على Shopify CDN
- اختبار المحاصيل المتنقلة
لتجنب
- أرسل نفس الصورة بدقة 3000 بكسل إلى جميع الشاشات
- ضع حملاً متأخرًا على الصورة الرئيسية دون سبب
- استخدم عدة منزلقات ثقيلة
- تحميل الفيديو التلقائي بدقة عالية
- اضرب الصور غير المرئية في دوارات
تطبيقات وبرامج الطرف الثالث: قرر حسب القيمة
تحديد الوظيفة
ما الذي تنتجه فعليًا: المبيعات أو الثقة أو الدعم أو البيانات أو الديكور البسيط؟
قياس النطاق
هل يتم تحميل البرنامج النصي على جميع الصفحات عندما يكون مفيدًا فقط على المنتج أو سلة التسوق؟
ابحث عن وظيفة أصلية
قد يقدم الموضوع أو Shopify بالفعل حلاً أخف.
اختبار قبل/بعد
قارن نسخة من السمة مع الكتلة وبدونها، ثم تأكد من أن البيانات والمبيعات تظل صحيحة.
حذف بشكل نظيف
بعد إلغاء التثبيت، تحقق من مقتطفات التعليمات البرمجية والعلامات والملفات التي قد تظل نشطة.
وثيقة
احتفظ بالمالك والغرض وتاريخ المراجعة لكل برنامج نصي خارجي.
التحسينات التقنية للموضوع
جافا سكريبت التقدمية
يجب أن تظل الميزات الأساسية مثل اكتشاف المنتج وشرائه قوية. استخدم JavaScript للتحسين، وليس لجعل الصفحة بأكملها معتمدة.
البرامج النصية غير المحظورة
تمنع السمات المعدلة والتحميل المشروط الملفات من تأخير إنشاء الصفحة الأولية.
سائل فعال
تجنب الحسابات المعقدة المتكررة في الحلقات وقم بتحليل الأقسام البطيئة باستخدام أدوات Shopify.
Css المستهدفة
تقليل التبعيات الإجمالية وتجنب تحميل أنماط المكونات المفقودة من الصفحة.
الموارد الحرجة
قم بالتحميل المسبق للموارد الأساسية فقط على الشاشة الأولى. يؤدي الكثير من التحميلات المسبقة إلى خلق منافسة جديدة.
أدوات التحكم
يمكن لـ Theme Check اكتشاف الحزم الكبيرة والموارد البعيدة وحظر JavaScript وبعض تبعيات CSS.
ما لا يجب فعله
متابعة درجة 100 بأي ثمن
لا تقم بإزالة ميزة مربحة لبضع نقاط. قارن التكلفة الفنية والقيمة التجارية.
تحسين الاستقبال فقط
غالبًا ما يصل الزوار مباشرة إلى ورقة المنتج أو المجموعة أو العنصر.
قم بتثبيت تطبيق السرعة دون تشخيص
لا تقوم الطبقة الإضافية دائمًا بتصحيح السبب وقد تضيف JavaScript.
قم بتحميل كل المحتوى بكسول
يجب أن تظهر الصورة المهمة الأولى بسرعة. التحميل البطيء مفيد بشكل خاص تحت المنطقة المرئية.
إزالة التتبع الأساسي
الحفاظ على الأدوات اللازمة للطلبات والتخصيص والامتثال، ثم تحسين تحميلها.
تحرير السمة النشطة دون نسخ
اعمل على نسخة مكررة، واختبر الدورات التدريبية واحتفظ بنسخة قابلة للاسترداد.
خطة عمل لمدة 7 أيام
الأسئلة المتداولة
ما هي درجة PageSpeed التي يجب أن تهدف إليها؟
لا توجد درجة واحدة تضمن تجربة جيدة. قبل كل شيء، ابحث عن تحسين المقاييس والصفحات المهمة والبيانات الحقيقية دون إزالة الوظائف المفيدة.
هل Shopify بطيء بشكل طبيعي؟
يوفر Shopify بنية تحتية محسنة وشبكة CDN. يعتمد الأداء النهائي بشكل كبير على السمة والوسائط والتطبيقات والبرامج النصية المضافة.
هل تعمل جميع التطبيقات على إبطاء المتجر؟
لا. يختلف تأثيرها حسب الكود الخاص بها، وتحميل الصفحات والوظيفة. تقييم كل على حدة.
هل يجب علي ضغط جميع الصور يدويًا؟
يقوم Shopify بإجراء التحويلات وتقديم الصور عبر CDN الخاص به، ولكن يجب عليك دائمًا طلب الأبعاد المناسبة وتجنب الملفات المصدرية الكبيرة غير الضرورية.
كم من الوقت قبل أن ترى التحسن؟
تستجيب الاختبارات المعملية على الفور، بينما تتطلب التقارير المستندة إلى المستخدمين الفعليين المزيد من الزيارات وقد تظهر تأخرًا.
التحسين الجيد يزيل الفرامل دون إزالة القيمة
اجعل متجر Shopify الخاص بك أسرع وأكثر استقرارًا وأكثر متعة على الهاتف المحمول
قم بتدقيق الموضوع والتطبيقات والبرامج النصية والوسائط الخاصة بك قبل إجراء أي تغييرات.
