تواجه متاجر التجارة الإلكترونية المصرية تحدياً أداء محدداً: مستخدمون على أجهزة Android متوسطة واتصالات جوال متفاوتة، في القاهرة أو الإسكندرية غالباً، يتوقعون تحميل الصفحات بسرعة. الوصول إلى درجة 90+ في PageSpeed ممكن — إليك سير عمل التشخيص والإصلاح الذي أستخدمه.
ابدأ بـ PageSpeed Insights وGTmetrix على صفحتك الرئيسية وصفحة منتج. صدّر مؤشرات Core Web Vitals: LCP وTBT وCLS. هذه المؤشرات الثلاثة تقود درجة الأداء وهي حيث تمتلك معظم المتاجر أكبر مجال للتحسين.
الصور عادةً هي أكبر مكسب. تخدم Shopify الصور عبر شبكة CDN الخاصة بها، لكن المتاجر كثيراً ما ترفع ملفات أصلية بحجم 3-5 ميغابايت وتعتمد على التحميل الكسول وحده. استخدم Shopify image URL API لخدمة WebP بحجم العرض الصحيح، وأضف سمات العرض والارتفاع الصريحة لمنع CLS، وحمّل الصورة الرئيسية مسبقاً لإصلاح LCP.
السكريبتات هي المصدر الثاني الرئيسي للتباطؤ. تطبيقات الطرف الثالث — ودجات التقييم وإضافات الدردشة وبرامج الولاء — تضيف كل منها JavaScript يحجب الـ rendering. افحص تحميل أصول الثيم في علامة تبويب Coverage في Chrome DevTools. أخّر كل شيء لا يحتاج إلى أن يحجب الـ rendering، وأزل التطبيقات التي لم تعد تستخدمها.
التخزين المؤقت وتكوين CDN أهم مما يدرك كثير من أصحاب المتاجر. تتعامل Shopify CDN مع الأصول الثابتة بشكل جيد، لكن الخطوط المخصصة وملفات CSS الكبيرة لا تزال قادرة على إضافة مئات الميلي ثانية. أضف CSS الحرج مباشرة في HTML، واستضف الخطوط ذاتياً، واستخدم استراتيجية font-display:swap حتى لا يحجب تحميل الخط الـ rendering.
أخيراً، افحص الثيم بحثاً عن الثقل الزائد. تأتي ثيمات Shopify الشائعة مع 15-20 قسماً محملاً في كل صفحة، لكل منها CSS وJavaScript خاص بها، حتى لو كان القسم مخفياً. قلّل أقسام الثيم غير المستخدمة، وتخلص من تضمينات jQuery المتكررة، وغالباً يمكنك تقليص 30-40 نقطة من TBT في جولة واحدة.