كيف أدّت استراتيجية ترتيب الصور حسب الأولوية التي اتّبعتها Nuvemshop إلى تحسين LCP بنسبة% 68 وزيادة الإحالات الناجحة بنسبة% 8.9

Federico Iglesias

Jesus Biaggioni

Kaio Graco Cardamone

Lucas Demarchi

Mari Viana

تاريخ النشر: 24 يونيو 2026

‫Nuvemshop (المعروفة باسم Tiendanube في أمريكا اللاتينية الناطقة بالإسبانية) هي منصة التجارة الإلكترونية الرائدة في المنطقة، وتدير أكثر من 180,000 متجر على الإنترنت. يواجه التجّار تحديات فنية فريدة من نوعها عند تخصيص واجهات متاجرهم من خلال مظاهر متعددة وترتيبات المحتوى الديناميكي، ما يضمن سرعة تحميل الصفحات على مستوى هذا التنوع.

• تحسّن مقياس "سرعة عرض أكبر محتوى مرئي" (LCP) بنسبة%68، من% 57 إلى% 96 في عام واحد، ما يعكس تحوّلاً كبيرًا في طريقة عرض المتاجر للمحتوى في أعلى إطار العرض للمستخدمين الفعليين.
• ارتفع معدّل اجتياز معاييرCore Web Vitals من% 48 إلى%72، ما يعني أنّ ما يقرب من 3 من أصل 4 متاجر تستوفي الآن الحد الأدنى لأداء Google.
• تحسّن التفاعل مع "إعلانات Shopping" بشكل ملحوظ: عند تحليل المجموعة نفسها من المتاجر البرازيلية النشطة في يناير 2025 ويناير 2026، ظهرت النتائج التالية للزوّار على الأجهزة الجوّالة من نتائج البحث المجانية على Google:
  • زيادة في معدّل الإحالات الناجحة (من الجلسة إلى الطلب المدفوع) بنسبة% 8.9
  • زيادة في معدّل التفاعل مع سلة التسوّق (من الجلسة إلى سلة التسوّق) بنسبة% 8.4
• حقّقت الأجهزة الجوّالة أكبر المكاسب، بما يتوافق مع الحالات التي كانت فيها تحسينات LCP أكثر أهمية.

تتوافق هذه النتائج مع بحث Deloitte الذي طلبته Google (أكثر من 30 مليون جلسة على مستوى 37 علامة تجارية)، والذي وجد أنّ تحسين سرعة التحميل بمقدار 0.1 ثانية يمكن أن يزيد معدّلات الإحالات الناجحة في مجال البيع بالتجزئة بنسبة %8.4، ما يؤكّد صحة توجّه استثماراتنا.

التحدي: رصد LCP في تنسيقات التجارة الإلكترونية الديناميكية

في بداية عام 2025، اجتاز% 48 فقط من متاجرنا حدود Core Web Vitals، وحصل% 57 منها على نتائج جيدة في LCP. كانت فرضيتنا الأولية هي وزن الصورة أو وقت استجابة الخادم. لكن تبيّن لنا أنّنا على خطأ.

من خلال تحليل إحصاءات PageSpeed على مستوى آلاف المتاجر، اكتشفنا أنّ منصتنا تتيح للتجّار ترتيب أقسام الصفحة الرئيسية بشكل ديناميكي: يمكن أن تظهر لوحات العرض الدوّارة واللافتات وشبكات المنتجات والوحدات المخصّصة بأي ترتيب.

أدّت هذه المرونة إلى ظهور مشكلة غير متوقّعة: لم يكن يتم دائمًا تحديد العنصر الصحيح على أنّه LCP. في المتاجر التي تحتوي على شرائح إعلانية، والتي تمثّل %85 من واجهات متاجرنا، كان يتم أحيانًا وضع علامة LCP على لافتة تظهر في أسفل إطار العرض بدلاً من الصورة الأولى في الشريحة الإعلانية، وذلك حسب طريقة عرض الصفحة على الشاشات والأجهزة المختلفة. وكان هذا يعني أنّ جهودنا في التحسين لم تكن تحقّق التأثير المطلوب: كنا نحسّن عناصر لم تكن في الواقع عناصر LCP.

على عكس منصات SaaS النموذجية، لم يكن بإمكاننا إصلاح الصفحة الرئيسية فقط. كنا بحاجة إلى حلّ يعمل على مستوى كل إعداد ممكن للمظهر وترتيب القسم وتخصيص التجّار، بدون إيقاف المتاجر الحالية أو الحدّ من الحرية الإبداعية.

كيف تؤثر التنسيقات الديناميكية في اختيار عنصر LCP

من خلال تحليل إحصاءات PageSpeed ومراقبة المستخدمين الفعليين، اكتشفنا أنّ انتقالات CSS على لوحات العرض الدوّارة واللافتات كانت متأخرة عندما تصبح العناصر مرئية لخوارزمية رصد سرعة عرض أكبر محتوى مرئي (LCP) في المتصفّح. مع أنّ المستخدمين كانوا يرون أنّ الشريحة الإعلانية يتم تحميلها أولاً، كان المتصفّح في بعض الأحيان يضع علامة LCP على لافتة في القسم الثاني، لأنّ ظهور هذا العنصر لم يتأخر بسبب تأثيرات الانتقال.

حدّدنا ثلاثة أسباب أساسية:

• تأخرت انتقالات CSS عندما تم اعتبار العناصر مرئية، ما أدّى إلى رصد LCP في الإطار الخطأ.
• تم تطبيق التحميل الكسول على الصور في أعلى إطار العرض التي كان من المفترض تحميلها على الفور.
• عدم توفّر إشارات الأولوية يعني أنّه لم يتم تحميل الصور الأكثر أهمية أولاً.

