نصائح مستنِدة إلى البيانات بشأن الصور التي يتم تحميلها ببطء مع مراعاة "مؤشرات أداء الويب الأساسية"
إنّ "التحميل الكسول" هو أسلوب لتأجيل تنزيل أحد الموارد إلى أن يكون هناك حاجة إليه، ما يساعد على الحفاظ على البيانات
وتقليل التنافس على الشبكة بالنسبة إلى الأصول المهمة. أصبح معيارًا على الويب في
2019، واليوم
يتّسم معظم المتصفحات الرئيسية بـ loading="lazy" للصور. يبدو هذا رائعًا، لكن هل هناك ما يجعل التحميل
كسولًا جدًا؟
تلخِّص هذه المشاركة الطريقة التي حلّلنا بها بيانات الشفافية على الويب المتاحة للجميع واختبار A/B المخصّص لفهم خصائص أداء واستخدام التحميل الكسول للصور المضمّنة في المحتوى الأصلي. وقد تبيّن لنا أنّ "التحميل الكسول" يمكن أن يكون أداة فعّالة إلى حد كبير لتقليل وحدات بايت الصور غير الضرورية، إلا أنّ الاستخدام المفرط يمكن أن يؤثر سلبًا في الأداء. أوضح تحليلنا أنّ زيادة سرعة تحميل الصور داخل إطار العرض الأولي، مع تحميل باقي الصور بسرعة أكبر، يمكن أن يمنحنا أفضل ما في الميزتَين، حيث يتم تحميل عدد أقل من وحدات البايت وتحسين مؤشرات أداء الويب الأساسية.
الاستخدام
وفقًا لأحدث البيانات الواردة في أرشيف HTTP، يستخدم 17% من المواقع الإلكترونية طريقة "التحميل الكسول" للصور، ما يتزايد بشكل سريع. يعد هذا وضعًا راسخًا في المنظومة المتكاملة بارزًا بالنسبة إلى واجهة برمجة تطبيقات جديدة نسبيًا.
إنّ الاستعلام عن البيانات في مشروع أرشيف HTTP يمنحنا فهمًا أوضح لأنواع المواقع الإلكترونية التي تزيد استخدامها: إنّ% 84 من المواقع الإلكترونية التي تستخدم طريقة \"التحميل الكسول\" مع الصور المضمّنة في الصورة تستخدم WordPress، و% 2 من المواقع الإلكترونية تستخدم نظام إدارة محتوى (CMS) آخر، و% 14 المتبقية لا تستخدم نظامًا معروفًا من أنظمة إدارة المحتوى. وتوضّح هذه النتائج مدى أهمية WordPress في الاعتماد على المواقع الإلكترونية.
ومن الجدير بالملاحظة أيضًا معدل الاستخدام. قبل عام واحد في تموز (يوليو) 2020، كانت مواقع WordPress التي تستخدم طريقة "التحميل الكسول" تشكّل عشرات الآلاف من المواقع الإلكترونية في مجموع 6 ملايين موقع (%1 من الإجمالي). ومنذ ذلك الحين، ازداد معدّل استخدام "التحميل الكسول" في خدمة WordPress وحدها، إذ وصل عدد المواقع الإلكترونية إلى أكثر من مليون موقع إلكتروني (%14 من إجمالي المواقع الإلكترونية).
الأداء الارتباطي
عند الاطّلاع على مزيد من التفاصيل في أرشيف HTTP، يمكننا مقارنة أداء الصفحات التي تتضمّن طريقة "التحميل الكسول" للصور المدمجة مع المحتوى أو التي لا تتضمّنه بمقياس سرعة عرض أكبر محتوى مرئي (LCP). يتم الحصول على بيانات LCP من تجارب المستخدم الفعلي من خلال تقرير تجربة المستخدم على Chrome (CrUX) بدلاً من الاختبار الاصطناعي في المختبر. يستخدم المخطط أدناه مخططًا مربعًا ورسميًا لتصوير توزيعات LCP المئوية الخامسة والسبعين من كل صفحة: تمثل الخطوط الشريحتين المئويتين العاشرة والتسعين، بينما تمثل المربعات النسب المئوية الخامسة والعشرين والخامسة والسبعين.
إنّ نسبة سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) في الصفحة التي لا تتضمّن طريقة "التحميل الكسول" هي 75%، وتبلغ 2,922 ملي ثانية مقارنةً بـ 3,546 ملي ثانية للصفحة ذات التحميل الكسول. بشكل عام، تكون أداء المواقع الإلكترونية التي تستخدم طريقة "التحميل الكسول" أسوأ من سرعة LCP بشكل عام.
من المهم الإشارة إلى أنّ هذه النتائج مترابطة ولا تشير بالضرورة إلى التحميل الكسول باعتباره السبب لبطء الأداء. من الناحية الافتراضية، إذا كانت مواقع WordPress الإلكترونية تبدو أبطأ قليلاً، وبالنظر إلى مقدار بطء التحميل في مواقعها الإلكترونية، يمكن أن يفسّر ذلك الفرق. ولذلك، دعونا نحاول التخلّص من هذا التباين من خلال النظر إلى مواقع WordPress فقط.
ولسوء الحظ، يظهر النمط نفسه عند التوغّل في صفحات WordPress، فالصفحات التي تستخدم طريقة \"التحميل الكسول\" تميل إلى البطء في أداء سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP). سجّلت صفحة WordPress التي لا تتضمّن طريقة "التحميل الكسول" نسبة 75% من LCP تبلغ 3,495 ملي ثانية، مقارنةً بـ 3,768 ملي ثانية للصفحة ذات التحميل الكسول.
وهذا لا يزال غير دليل على أنّ التحميل الكسول يؤدي إلى بطء الصفحات، إلا أنّ استخدامه يتزامن مع تباطؤ الأداء. لمحاولة الإجابة على سؤال السببية، قمنا بإعداد اختبار أ/ب معملي.
الأداء السببي
كان الهدف من اختبار أ/ب هو إثبات أو دحض الفرضية التي تفيد بأنّ التحميل الكسول للصور الأصلية، وفقًا لما تم تنفيذه في نظام WordPress الأساسي، قد أدّى إلى تباطؤ أداء سرعة عرض أكبر جزء من المحتوى على الصفحة وتقليل وحدات بايت الصور. وكانت المنهجية التي استخدمناها هي اختبار موقع إلكتروني تجريبي من 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% |
تقارن النتائج أعلاه متوسط عدد وحدات بايت الصور (بالكيلوبايت) لكل اختبار. وكما هو متوقّع، يؤثر التحميل الكسول بشكل إيجابي جدًا في تقليل عدد وحدات البايت الخاصة بالصور. إذا كان هناك مستخدم حقيقي يجري تمريرًا لأسفل الصفحة بأكملها، سيتم تحميل جميع الصور على أي حال عند عبورها لإطار العرض، ولكن هذه النتائج تعرض الأداء المحسّن للتحميل الأولي للصفحة.
ولتلخيص نتائج اختبار A/B، يساعد أسلوب "التحميل الكسول" الذي يستخدِمه WordPress بشكل واضح جدًا في تقليل وحدات البايت الخاصة بالصور ولكن على حساب تأخير سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP).
اختبار الحلول
قبل أن نتناول كيفية تنفيذ الإصلاح، لنلقِ نظرة على آلية عمل "التحميل الكسول" في WordPress في الوقت الحالي. يتمثّل الجانب الأهم في طريقة التنفيذ الحالية في أنّه يحمّل الصور في الجزء المرئي من الصفحة (داخل إطار العرض) باستخدام طريقة التحميل الكسول. إنّ مشاركة المدونة التي نشرتها "نظام إدارة المحتوى" (CMS) تشير إلى أنّ هذا النمط يجب تجنُّبه، إلا أنّ البيانات التجريبية في وقت سابق أشارت إلى أنّ التأثير على سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) كان ضئيلاً، ويستحق تبسيط عملية التنفيذ في نظام WordPress الأساسي.
استنادًا إلى هذه البيانات الجديدة، صمّمنا حلّاً تجريبيًا يتجنّب الصور التي يتم تحميلها ببطء في الجزء المرئي من الصفحة، واختبرناها في ظلّ اختبار A/B الأول.
| سلاسل فيديوهات | التلقائية | غير مفعّلة | 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) بشكل كامل. كيف يمكن أن يكون التحميل أسرع من التحميل الكسول على الإطلاق؟ أحد التفسيرات هو أنّه في حال عدم تحميل الصور في الجزء السفلي غير المرئي من الصفحة، يقل تزايد الطلب على الشبكة مع صورة 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 لتنفيذ الإصلاح التجريبي. وسنعدّل أيضًا الإرشادات في مشاركة المدونة التحميل الكسول على مستوى المتصفِّح لأنظمة إدارة المحتوى لتوضيح الآثار السلبية للتحميل الكسول في الجزء المرئي من الصفحة والطريقة التي يمكن بها لأنظمة إدارة المحتوى استخدام الإرشادات لتجنُّب حدوثها.
بما أنّ أفضل الممارسات هذه تنطبق على جميع مطوّري البرامج على الويب، قد يكون من المفيد أيضًا الإبلاغ عن الأنماط السلبية للتحميل الكسول في أدوات مثل 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 الأساسي قريبًا. وإذا كنت تستخدم نظام إدارة محتوى آخر، احرص على معرفته بمشاكل الأداء المحتملة الموضّحة هنا.
إنّ تجربة واجهات برمجة التطبيقات الجديدة نسبيًا لمنصات الويب قد تنطوي على مخاطر ومكافآت، ويُطلق عليها لسبب ما ميزات متطورة. بدأنا في مرحلة تصوّر التحميل الكسول للصور الأصلية، إلا أنّنا نلاحظ أيضًا الجوانب الإيجابية لطريقة استخدامه لتحقيق أداء أفضل.
تصوير "فرانكي لوبيز" على UnLaunch