تأثيرات الأداء الناتجة عن استخدام ميزة "التحميل الكسول" بشكل مفرط

نصائح مستندة إلى البيانات حول التحميل الكسول للصور مع مراعاة "مؤشرات أداء الويب الأساسية"

Felix Arntz

Rick Viscomi

التحميل الكسول هو أسلوب يؤجّل تنزيل أحد الموارد إلى حين الحاجة إليه، وذلك للحفاظ على البيانات وتقليل التنافس على الشبكة للحصول على مواد العرض المهمة. أصبح هذا السمة معيارًا للويب في عام 2019، واليوم أصبحت السمة loading="lazy" للصور متوافقة مع معظم المتصفحات الرئيسية.

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

الاستخدام

وفقًا لأحدث البيانات في أرشيف HTTP، يتم استخدام ميزة التحميل الكسول المضمّنة للصور في %29 من المواقع الإلكترونية، ويتزايد معدّل استخدامها بسرعة.

الاستعلام عن البيانات الأولية في مشروع HTTP Archive يمنحنا فهمًا أوضح لأنواع المواقع الإلكترونية التي تعتمد هذه الميزة: %84 من المواقع الإلكترونية التي تستخدم ميزة التحميل الكسول للصور على مستوى المتصفّح تستخدم WordPress، و% 2 تستخدم نظام إدارة محتوى آخر، والنسبة المتبقية% 14 لا تستخدم نظام إدارة محتوى معروفًا. توضّح هذه النتائج كيف أنّ WordPress يتصدّر عملية الاعتماد.

تجدر الإشارة أيضًا إلى معدّل الاعتماد. قبل عام واحد، في تموز (يوليو) 2020، كانت مواقع WordPress الإلكترونية التي تستخدم ميزة التحميل الكسول تشكّل عشرات الآلاف من المواقع الإلكترونية في مجموعة تضم حوالي 6 ملايين موقع إلكتروني (أي% 1 من الإجمالي). ومنذ ذلك الحين، ارتفع معدّل استخدام ميزة "التحميل الكسول" في WordPress وحدها إلى أكثر من مليون موقع إلكتروني (%14 من الإجمالي).

الأداء الارتباطي

بالتعمّق أكثر في HTTP Archive، يمكن مقارنة أداء الصفحات التي تستخدم ميزة التحميل الكسول للصور على مستوى المتصفّح مع الصفحات التي لا تستخدمها، وذلك من خلال مقياس "سرعة عرض أكبر محتوى مرئي" (LCP). تأتي بيانات LCP من تجارب المستخدمين الحقيقيين من تقرير تجربة المستخدم على Chrome (CrUX) بدلاً من الاختبارات الاصطناعية في المختبر. يستخدم الرسم البياني التالي مخطط الصندوق والشاربين لعرض توزيعات الشريحة المئوية الـ 75 لمقياس LCP لكل صفحة: تمثّل الخطوط الشريحتين المئويتين الـ 10 والـ 90، وتمثّل الصناديق الشريحتين المئويتين الـ 25 والـ 75.

يبلغ متوسط وقت LCP للصفحة التي لا تستخدم التحميل الكسول 2,922 ملي ثانية في الشريحة المئوية الـ 75، مقارنةً بـ 3,546 ملي ثانية لمتوسط وقت LCP للصفحة التي تستخدم التحميل الكسول. بشكل عام، تميل المواقع الإلكترونية التي تستخدم ميزة "التحميل الكسول" إلى تحقيق أداء أسوأ في مقياس LCP.

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

للأسف، يظهر النمط نفسه عند التعمّق في صفحات WordPress، إذ تميل الصفحات التي تستخدم ميزة "التحميل الكسول" إلى تحقيق أداء أبطأ في مقياس LCP. يبلغ متوسط وقت عرض أكبر جزء من المحتوى (LCP) في صفحات WordPress التي لا تستخدم ميزة التحميل الكسول 3,495 ملي ثانية في الشريحة المئوية الخامسة والسبعين، مقارنةً بـ 3,768 ملي ثانية في الصفحات التي تستخدم هذه الميزة.

لا يثبت ذلك أنّ التحميل الكسول يؤدي إلى إبطاء الصفحات، ولكن استخدامه يتزامن مع انخفاض مستوى الأداء. لمحاولة الإجابة عن سؤال السببية، تم إعداد اختبار A/B مستند إلى المختبر.

أداء Causal

كان الهدف من اختبار A/B هو إثبات أو دحض الفرضية القائلة بأنّ التحميل الكسول المضمّن للصور، كما هو مطبّق في نواة WordPress، يؤدي إلى أداء أبطأ لمقياس LCP وعدد أقل من وحدات بايت الصور. المنهجية المستخدَمة هي اختبار موقع إلكتروني تجريبي على WordPress باستخدام المظهر twentytwentyone. تم اختبار كل من نوعَي الصفحات، أي صفحة الأرشيف والصفحة الواحدة، وهما يشبهان الصفحة الرئيسية وصفحة المقالة، على أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة التي تمت محاكاتها باستخدام WebPageTest. تم اختبار كل مجموعة من الصفحات التي تم تفعيل التحميل الكسول فيها والتي لم يتم تفعيلها، وتم إجراء كل اختبار تسع مرات للحصول على متوسط قيمة LCP وعدد وحدات بايت الصور.

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

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

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

لتلخيص نتائج اختبار A/B، تساعد تقنية التحميل الكسول التي يستخدمها WordPress بشكل واضح جدًا في تقليل وحدات بايت الصور على حساب تأخير مقياس LCP.

اختبار حلّ

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

بناءً على هذه البيانات الجديدة، تم إنشاء إصلاح تجريبي يتجنّب التحميل الكسول للصور التي تظهر في الجزء المرئي من الصفحة، وتم اختبار الإصلاح في ظل الظروف نفسها التي تم فيها إجراء اختبار A/B الأول.

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

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

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

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

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

التنفيذ

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

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

new PerformanceObserver((list) => {
  const latestEntry = list.getEntries().at(-1);

  if (latestEntry?.element?.getAttribute('loading') == 'lazy') {
    console.warn('Warning: LCP element was lazy loaded', latestEntry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

سيقيّم مقتطف JavaScript السابق أحدث عنصر LCP ويسجّل تحذيرًا إذا تم تحميله بشكل بطيء.

يُبرز هذا أيضًا جانبًا سلبيًا لأسلوب التحميل الكسول وإمكانية تحسين واجهة برمجة التطبيقات على مستوى المنصة. على سبيل المثال، هناك مشكلة مفتوحة في Chromium لتجربة تحميل الصور القليلة الأولى بشكلٍ أصلي، على غرار الإصلاح، على الرغم من السمة loading.

الخاتمة

إذا كان موقعك الإلكتروني يستخدم ميزة التحميل الكسول للصور على مستوى المتصفّح، تحقَّق من كيفية تنفيذها وأجرِ اختبارات A/B لفهم تكاليف أدائها بشكل أفضل. قد يستفيد من تحميل الصور في الجزء المرئي من الصفحة بشكل أسرع. إذا كان لديك موقع إلكتروني على WordPress، من المفترض أن يتم قريبًا طرح رمز تصحيحي في نواة WordPress. وإذا كنت تستخدم نظام إدارة محتوى آخر، تأكَّد من أنّك على عِلم بمشاكل الأداء المحتملة الموضّحة هنا.

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