تحميل هجين كسول: هجرة تدريجية إلى تحميل محلي كسول

في الأسابيع القليلة الماضية ، ربما سمعت أو قرأت عن التحميل البطيء الأصلي ، والذي سيأتي إلى Chromium 75 في الأشهر المقبلة.

"نعم ، خبر رائع ، ولكن علينا الانتظار حتى تدعمه جميع المتصفحات."

إذا كان هذا هو أول ما خطر ببالك ، فاستمر في القراءة. سأحاول إقناعك بالعكس.

لنبدأ بمقارنة بين التحميل البطيء الأصلي والتحميل الجيد المستند إلى JavaScript.

تحميل كسول أصلي مقابل جافا سكريبت

التحميل الكسول هو وسيلة لتحسين أداء موقع الويب أو تطبيق الويب عن طريق زيادة سرعة عرض الصور الموجودة في الجزء العلوي من الصفحة وإطارات iframe (وأحيانًا مقاطع الفيديو) عن طريق تأجيل تحميل المحتوى الموجود في الجزء السفلي من الصفحة.

تحميل كسول يحركه جافا سكريبت

من أجل التحميل البطيء للصور أو إطارات iframe ، من الشائع جدًا ترميزها عن طريق استبدال سمة src المناسبة بسمة بيانات مماثلة ، data-src ، ثم الاعتماد على حل JavaScript لاكتشاف متى يتم الحصول على الصور / iframes بالقرب من الجزء المرئي من موقع الويب (عادةً لأن المستخدم مرر لأسفل) ولنسخ سمات البيانات إلى السمات المناسبة ، ثم تشغيل التحميل المؤجل لمحتواها.

 <img data-src="turtle.jpg" alt="Lazy turtle" class="lazy">

الأصلي كسول التحميل

وفقًا لمواصفات التحميل البطيء الأصلية (لا تزال قيد التطوير) ، إذا كنت تريد التحميل البطيء للصور أو إطارات iframe باستخدام ميزة التحميل البطيء الأصلية ، فستحتاج فقط إلى إضافة loading=lazy على العلامة ذات الصلة.

 <img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

كتب آدي عثماني على نطاق واسع حول هذا الموضوع في مقالته "الصورة الأصلية Lazy-Loading For The Web!" الذي ذكر فيه أن فريق Google Chrome يطورون الميزة بالفعل ويعتزمون شحنها في Chrome 75.

ستستفيد المتصفحات الأخرى المستندة إلى Chromium مثل Opera و Microsoft Edge من هذا التطوير من خلال اكتساب نفس الميزة في التحديث الأول الخاص بهم استنادًا إلى Chromium 75.

ابدأ مع التحميل الأصلي الكسول

في حالة تنزيل صور موقع الويب الخاص بك مرة واحدة عند هبوط الصفحة دون التحميل البطيء ، يمكنك تمكين (حيثما يكون مدعومًا) التحميل البطيء الأصلي في موقع الويب الخاص بك بسهولة مثل إضافة سمة HTML. تخبر سمة loading المتصفحات بالصور التي يجب تحميلها على الفور ، وأيها يمكن تنزيلها بتكاسل أثناء قيام المستخدمين بالتمرير لأسفل. يمكن تطبيق نفس السمة على إطارات iframe.

لإخبار المتصفحات بأهمية صورة معينة حتى يتمكنوا من تحميلها في أسرع وقت ممكن ، يجب إضافة سمة loading="eager" على علامة img . أفضل ممارسة هي القيام بذلك للصور الأساسية - عادةً للصور التي سيتم عرضها في الجزء المرئي من الصفحة.

 <img src="rabbit.jpg" alt="Fast rabbit" loading="eager">

لإخبار المتصفحات بضرورة تنزيل صورة بطيئة ، ما عليك سوى إضافة سمة loading="lazy" . هذه أفضل ممارسة فقط إذا قمت بذلك فقط للصور الثانوية - عادةً ما يتم عرض الصور أسفل الجزء المرئي من الصفحة.

 <img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

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

هذا هو أفضل نهج للاستخدام إذا كان موقع الويب الخاص بك لا يستخدم أي نوع من التحميل البطيء اليوم ، ولكن إذا قمت بالفعل بتنفيذ حل تحميل بطيء يعتمد على JavaScript ، فقد ترغب في الاحتفاظ به أثناء التبديل التدريجي إلى التحميل البطيء الأصلي.

