تحسين سرعة متجر سلة (حل مشكلة LCP و CLS) وتطبيق Facade Pattern للسلايدر

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

المشكلة الحالية:

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

بالإضافة إلى ذلك، نعاني من اهتزاز في التصميم عند التحميل بسبب عدم تحديد أبعاد حاويات الصور.

بناءً على أحدث فحص PageSpeed Insights للموبايل (مرفق بالبيانات):

تقييم الأداء العام: 42

مؤشر LCP (سرعة عرض أكبر محتوى): 9.8 ثانية (بطيء جداً ويجب أن يكون أقل من 2.5s).

مؤشر CLS (متغيرات التصميم التراكمية): 0.524 (سيء جداً ويجب أن يكون أقل من 0.1).

المطلوب (Scope of Work):

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

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

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

إلغاء اهتزاز الصفحة (Zero Layout Shift): حجز المساحة المطلوبة للصور والسلايدر باستخدام خاصية aspect-ratio وتحديد الـ width و height في الكود لمنع أي تحرك للعناصر (CLS) أثناء التحميل.

تحسين أبعاد الصور (Image Sizing): مراجعة صور بعض المنتجات المعروضة في الصفحة الرئيسية والتي يتم تحميلها بأحجام كبيرة جداً (مثل صور باقات الحلويات والفواكه) لتتناسب مع أبعاد العرض الفعلية وتقليل حجم التنزيل.

شروط التسليم (معايير القبول):

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

استقرار التصميم: وصول مؤشر CLS إلى المنطقة الخضراء (توقف اهتزاز الصفحة).

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

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

ملاحظات للمستقل:

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

أرجو إرفاق نماذج لأعمالك السابقة في تحسين أداء المتاجر، وتحديداً حل مشاكل LCP و CLS.