أداء ونمو
تحسين سرعة شوبفاي دون التضحية بتجربة المتجر
أبدأ بقياس صفحات متجرك وتحليل أسباب البطء، ثم أعالج العناصر الممكن تحسينها في القالب والوسائط والتطبيقات، مع مقارنة واضحة قبل وبعد.
لماذا المتجر بطيء؟
ستة أسباب تتكرر في متاجر Shopify، وأغلبها يتراكم بعد الإطلاق
المتجر يُطلق سريعًا ثم يُثبّت تطبيق، ثم تُرفع صور بلا ضغط، ثم تُضاف بكسلات؛ بعد سنة يصبح البطء «طبيعيًا» رغم أن كل سبب قابل للعلاج.
- سكربتات التطبيقات
كل تطبيق يحقن سكربتًا في كل صفحة حتى لو لم يُستخدم فيها. التطبيقات المحذوفة قد تترك كودها في القالب.
- صور بلا أبعاد ولا ضغط
صور منتجات بآلاف البكسلات تُعرض في بطاقة صغيرة، وبلا width/height فتسبب قفزات في التخطيط.
- خطوط كثيرة
خط عربي بأربعة أوزان وخط لاتيني بثلاثة، كلها تُحمّل قبل ظهور النص.
- قالب محمّل بالميزات
شرائح وأنيميشن ومكتبات JavaScript تُحمّل في كل صفحة سواء استُخدمت أم لا.
- بكسلات التتبع
عدة أدوات تحليلات وإعلانات تعمل معًا، وبعضها مكرر أو لم يعد مستخدمًا.
- صفحات مجموعات ثقيلة
عرض عشرات المنتجات مع كل متغيراتها وصورها في طلب واحد، وحلقات Liquid معقدة.
أحدث متاجر شوبيفاي من أعمالي
تصفّح أحدث المشاريع المنشورة، وافتح كل مشروع للتعرّف على تفاصيله.
-
Beauvive
متجر شوبفاي لعلامة Beauvive لمنتجات العناية بالشعر والبشرة والجسم، يعرض الأكثر مبيعًا والباقات والمجموعات مع آراء العملاء ونصائح الجمال.
-
فوكسي لاين
متجر شوبفاي لعلامة فوكسي لاين المصرية لأدوات إزالة الشعر، يعرض المنتجات وطريقة الاستخدام لكل منطقة مع مراجعات العملاء والأسئلة الشائعة.
-
Aminak Store
متجر أزياء نسائية على شوبفاي لعلامة Amina K.، يجمع الملابس والحقائب في مجموعات موسمية، مع صور تعكس روح كل مجموعة وتفاصيلها.
-
لاديراخ مصر
متجر شوبفاي لشوكولاتة Läderach في مصر، يعرض ألواح الشوكولاتة والبرالين وعلب الهدايا بتقسيمات واضحة وصور تبرز تفاصيل كل اختيار.
-
باندورا مصر
متجر مجوهرات على شوبفاي لعلامة باندورا مصر، يجمع التشارمز والأساور والخواتم في مجموعات بصرية تربط تفاصيل القطع بإطلالاتها.
-
Keep Moving Hangers
متجر شوبفاي لعلامة Keep Moving، يقدم علاقات الميداليات والمنتجات الرياضية، مع عرض لفكرة التخصيص وتحويل الإنجازات إلى قطع شخصية.
-
قنديل للإطارات
متجر إطارات وبطاريات على شوبفاي لعلامة قنديل للإطارات، يجمع البحث عن الإطار وتصفح العلامات التجارية مع معلومات الخدمات والفروع.
-
بريو للأحذية
متجر أحذية على شوبفاي لعلامة بريو للأحذية، يعرض الموديلات الرجالية والنسائية بتقسيمات للكلاسيك والسنيكرز وصور توضح أسلوب كل مجموعة.
-
Rebuy Box
متجر إلكترونيات على شوبفاي لعلامة Rebuy Box، ينظم أجهزة الحاسب ومنتجات الألعاب والساعات والإكسسوارات في مجموعات واضحة وسهلة التصفح.
-
آدمز للرجال
متجر عناية رجالية على شوبفاي لعلامة آدمز للرجال، يجمع منتجات الشعر واللحية والجسم مع مجموعات الروتين اليومي واختيارات الهدايا.
-
متجر زورد
متجر تقني على شوبفاي لعلامة متجر زورد، يعرض قطع الكمبيوتر والأجهزة وملحقات الألعاب عبر أقسام متخصصة ومداخل للعلامات التجارية.
-
حازم شكري
متجر أثاث وديكور على شوبفاي لعلامة حازم شكري، يعتمد على صور الغرف والمجموعات لعرض تناغم القطع والألوان داخل المساحات.
منهج التدقيق وأولويات الإصلاح
قياس أولًا، ثم إصلاح ما له أكبر أثر بأقل مخاطرة
- قياس صفحات الرئيسية والمنتج والمجموعة على الموبايل
بيانات مختبرية (PageSpeed Insights / Lighthouse) وبيانات مستخدمين حقيقيين (CrUX) حين تتوفر لمتجرك، على الموبايل أولًا لأنه مصدر أغلب الزيارات.
المخرج: خط أساس موثق لكل صفحة - تقييم LCP وINP وCLS بمصادر مناسبة
تحديد العنصر المسؤول عن LCP، والسكربتات التي تؤخر الاستجابة، والعناصر التي تقفز أثناء التحميل.
المخرج: قائمة أسباب مرتبة حسب الأثر - تحسين الصور والخطوط والتحميل
أبعاد صريحة، أحجام مناسبة لكل شاشة، تحميل كسول لما تحت الطية، أولوية لصورة LCP، وتقليل أوزان الخطوط مع عرض النص فورًا.
المخرج: تعديلات في القالب على نسخة تجريبية - مراجعة السكربتات والتطبيقات وLiquid
جرد كل سكربت ومصدره، إزالة بقايا التطبيقات المحذوفة، تأجيل غير الضروري، وتبسيط حلقات Liquid في المجموعات.
المخرج: قائمة بما أُزيل أو أُجّل ولماذا - توثيق التغيير والاختبارات بعد التنفيذ
قياس بعد النشر بالأدوات نفسها والصفحات نفسها، وتقرير بما تغيّر وما بقي خارج السيطرة.
المخرج: تقرير قبل/بعد وتوصيات للحفاظ على النتيجة
رابط المتجر يكفي لقياس أولي للصفحات الثلاث.
ما الذي يمكن التحكم فيه وما لا يمكن
الصدق هنا يوفر عليك توقعات خاطئة
في نطاق التحكم
theme · media · apps you choose- كود القالب: Liquid وCSS وJavaScript وترتيب التحميل
- الصور: الأبعاد والصيغ والضغط والتحميل الكسول
- الخطوط: عددها وأوزانها وطريقة عرضها
- التطبيقات المثبتة وبقايا المحذوف منها
- بكسلات التتبع وعددها وطريقة تحميلها
- بنية صفحات المجموعات وعدد المنتجات المعروضة
خارج نطاق التحكم
platform · vendors · network- خوادم Shopify وشبكة التوزيع الخاصة بها
- صفحة الدفع وسكربتات المنصة الأساسية
- كود التطبيقات نفسه؛ يمكن تأجيله أو استبداله لا تعديله
- سكربتات الطرف الثالث التي تطلب استخدامها (الدردشة، الإعلانات)
- شبكة العميل وجهازه
- تقلب الدرجات المختبرية بين القياسات
شكل تقرير قبل/بعد
القالب الذي تستلمه، بلا قيم مخترعة
الجدول يوضح بنية التقرير فقط؛ الخلايا تُملأ بقياسات متجرك أنت، بتاريخ وأداة وجهاز محددين.
| الصفحة | المؤشر | قبل | بعد | ما تغيّر | المصدر |
|---|---|---|---|---|---|
| الرئيسية (موبايل) | LCP | — | — | أولوية تحميل صورة البانر وتقليل حجمها | PageSpeed Insights · التاريخ |
| الرئيسية (موبايل) | INP | — | — | تأجيل سكربتات تطبيقين وإزالة بقايا تطبيق محذوف | CrUX إن توفر |
| صفحة منتج | CLS | — | — | أبعاد صريحة لمعرض الصور وحجز مساحة التقييمات | Lighthouse · الجهاز |
| صفحة مجموعة | حجم النقل | — | — | صور مناسبة لحجم البطاقة وتحميل كسول | DevTools |
| كل الصفحات | عدد السكربتات | — | — | جرد السكربتات ومصادرها وما أُزيل | جرد يدوي |
يرفق بالتقرير قائمة بالتغييرات في القالب وبالتطبيقات التي نوقشت، وتوصيات للحفاظ على النتيجة عند إضافة محتوى أو تطبيقات جديدة.
أسئلة شائعة
أسئلة تُطرح كثيرًا قبل البدء
إجابات مباشرة؛ أي تفصيلة تخص متجرك تحديدًا نحسمها في مكالمة قصيرة بعد مراجعة المشروع.
هل يمكن ضمان درجة 100 في PageSpeed؟
هل حذف التطبيقات ضروري؟
ما الصفحات التي يتم اختبارها؟
هل تؤثر صور المنتجات على السرعة؟
هل الأداء مرتبط بمعدل التحويل؟
أرسل رابط متجرك وسأقيس الصفحات الثلاث على الموبايل
قياس أولي موثق بالأداة والتاريخ، ثم نطاق مكتوب يحدد ما يمكن إصلاحه في القالب والوسائط والتطبيقات وعرض سعر.