سيكون الحل المثالي هو البدء في استخدام التحميل البطيء الأصلي على الفور ، واستخدام polyfill لجعله يعمل عبر جميع المتصفحات. لسوء الحظ ، التحميل البطيء الأصلي ليس ميزة يمكننا ملؤها باستخدام JavaScript.

لا فائدة من Polyfill

عندما يتم إصدار تقنية متصفح جديدة لمتصفح واحد ، عادةً ما يقوم مجتمع المصدر المفتوح بإصدار ملف JavaScript polyfill لتوفير نفس التقنية لبقية المتصفحات. على سبيل المثال ، يستخدم polyfill IntersectionObserver عناصر JavaScript وعناصر DOM لتنسيق Element.getBoundingClientRect() لإعادة إنتاج سلوك واجهة برمجة التطبيقات الأصلية.

لكن حالة التحميل البطيء الأصلي مختلفة لأن ملف JavaScript متعدد التعبئة loading="lazy" يجب أن يمنع المتصفحات من تحميل المحتوى بمجرد العثور على عنوان URL في ترميز صورة أو iframe. لا تتحكم JavaScript في هذه المرحلة الأولية من عرض الصفحة ، لذلك لا يمكن تعويض التحميل البطيء الأصلي.

هجين تحميل كسول

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

التحميل البطيء المختلط هو أسلوب لاستخدام التحميل البطيء الأصلي على المتصفحات التي تدعمه ، وإلا ، اعتمد على JavaScript للتعامل مع التحميل البطيء.

"

من أجل القيام بالتحميل البطيء المختلط ، تحتاج إلى ترميز المحتوى البطيء الخاص بك باستخدام سمات data بدلاً من السمات الحقيقية (مثل التحميل البطيء الذي يحركه جافا سكريبت) ، وإضافة سمة loading="lazy" .

 <img data-src="turtle.jpg" loading="lazy" alt="Lazy turtle">

ثم تحتاج إلى بعض JavaScript. في المقام الأول ، تحتاج إلى اكتشاف ما إذا كان التحميل البطيء الأصلي مدعومًا أم لا بواسطة المتصفح . بعد ذلك ، قم بأحد الإجراءات التالية لكل عنصر باستخدام السمة loading="lazy" :

• إذا كان التحميل البطيء الأصلي مدعومًا ، فانسخ قيمة السمة data-src إلى السمة src ؛
• إذا لم يكن مدعومًا ، فقم بتهيئة برنامج نصي أو مكون إضافي لجافا سكريبت التحميل البطيء للقيام بذلك أثناء دخول العناصر إلى منفذ العرض.

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

 if ('loading' in HTMLImageElement.prototype)

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

إليك مقتطف من التعليمات البرمجية التي تفعل ذلك.

 <!-- In-viewport images should be loaded normally, or eagerly --> <img src="important.jpg" loading="eager" alt="Important image"> <!-- Let's lazy-load the rest of these images --> <img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1"> <img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2"> <img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3"> <script> (function() { if ("loading" in HTMLImageElement.prototype) { var lazyEls = document.querySelectorAll("[loading=lazy]"); lazyEls.forEach(function(lazyEl) { lazyEl.setAttribute( "src", lazyEl.getAttribute("data-src") ); }); } else { // Dynamically include a lazy loading library of your choice // Here including vanilla-lazyload var script = document.createElement("script"); script.async = true; script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"; window.lazyLoadOptions = { elements_selector: "[loading=lazy]" //eventually more options here }; document.body.appendChild(script); } })(); </script>

يمكنك العثور على الرمز أعلاه واختباره في هذا العرض التوضيحي المباشر.

ومع ذلك ، يعد هذا نصًا أساسيًا للغاية ، ويمكن أن تتعقد الأمور عند استخدام سمات أو علامات إضافية للحصول على صور متجاوبة (مثل سمات srcset sizes أو حتى علامات picture source ).

القليل من مساعدة الطرف الثالث

على مدى السنوات الأربع الماضية ، كنت أحتفظ بنص برمجي للتحميل البطيء مفتوح المصدر باسم " vanilla-lazyload " ، وفي غضون يومين بعد أن كتبت آدي عثماني عن التحميل البطيء الأصلي ، كان رد فعل المجتمع من خلال سؤالي عما إذا كان البرنامج النصي الخاص بي يستطيع بمثابة بوليفيل.

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

