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

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

Felix Arntz

Rick Viscomi

"التحميل البطيء" هو أسلوب يؤجل تنزيل أحد الموارد إلى حين الحاجة إليه، وذلك للحفاظ على البيانات والحد من ازدحام الشبكة بسبب مواد العرض المهمة. أصبح تنسيق loading="lazy" تنسيقًا قياسيًا للويب في 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) بدلاً من الاختبار الاصطناعي في المختبر. يستخدم الرسم البياني التالي مخطّط مربّعات الأشرطة لعرض توزيعات مقياس LCP الخاص بكل صفحة في الشريحة المئوية الـ 75: تمثل الخطوط الشريحة المئوية العاشرة والتسعين، بينما تمثل المربّعات الشريحة المئوية الـ 25 والـ 75.

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

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

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

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

الأداء السببي

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

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

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

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

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

اختبار أحد الحلول

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

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

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

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

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

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

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

التنفيذ

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

بما أنّ أفضل الممارسات هذه تنطبق على جميع مطوّري الويب، قد يكون من المفيد أيضًا الإبلاغ عن أنماط تحميل بطيء في أدوات مثل 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.

الخاتمة

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

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

صورة فرانكي لوبيز على Unsplash