إصلاح مشكلة LCP وتطبيق Facade Pattern لسلايدر متجر سلة

أبحث عن مبرمج محترف (Front-End / Performance Optimization) لحل مشكلة محددة في سرعة تحميل الصفحة الرئيسية لمتجر على منصة "سلة".

المشكلة الحالية: نستخدم "سلايدر" (Slider) في واجهة المتجر. قمنا سابقاً بمحاولة تطبيق تقنية (Facade Pattern) لتأجيل تحميل مكتبة الـ JS وعرض صورة وهمية لرفع سرعة الموقع. ولكن التنفيذ الحالي غير دقيق، حيث أن Google PageSpeed يكتشف الصورة المتأخرة (swiper-lazy) ويعتبرها هي الـ LCP، مما أدى لارتفاع زمن LCP إلى 17 ثانية وانخفاض التقييم

المطلوب (Scope of Work): تعديل كود الواجهة (HTML/CSS/JS) في ثيم سلة لتطبيق الـ Facade Pattern بشكل صحيح تماماً "يخدع" خوارزميات جوجل، وذلك عبر:

فصل الصورة الثابتة (Static Hero Image): وضع صورة HTML عادية (<img>) خارج حاوية السلايدر تماماً في الكود، لتكون هي أول عنصر يظهر (Eager Load) مع خاصية fetchpriority="high".

تأخير السلايدر (True Deferment): جعل كود السلايدر ومكتباته لا تعمل ولا تظهر في الـ DOM إلا بعد تفاعل المستخدم (User Interaction) أو بعد تحميل الصفحة بالكامل، بحيث يظهر السلايدر "فوق" الصورة الثابتة بسلاسة دون أن ينتظره جوجل كعنصر أساسي.

إلغاء Layout Shift: التأكد من حجز المساحة (aspect-ratio) لمنع اهتزاز الصفحة عند تفعيل السلايدر.

شروط التسليم (معايير القبول): لن يتم استلام المشروع إلا بعد تحقق الشروط التالية:

الأداء: يجب أن تظهر نتيجة فحص PageSpeed Insights للجوال أن مؤشر LCP أصبح في المنطقة الخضراء (أقل من 2.5 ثانية).

الكود: وجود كود صورة ثابتة منفصل تماماً عن السلايدر، وعدم تحميل مكتبات JS الثقيلة في بداية التحميل (Blocking).

تجربة المستخدم: الموقع يظهر فوراً (صورة ثابتة)، وعند اللمس أو التمرير يعمل السلايدر بشكل طبيعي وسلس دون تكسر في التصميم.

سيتم منح المستقل صلاحية دخول (Staff Access) إلى لوحة تحكم المتجر (سلة) للوصول إلى أكواد CSS/JS وتعديلها مباشرة. لا توجد ملفات خارجية