بدءًا من الإصدار 12 من vanilla-lazyload ، يمكنك فقط ضبط خيار use_native على " true " لتمكين التحميل البطيء الهجين. يبلغ حجم النص البرمجي 2.0 كيلو بايت gzipped وهو متاح بالفعل على GitHub و npm و jsDelivr.

• تعرف vanilla-lazyload على جيثب

العروض

يمكنك بدء اللعب مع التحميل البطيء الأصلي اليوم عن طريق تنزيل Chrome Canary أو Microsoft Edge Insider ( قناة مطور ) ثم تمكين العلامتين "تمكين التحميل البطيء للصور" و "تمكين التحميل البطيء للإطار". لتمكين هذه العلامات ، أدخل about:flags في حقل عنوان URL الخاص بالمستعرض وابحث عن "كسول" في مربع البحث.

عرض توضيحي للتحميل البطيء الأصلي

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

• اختبر عرض التحميل البطيء الأصلي

ما يمكن توقعه : يتم جلب جميع الصور مرة واحدة ، ولكن باستجابات HTTP مختلفة. الصور التي تحتوي على رمز الاستجابة 200 هي الصور المحملة بفارغ الصبر ، بينما الصور التي تحتوي على رمز الاستجابة 206 يتم جلبها جزئيًا فقط من أجل الحصول على المعلومات الأولية حول الصور. سيتم بعد ذلك إحضار هذه الصور تمامًا برمز استجابة 200 عند التمرير لأسفل.

هجين تحميل كسول تجريبي

لتحليل كيفية عمل التحميل البطيء المختلط ، يمكنك البدء في اللعب بالعرض التوضيحي التالي. هنا ، يتم استخدام [email protected] ويتم تعيين الخيار use_native على " true ":

• اختبار التحميل البطيء الهجين التجريبي

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

يرجى ملاحظة أن vanilla-lazyload يستخدم واجهة برمجة تطبيقات IntersectionObserver تحت الغطاء ، لذلك ستحتاج إلى إعادة تعبئته على Internet Explorer والإصدارات الأقل حداثة من Safari. ليست مشكلة كبيرة إذا لم يتم توفير polyfill ، لأنه في هذه الحالة سوف vanilla-lazyload بتنزيل جميع الصور مرة واحدة.

ملاحظة : اقرأ المزيد في فصل "To Polyfill Or Not To Polyfill" من الملف التمهيدي لـ vanilla-lazyload .

جرب Hybrid Lazy Loading في موقع الويب الخاص بك

نظرًا لأن التحميل البطيء الأصلي سيأتي قريبًا على بعض المتصفحات ، فلماذا لا تمنحه فرصة اليوم باستخدام التحميل البطيء المختلط؟ إليك ما عليك القيام به:

ترميز HTML

أبسط ترميز للصور يتكون من سمتين: src و alt .

بالنسبة للصور في الجزء العلوي من الصفحة ، يجب ترك سمة src وإضافة السمة loading="eager" .

 <img src="important.jpg" loading="eager" alt="Important image">

بالنسبة إلى الصور الموجودة في الجزء السفلي غير المرئي من الصفحة ، يجب استبدال السمة src data-src وإضافة سمة loading="lazy" .

 <img data-src="lazy.jpg" loading="lazy" alt="A lazy image">

إذا كنت ترغب في استخدام صور متجاوبة ، فافعل الشيء نفسه مع srcset sizes .

 <img alt="A lazy image" loading="lazy" data-src="lazy.jpg">

إذا كنت تفضل استخدام علامة picture ، فقم بتغيير srcset sizes و src أيضًا في علامات source .

 <picture> <source media="(min-width: 1200px)"> <source media="(min-width: 800px)"> <img alt="A lazy image" loading="lazy" data-src="lazy.jpg"> </picture>

يمكن أيضًا استخدام علامة picture لتحميل تنسيق WebP لصورك بشكل انتقائي.

ملاحظة : إذا كنت تريد معرفة المزيد من استخدامات vanilla-lazyload ، فيرجى قراءة قسم HTML "Getting Started" من الملف التمهيدي الخاص به.

كود جافا سكريبت

بادئ ذي بدء ، تحتاج إلى تضمين vanilla-lazyload على موقع الويب الخاص بك.

يمكنك تحميله من CDN مثل jsDelivr:

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

