تحسين أداء متجر شوبيفاي

قائمة المهام التقنية لتحسين أداء متجر Shopify

1. تحسين عنصر LCP (أكبر محتوى مرئي):

تحديد صورة البانر الرئيسي (Hero Banner).

إزالة خاصية "التحميل المتأخر" (Lazy Loading) عن هذه الصورة تحديداً.

إضافة خاصية fetchpriority="high" لوسم الصورة لضمان تحميلها بأعلى أولوية.

2. تحسين الصور والمحتوى المتحرك:

تحويل ملفات الـ GIF الثقيلة (خاصة ملف sustainable-energy.gif) إلى صيغة WebP متحرك أو MP4.

شرط أساسي: التوازن في ضغط الصور بحيث لا تقل الجودة (No Pixelation) ولا يتأثر وضوح تفاصيل المنتجات.

3. تقليل سلاسل الطلبات الحرجة (Critical Request Chains):

عمل Minify و Merge لملفات CSS و JS.

تقليل عدد طلبات ملفات الـ Assets الصغيرة والكثيرة (مثل shipping.css و banner.css) التي تؤخر عرض الصفحة.

4. إصلاح إزاحة المحتوى (CLS - Layout Shift):

تحديد أبعاد ثابتة (Width & Height) لأيقونات الدفع في تذييل الصفحة (Footer) ولجميع عناصر البانر.

الهدف هو منع "قفز" أو اهتزاز العناصر أثناء تحميل الصفحة.

5. تحسين سياسة التخزين المؤقت (Caching):

تحسين إعدادات الـ Cache للأصول (Assets) وسكريبتات الطرف الثالث قدر الإمكان لزيادة سرعة الموقع عند الزيارات المتكررة.

6. التحميل المسبق للخطوط (Preload Fonts):

عمل Preload للخطوط الأساسية (مثل خط Montserrat) لمنع تأخر ظهور النص (Render-blocking).

7. فحص التوافق (Cross-Browser Testing):

التأكد من عمل المتجر بكفاءة تامة على متصفحات Safari و Chrome وعلى جميع أنواع الجوالات.

التأكد من أن جميع القوائم، الأزرار، وخاصية "إضافة للسلة" تعمل بشكل سليم 100%.

ملاحظات هامة:

العمل على نسخة احتياطية: أرجو تنفيذ التعديلات على نسخة مكررة من القالب (Duplicate Theme) لمعاينتها وفحص السرعة قبل اعتمادها للمتجر الحي.

تجنب التطبيقات الآلية: المطلوب هو تعديل يدوي على الأكواد (Liquid/CSS/JS) وليس مجرد تثبيت تطبيقات تحسين سرعة.