يسلط جون مولر، مؤيد بحث Google، الضوء على دراسة حالة جديدة تشرح سبب فشل بعض تحسينات “أكبر محتوى للمحتوى” في كثير من الأحيان في تحقيق النتائج. في التخطيط الذي يختلف حسب المتجر، قد يركز المتصفح على العنصر الخاطئ، مما يتسبب في استهداف جميع التحسينات اللاحقة لشيء لم يكن LCP في المقام الأول.
تم نشر دراسة الحالة على web.dev في 24 يونيو، وهي تتضمن تفاصيل عام من العمل في Core Web Vitals في منصة التجارة الإلكترونية Nuvemshop. في البداية، اشتبه الفريق في أن وزن الصورة أو زمن وصول الخادم هما المشكلتان الرئيسيتان. ومع ذلك، فإن تحليلهم وجههم نحو كيفية اختيار المتصفح لعنصر LCP. بعد تحسين اختيار العناصر وأولوية الصورة والتحميل البطيء والتخزين المؤقت للحافة، أفادت Nuvemshop أن حصة متاجرها ذات درجات LCP الجيدة زادت من 57% إلى 96%.
كيف يتم اختيار العنصر الخاطئ
في Nuvemshop، يمكن للتجار تنظيم أقسام صفحتهم الرئيسية بأي ترتيب يفضلونه، مما يؤدي إلى ظهور الرف الدائري واللافتات وشبكات المنتجات في مواضع مختلفة عبر موضوعات مختلفة. وفقًا لدراسة الحالة، كانت عربات العرض الدوارة موجودة في 85% من واجهات المتاجر، وهذا هو المكان الذي واجه فيه القياس مشكلة.
نشأت المشكلة من انتقالات CSS على الرف الدائري واللافتات. تأخرت هذه التحولات عندما أصبحت العناصر مرئية لاكتشاف LCP الخاص بالمتصفح. بينما رأى المتسوقون تحميل الرف الدائري أولاً، حدد المتصفح أحيانًا لافتة في الأسفل كعنصر LCP لأن ظهوره لم يتأخر بسبب النقل. وبالتالي، وفقًا لـ Nuvemshop، ركزت جهود التحسين السابقة على عناصر لم تكن LCP أبدًا.
حدد التحقيق ثلاثة أسباب رئيسية. كانت التحولات تدفع الاكتشاف إلى الإطار الخاطئ، وكان التحميل البطيء يؤخر الصور الموجودة في الجزء المرئي من الصفحة والتي كانت تحتاج إلى التحميل على الفور، وكانت الصور المهمة تفتقر إلى إشارات الأولوية. بالإضافة إلى ذلك، نشأت القياسات من كل من صفحات الفئات والمنتجات، وليس الصفحات الرئيسية فقط، لذا يجب أن يكون الحل فعالاً عبر أنواع الصفحات المختلفة.
إصلاحات LCP الثلاثة
تتضمن دراسة الحالة تغييرًا رابعًا، وهو التخزين المؤقت للحد من زمن الوصول. ومع ذلك، تضمنت تعديلات اكتشاف العناصر الأساسية ثلاثة تعديلات في كيفية عرض الجزء العلوي من الصفحة وتحميله. نفذت Nuvemshop جميع التغييرات الثلاثة عبر موضوعاتها الرئيسية وأنواع صفحاتها. تعتبر هذه التعديلات واضحة ومباشرة، حيث تتبع أفضل الممارسات الشائعة لأداء الويب.
قام الفريق بإزالة انتقالات CSS من الأقسام العليا بحيث يتم عرضها على الفور، مما يتيح للمتصفح التعرف عليها كمرشحات LCP دون تأخير.
لقد انسحبوا أيضًا loading="lazy" قبالة الصورة الأولى في تلك الأقسام العليا. إن إرشادات web.dev الخاصة صريحة في هذا الشأن، حيث تحذر من التحميل البطيء لصورة LCP لأنها تضيف دائمًا تأخيرًا في التحميل.
<!-- Before -->
<img src="https://www.searchenginejournal.com/googles-mueller-flags-a-case-on-why-lcp-fixes-miss-the-target/581413/slide-1.webp" loading="lazy" alt="Featured product">
<!-- After -->
<img src="https://www.searchenginejournal.com/googles-mueller-flags-a-case-on-why-lcp-fixes-miss-the-target/581413/slide-1.webp" alt="Featured product">
القطعة الاخيرة كانت fetchpriority="high" على صورة LCP المحتملة، والتي تخبر الماسح الضوئي للتحميل المسبق للمتصفح بالتقاطها عاجلاً. يقول Nuvemshop أنه تم تغليف ذلك بمنطق التحقق من الصحة بحيث يتم إطلاق الإشارة فقط حيث يمكن أن يكون العنصر هو مرشح LCP حقًا. نصيحة Google هي حجز السمة لصورة أو صورتين رئيسيتين، لأنه إذا كان كل شيء ذو أولوية عالية، فلن يكون هناك أي شيء كذلك.
<!-- Before -->
<img src="https://www.searchenginejournal.com/googles-mueller-flags-a-case-on-why-lcp-fixes-miss-the-target/581413/slide-1.webp" alt="Featured product">
<!-- After -->
<img src="https://www.searchenginejournal.com/googles-mueller-flags-a-case-on-why-lcp-fixes-miss-the-target/581413/slide-1.webp" fetchpriority="high" alt="Featured product">
ماذا تقارير Nuvemshop آخر
تشير Nuvemshop إلى أن معدل النجاح الإجمالي لمؤشرات الويب الأساسية قد تحسن من 48% إلى 72% على مدار العام، وليس فقط رقم LCP.
قامت الشركة بمراجعة نفس المتاجر البرازيلية النشطة في كل من يناير 2025 و2026. بالنسبة لزوار الأجهزة المحمولة الذين يصلون عبر بحث Google العضوي، فقد سجلت زيادة بنسبة 8.9% في معدل التحويل وزيادة بنسبة 8.4% في التفاعل مع عربة التسوق.
ضع في اعتبارك أن هذه أرقام تم الإبلاغ عنها ذاتيًا، وأرقام التسوق عبارة عن مقارنة سنوية لتلك المجموعة، وليست اختبارًا خاضعًا للرقابة. تربط Nuvemshop الاتجاه بسرعة عملها من خلال الاعتماد على أبحاث Deloitte بتكليف من Google، والتي وجدت أن تقليل وقت التحميل بمقدار 0.1 ثانية يمكن أن يزيد تحويلات البيع بالتجزئة بنسبة 8.4%.
لماذا هذا مهم؟
قبل ضغط صورة رئيسية أخرى، تأكد جيدًا من أنك تقوم بتحسين العنصر الذي يعامله المتصفح بالفعل على أنه LCP. يعد هذا مهمًا بشكل خاص في التخطيطات المعتمدة على القوالب أو التخطيطات ذات العناصر الدائرية الثقيلة، حيث قد لا يتم تطبيقها.
تغطيتنا الأخيرة تقع في نفس المكان. في نظرة على Core Web Vitals عبر منصات CMS، أظهرت بيانات أرشيف HTTP أن LCP في العالم الحقيقي يميل إلى التعطل عندما يكون النظام الأساسي بطيئًا للسماح للمتصفح باكتشاف الصورة الرئيسية، أو عندما يجبر تلك الصورة على التنافس مع الكثير من الموارد الأخرى ذات الأولوية العالية، وليس فقط عندما تكون الصفحة ثقيلة. لقد شرح Barry Pollard أيضًا كيفية تتبع مشكلة LCP في PageSpeed Insights قبل لمس أي رمز.
يعكس رابط التحويل تفسير Nuvemshop للبيانات. تعد مؤشرات أداء الويب الأساسية مجرد عامل تصنيف ثانوي، وقد أكدت Google على الملاءمة باعتبارها أكثر أهمية، لذلك من الأفضل قراءة المتجر الأسرع باعتباره مكسبًا لتجربة التسوق وليس أداة للتصنيف.
التطلع إلى الأمام
هذه مجرد تجربة ذكرتها شركة واحدة ذاتيًا، لذا من الأفضل قراءة مكاسب التسوق على أنها اتجاهية. هذه التقنية في حد ذاتها ليست جديدة أيضًا، نظرًا لأن web.dev كان يدافع عن هذا النوع من أعمال الاكتشاف والأولوية لسنوات. ما تضيفه دراسة الحالة هو مثال عملي لتحديد عنصر LCP الحقيقي عبر التخطيطات التي تختلف من متجر إلى آخر، وهو الجزء الصعب في أي منصة قابلة للتخصيص.
صورة مميزة: com.victoriatudosi/ شترستوك
اكتشاف المزيد من قمم التجارية للأعمال
اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.