أو يمكنك تثبيته باستخدام npm:

 npm install vanilla-lazyload@12

من الممكن أيضًا استخدام برنامج نصي غير async مع تهيئة تلقائية ؛ قم بتحميله كوحدة ES باستخدام type="module" أو قم بتحميله كـ AMD باستخدام RequireJS. اعثر على المزيد من الطرق لتضمين vanilla-lazyload في قسم البرنامج النصي "Getting Started" من الملف التمهيدي.

بعد ذلك ، في كود JavaScript لموقع الويب / تطبيق الويب الخاص بك ، قم بتضمين ما يلي:

 var pageLazyLoad = new LazyLoad({ elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading });

ملاحظة : يحتوي البرنامج النصي على الكثير من الإعدادات الأخرى التي يمكنك استخدامها لتخصيص سلوك vanilla-lazyload ، على سبيل المثال لزيادة مسافة منطقة التمرير التي يمكن بدء تحميل العناصر منها أو تحميل العناصر فقط إذا بقيت في منفذ العرض لمدة الوقت المعطى. ابحث عن المزيد من الإعدادات في قسم API في الملف التمهيدي.

الكل معًا ، باستخدام برنامج نصي غير async

لتجميعها معًا واستخدام برنامج نصي غير async لزيادة الأداء ، يرجى الرجوع إلى كود HTML و JavaScript التاليين:

 <!-- In-viewport images should be loaded normally, or eagerly --> <img src="important.jpg" loading="eager" alt="Important image"> <!-- Let's lazy-load the rest of these images --> <img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1"> <img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2"> <img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3"> <!-- Set the options for the global instance of vanilla-lazyload --> <script> window.lazyLoadOptions = { elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading }; </script> <!-- Include vanilla lazyload 12 through an async script --> <script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

هذا هو! من خلال هذه الخطوات البسيطة والسهلة للغاية ، ستتمكن من تمكين التحميل البطيء الهجين في موقع الويب الخاص بك!

أفضل الممارسات الهامة

• قم بتطبيق التحميل البطيء فقط على الصور التي تعرف أنه من المحتمل أن يتم عرضها أسفل الجزء المرئي من الصفحة. قم بتحميل العناصر الموجودة في الجزء المرئي من الصفحة لتحقيق أقصى قدر من الأداء. إذا قمت فقط بتطبيق التحميل البطيء على جميع الصور في صفحتك ، فسوف تبطئ أداء العرض.
• استخدم CSS لحجز بعض المساحة للصور قبل تحميلها. بهذه الطريقة ، سيقومون بدفع باقي المحتوى أدناه. إذا لم تفعل ذلك ، فسيتم وضع عدد أكبر من الصور في الجزء المرئي من الصفحة قبل أن يتم ذلك ، مما يؤدي إلى تنزيلات فورية لها. إذا كنت بحاجة إلى خدعة CSS للقيام بذلك ، فيمكنك العثور على واحدة في قسم النصائح والحيل في الملف التمهيدي لـ vanilla-lazyload .

إيجابيات وسلبيات

تغليف

أنا متحمس جدًا لأن التحميل البطيء الأصلي قادم إلى المتصفحات ، ولا أطيق انتظار جميع بائعي المستعرضات لتنفيذه!

في غضون ذلك ، يمكنك إما اختيار إثراء ترميز HTML الخاص بك من أجل التحسين التدريجي والحصول على التحميل البطيء الأصلي فقط عندما يكون مدعومًا ، أو يمكنك الانتقال إلى التحميل البطيء المختلط والحصول على كل من التحميل البطيء الأصلي والقائم على JavaScript حتى يوم التحميل البطيء الأصلي تكون مدعومة من قبل الغالبية العظمى من المتصفحات.

جربها! لا تنسى تمييز / مشاهدة vanilla-lazyload على GitHub ، واسمحوا لي أن أعرف أفكارك في قسم التعليقات.

مزيد من القراءة على SmashingMag:

• أنت الآن تراني: كيف أتأجل ، وتحمل كسولًا ، وتتصرف مع تقاطعObserver
• وحدات JavaScript ذات التحميل الكسول مع ConditionerJS
• قائمة مراجعة الأداء الأمامية لعام 2019 (PDF ، صفحات Apple ، MS Word)
• كيف يمكن أن يساعد تحسين أداء موقع الويب في إنقاذ الكوكب