نصائح مستندة إلى البيانات بشأن الصور الكسولة التحميل مع أخذ "مؤشرات أداء الويب الأساسية" في الاعتبار.
التحميل الكسول هو أسلوب يؤجل تنزيل أحد الموارد إلى أن تكون هناك حاجة إليه، وذلك للحفاظ على البيانات وتقليل التنافس على الشبكة بالنسبة إلى مواد العرض المهمة. وقد أصبح معيارًا على الويب في 2019 وأصبح اليوم loading="lazy" للصور متوافقًا مع معظم المتصفحات الرئيسية.
يلخّص هذا الدليل طريقة تحليل بيانات شفافية الويب المتاحة للجميع واختبار A/B المخصّص لفهم خصائص استخدام طريقة "التحميل الكسول" للصور على مستوى المتصفّح ومستوى أدائها. أظهرت النتائج أنّ "التحميل الكسول" يمكن أن يكون أداة فعالة بشكل كبير لتقليل وحدات البايت غير اللازمة للصور، إلا أنّ الإفراط في استخدامه يمكن أن يؤثر سلبًا في الأداء. في الواقع، يبيّن هذا التحليل أنّ زيادة وقت التحميل في إطار العرض الأولي للصور أثناء التحميل الكسول لبقية العناصر يمكن أن يساعدنا على توفير أفضل ما في الأمرين، حيث يتم تحميل وحدات بايت أقل وتحسين مؤشرات أداء الويب الأساسية.
الاستخدام
وفقًا لأحدث البيانات الواردة في أرشيف HTTP، يستخدم 29% من المواقع الإلكترونية طريقة التحميل الكسول المدمج للصور، ويتزايد استخدامها بسرعة.
إنّ إجراء طلبات البحث عن البيانات الأولية في مشروع "أرشيف HTTP" يمنحنا فهمًا أوضح لأنواع المواقع الإلكترونية التي تعزِّز الاستخدام: 84% من المواقع الإلكترونية التي تستخدم التحميل الكسول للصور على مستوى المتصفّح تستخدم WordPress، و2% من المواقع الإلكترونية تستخدم نظامًا آخر لإدارة المحتوى، والنسبة المتبقية التي تبلغ% 14 لا تستخدم نظام إدارة محتوى معروفًا. وتوضّح هذه النتائج كيف تقود WordPress في المنافسة،
ومن الجدير بالذكر أيضًا معدل الاعتماد. في شهر تموز (يوليو) 2020، كانت مواقع WordPress الإلكترونية التي تستخدم التحميل الكسول تشكل عشرات الآلاف من المواقع الإلكترونية ضمن مجموعة شملت حوالي 6 ملايين موقع (بنسبة% 1 من الإجمالي). ومنذ ذلك الحين، زاد استخدام التحميل الكسول في WordPress فقط إلى أكثر من مليون موقع إلكتروني (%14 من الإجمالي).
الأداء العلائقي
عند التعمّق أكثر في أرشيف HTTP، يمكن مقارنة مستوى أداء الصفحات التي تتضمن أو لا تستخدم التحميل الكسول للصور على مستوى المتصفح مع مقياس "سرعة عرض أكبر محتوى مرئي" (LCP). إنّ مصدر بيانات LCP هو تجارب المستخدمين الفعليين من تقرير تجربة المستخدم على Chrome (CrUX) بدلاً من الاختبارات الاصطناعية في المختبر. يستخدم الرسم البياني التالي مخطَّطًا مستنِدًا إلى المربّعات ومربّعًا ومربّعًا لعرض توزيعات سرعة عرض أكبر محتوى مرئي (LCP) الشريحة المئوية الخامسة والسبعين لكل صفحة: تمثّل الخطوط الشريحتين المئويتين 10 و90، وتمثِّل المربّعات الشريحتين المئويتين 25 و75.
تتميز الصفحة المتوسطة التي لا تتضمن طريقة "التحميل الكسول" بمقياس LCP بنسبة 75% يبلغ 2,922 مللي ثانية، مقارنةً بـ 3,546 مللي ثانية للصفحة المتوسطة ذات التحميل الكسول. بوجه عام، يكون أداء المواقع الإلكترونية التي تستخدم التحميل الكسول أقل من حيث سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP).
من المهم الإشارة إلى أنّ هذه النتائج مترابطة ولا تشير بالضرورة إلى أنّ التحميل الكسول هو سبب لبطء الأداء. من الناحية الافتراضية، إذا كانت مواقع WordPress الإلكترونية تميل إلى أن تكون أبطأ قليلاً، مع الأخذ في الاعتبار مدى احتواءها على المجموعة النموذجية من التحميل الكسول، يمكن أن يفسّر ذلك الفرق. لإزالة هذا التباين، يمكن تضييق نطاق التركيز على مواقع WordPress الإلكترونية تحديدًا.
يظهر النمط نفسه عند التوغّل في صفحات WordPress، لأنّ الصفحات التي تستخدم التحميل الكسول تسجّل أداء أبطأ من خلال سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP). تتميز صفحة WordPress المتوسطة التي لا تتضمن طريقة "التحميل الكسول" بالشريحة المئوية الخامسة والسبعين لـ LCP تبلغ 3,495 مللي ثانية، مقارنةً بـ 3,768 مللي ثانية للصفحة المتوسطة ذات التحميل الكسول.
ولا يزال ذلك لا يثبت أنّ طريقة "التحميل الكسول" تتسبب في بطء أداء الصفحات، غير أنّ استخدامها يتزامن مع انخفاض مستوى الأداء. لمحاولة الإجابة عن السؤال السببية، تم إعداد اختبار أ/ب في المختبر.
الأداء السببي
كان الهدف من اختبار أ/ب هو إثبات أو دحض الفرضية بأنّ التحميل الكسول الصور المُدمَج، وفقًا لتطبيقه في خدمة WordPress الأساسية، أدّى إلى بطء أداء LCP وتقليل وحدات البايت للصور. وكانت المنهجية المستخدَمة لاختبار موقع إلكتروني WordPress تجريبي باستخدام الموضوع twentytwentyone. تم اختبار كلٍ من نوعَي الأرشيف و"الصفحة الفردية"، مثل صفحتَي الصفحة الرئيسية وصفحات المقالات، على أجهزة الكمبيوتر والأجهزة الجوّالة في وضع المحاكاة باستخدام WebPageTest. ولقد تم اختبار كل مجموعة من الصفحات التي تم فيها تفعيل التحميل الكسول أو بدونها، وتم إجراء كل اختبار تسع مرات للحصول على متوسط قيمة LCP وعدد وحدات البايت للصور.
| سلاسل فيديوهات | التلقائية | غير مفعّلة | الفرق عن الخيار التلقائي |
|---|---|---|---|
| twentytwentyone-archive-desktop | 2,029 | 1,759 | -13% |
| twentytwentyone-archive-mobile | 1,657 | 1,403 | أقل من 15% |
| twentytwentyone-single-desktop | 1,655 | 1,726 | 4% |
| twentytwentyone-single-mobile | 1,352 | 1,384 | 2% |
تقارن هذه النتائج متوسط سرعة عرض أكبر محتوى مرئي بالمللي ثانية في الاختبارات على صفحات الأرشيف والصفحات الفردية لأجهزة الكمبيوتر المكتبي والأجهزة الجوّالة. بعد إيقاف "التحميل الكسول" على صفحات الأرشيف، تحسّنت سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) بمقدار هامش كبير. غير أنّ ذلك لم يحدث فرقًا كبيرًا في الصفحات الفردية.
يبدو أنّ إيقاف طريقة "التحميل الكسول" يجعل الصفحات الفردية أسرع قليلاً. مع ذلك، يختلف الفارق في سرعة عرض أكبر محتوى مرئي (LCP) عن انحراف معياري واحد لكل من اختبارات أجهزة كمبيوتر سطح المكتب والأجهزة الجوّالة، لذا يمكن أن يعود ذلك إلى التباين ويعتبر التغيير محايدًا بشكل عام. وبالمقارنة، يكون الفرق بين صفحات الأرشيف أقرب إلى انحرافين إلى ثلاثة انحرافات معيارية.
| سلاسل فيديوهات | التلقائية | غير مفعّلة | الفرق عن الخيار التلقائي |
|---|---|---|---|
| twentytwentyone-archive-desktop | 577 | 1173 | 103% |
| twentytwentyone-archive-mobile | 172 | 378 | 120% |
| twentytwentyone-single-desktop | 301 | 850 | 183% |
| twentytwentyone-single-mobile | 114 | 378 | 233% |
تقارن هذه النتائج متوسط عدد وحدات بايت الصورة (بالكيلوبايت) لكل اختبار. كما هو متوقع، يكون لاستخدام "التحميل الكسول" تأثير إيجابي واضح جدًا في تقليل عدد وحدات بايت الصورة. إذا كان المستخدم الفعلي يمرر عبر الصفحة بأكملها، فسيتم تحميل جميع الصور على أي حال عند عبورها إلى إطار العرض، ولكن هذه النتائج تُظهر الأداء المحسّن للتحميل الأولي للصفحة.
لتلخيص نتائج اختبار أ/ب، يساعد أسلوب التحميل الكسول الذي تستخدمه منصة WordPress بشكل واضح على تقليل وحدات البايت الخاصة بالصور مقابل سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP).
اختبار أحد الحلول
إنّ أهم جانب في عملية التحميل الكسول الحالية في WordPress لهذه التجربة هو التحميل الكسول للصور داخل إطار العرض (الجزء المرئي من الصفحة). تقرّ مدوّنة "نظام إدارة المحتوى" (CMS) بهذا كنمط يجب تجنّبه، إلا أنّ البيانات التجريبية في ذلك الوقت أشارت إلى أنّ التأثير على سرعة عرض أكبر محتوى مرئي (LCP) كان ضئيلاً ويستحق تبسيط عملية التنفيذ في خدمة WordPress الأساسية.
استنادًا إلى هذه البيانات الجديدة، توصّلنا إلى إصلاح تجريبي يتجنّب الصور التي يتم تحميلها في الجزء المرئي من الصفحة التي تؤدي إلى التحميل الكسول، وتم اختبار الإصلاح في ظل الظروف نفسها كما تم إجراء اختبار أ/ب الأول.
| سلاسل فيديوهات | التلقائية | غير مفعّلة | fix | الفرق عن الخيار التلقائي | الفرق بين البيانات التي تم إيقافها |
|---|---|---|---|---|---|
| twentytwentyone-archive-desktop | 2,029 | 1,759 | 1,749 | -14% | -1% |
| twentytwentyone-archive-mobile | 1,657 | 1,403 | 1,352 | -18% | -4% |
| twentytwentyone-single-desktop | 1,655 | 1,726 | 1,676 | 1% | -3% |
| twentytwentyone-single-mobile | 1,352 | 1,384 | 1,342 | -1% | -3% |
هذه النتائج واعدة أكثر. ويؤدي التحميل الكسول للصور في الجزء السفلي غير المرئي من الصفحة فقط إلى عكس انحدار سرعة عرض أكبر محتوى مرئي (LCP) وقد يحدث تحسين طفيف نتيجة إيقاف طريقة "التحميل الكسول" تمامًا. كيف يمكن أن تكون أسرع من طريقة التحميل الكسول على الإطلاق؟ أحد التفسيرات هو أنه عند عدم تحميل صور في الجزء السفلي غير المرئي من الصفحة، يقل تعارض الشبكة مع صورة LCP، ما يمكّنها من التحميل بسرعة أكبر.
| سلاسل فيديوهات | التلقائية | غير مفعّلة | fix | الفرق عن الخيار التلقائي | الفرق بين البيانات التي تم إيقافها |
|---|---|---|---|---|---|
| twentytwentyone-archive-desktop | 577 | 1173 | 577 | 0% | -51% |
| twentytwentyone-archive-mobile | 172 | 378 | 172 | 0% | -54% |
| twentytwentyone-single-desktop | 301 | 850 | 301 | 0% | -65% |
| twentytwentyone-single-mobile | 114 | 378 | 114 | 0% | -70% |
في ما يتعلق بوحدات البايت الخاصة بالصور، لا يحدث أي تغيير على الإطلاق في عملية الإصلاح مقارنةً بالسلوك التلقائي. هذا رائع لأنه كان إحدى نقاط قوة النهج الحالي.
يأتي هذا الإصلاح مع بعض المحاذير. تحدِّد منصة 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)، تأكّد من أنّه على عِلم بمشاكل الأداء المحتملة الموضّحة هنا.
يمكن أن تصاحب تجربة واجهات برمجة التطبيقات الجديدة نسبيًا للأنظمة الأساسية للويب مخاطر ومكافآت - يطلق عليها اسم ميزات متطورة لسبب ما. على الرغم من أنّنا بدأنا في التعرّف على مدى أهمية التحميل الكسول للصور على مستوى المتصفّح، نلاحظ أيضًا إيجابيات طريقة استخدام هذه الميزة لتحسين الأداء.
صورة من تصوير فرانكي لوبيز على قناة Unسباش