وجدنا أيضًا أنّ جزءًا كبيرًا من قياسات LCP كان يأتي من صفحات الفئات والمنتجات، وليس من الصفحات الرئيسية فقط، ما يعني أنّ عمليات الإصلاح التي أجريناها كان يجب أن يتم تطبيقها باستمرار على مستوى جميع أنواع الصفحات التي تشهد عددًا كبيرًا من الزيارات.

التنفيذ: إصلاح الأسباب الأساسية الثلاثة على نطاق واسع

بعد تحديد الأسباب، كانت عمليات الإصلاح بسيطة. لقد طبّقناها باستمرار على مستوى جميع المظاهر الأساسية وأنواع الصفحات، ولكن كان كل منها يتطلب تحديد نطاق دقيق لتجنُّب حدوث مشاكل جديدة.

• تمت إزالة انتقالات CSS للأقسام التي تظهر في الموضع الأول. يتم الآن عرض الأقسام التي تظهر أولاً على الصفحة على الفور، ما يضمن أن يرصدها المتصفّح كمرشّحة لـ LCP بدون تأخيرات مصطنعة.

• تمت إزالة التحميل الكسول من الصور في أعلى إطار العرض. بالنسبة إلى الصور في القسم الأول، نزيل بشكل مشروط loading="lazy" لإزالة تأخير تحميل الموارد. حرصنا على أن يقتصر نطاق ذلك على الصورة الأولى فقط في الأقسام التي تظهر في الموضع الأول:

  <!-- Before -->
  <img src="slide-1.webp" loading="lazy" alt="Featured product">
  <!-- After -->
  <img src="slide-1.webp" alt="Featured product">
  

• تمت إضافة إشارات أولوية صريحة. من خلال إضافة fetchpriority="high"، نخبر أداة فحص التحميل المسبق في المتصفّح أنّ صورة LCP هي مورد ذو أولوية قصوى، ما يسمح باكتشافها وتنزيلها في وقت أقرب، قبل اكتمال التنسيق والعرض. أضفنا منطق التحقق لضمان تطبيق إشارات الأولوية فقط عندما يكون العنصر في موضع يمكن أن يكون فيه مرشّحًا لـ LCP: ستكون إضافة fetchpriority="high" إلى عدد كبير جدًا من الصور غير منتجة، لأنّه إذا كانت كل العناصر ذات أولوية قصوى، فلن يكون أي منها كذلك.

  <!-- Before -->
  <img src="slide-1.webp" alt="Featured product">
  <!-- After -->
  <img src="slide-1.webp" fetchpriority="high" alt="Featured product">
  

• تم خفض وقت الاستجابة من خلال التخزين المؤقت على الحافة. يكون التخزين المؤقت فعالاً في خفض أوقات التحميل، ولكن في التجارة الإلكترونية، ينطوي ذلك على خطر حقيقي: يؤثر عرض بيانات التسعير والمخزون القديمة بشكل مباشر في ثقة العملاء والإيرادات. لقد تعاملنا مع هذه المشكلة بعناية من خلال رصد مؤشرات الأداء الرئيسية للنشاط التجاري إلى جانب بيانات الأداء، ما أدّى إلى زيادة نتائج ذاكرة التخزين المؤقت إلى أقصى حد مع ضمان عدم تخزين المحتوى الذي قد يضر بتجربة التاجر أو المشتري.

التأثير والنتائج: تحسين LCP من% 57 إلى% 96

أدّت هذه التحسينات إلى تصنيف Nuvemshop وTiendanube على أنّهما منصة التجارة الإلكترونية الأولى من حيث الأداء في البرازيل والأرجنتين والمكسيك.

النقاط الرئيسية والتحليلات بعد انتهاء المشروع

كانت بنية Nuvemshop قابلة للتخصيص بدرجة كبيرة، ما يعني أنّه لم يكن بإمكاننا الاعتماد على كتيبات الإرشادات القياسية للتحسين. لم تكن المشكلة الحقيقية هي وزن الصورة أو وقت استجابة الخادم، بل كانت تتمثل في أنّ المتصفّحات كانت تختار عناصر غير متوقّعة على أنّها LCP بسبب انتقالات CSS وإشارات الأولوية غير المتوفّرة والتحميل الكسول الذي يتم تطبيقه على الصور في أعلى إطار العرض.

كانت عملية الإصلاح بسيطة بعد أن فهمنا الأسباب الأساسية: إزالة الانتقالات من الأقسام التي تظهر في الموضع الأول، وإزالة التحميل الكسول من الصور في أعلى إطار العرض، وإضافة إشارات أولوية صريحة. لقد طبّقنا ذلك باستمرار على مستوى جميع المظاهر الأساسية وأنواع الصفحات وأكثر من 180,000 متجر على منصتنا.

توضح النتائج نفسها: ارتفعت معدّلات اجتياز LCP من% 57 إلى %96، وارتفعت معدّلات اجتياز Core Web Vitals الإجمالية من% 48 إلى %72، وحقّق التجّار مكاسب قابلة للقياس: زيادة في معدّل الإحالات الناجحة بنسبة% 8.9 وزيادة في التفاعل مع سلة التسوّق على الأجهزة الجوّالة بنسبة% 8.4. لا تمثّل واجهات المتاجر السريعة إنجازًا فنيًا فحسب، بل إنّها تؤدي مباشرةً إلى نجاح التجّار.