سيوشروحات

التحميل الكسول lazy-loading : كيفية تحسين أداء موقعك

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

التحميل الكسول lazy-loading  كيف يعمل؟

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

لكي تتمكن من استخدام Lazy Loading ، يجب عليك تكييف ترميز علامة img . بدلاً من سمة src ، تستخدم الطريقة سمة بيانات بما في ذلك المصدر المناسب. بمجرد أن تكون الصورة في المنطقة المرئية ، يضيف البرنامج النصي الخاص بها سمة src باستخدام سمة البيانات وتظهر الصورة. لجعل عملية التحميل أكثر جاذبية ، يمكنك استخدام تأثيرات التلاشي أو الانزلاق.

كيفية تفعيل التحميل الكسول؟

هناك طرق مختلفة لدمج التحميل الكسول في موقعك . تم تطوير وتحسين تكامل طريقة LazyLoad باستمرار على مر السنين. نقدم بعض الحلول الأكثر شيوعًا لتفعيل lazy-loading.

lazy-loading من خلال JavaScript

يوجد الآن عدد لا يحصى من قوالب JavaScript للتحميل الكسول والتي يمكنك دمجها بسهولة في موقعك. يقدم البرنامج النصي LazyLoad المذكور بالفعل ، على سبيل المثال ، حلاً بسيطًا بدون jQuery . بالإضافة إلى القدرة على ضبط التحميل الكسول الأصلي للصور ومقاطع الفيديو وإطارات iFrames ، يدعم البرنامج النصي بحجم 2.4 كيلوبايت (كيلوبايت) أيضًا الصور سريعة الاستجابة

بديل LazyLoad هو البرنامج النصي Lazy Load Remastered . على عكس LazyLoad ، فإنه يستخدم jQuery ويوفر بعض التأثيرات الجذابة ، مثل تقنية Blur.

Native lazy loading

Native lazy loading هو أسهل طريقة لدمج طريقة التحميل الكسول في موقعك . تتوفر هذه الطريقة في البداية فقط في متصفح Google Chrome (الإصدار 75 أو أعلى) ، وتعمل الآن أيضًا في Firefox و Edge و Opera. للاستفادة من هذا الخيار ، ما عليك سوى إضافة سمة التحميل المناسبة إلى محتوى موقع الويب المعني:

<img src="example.png" loading="lazy" alt="…">
<iframe src="yourdomain" loading="lazy" alt="…"></iframe>

بالإضافة إلى القيمة “lazy” للتحميل الكسول Lazy Loading ، تتوفر القيم التالية:

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

التحميل الكسول مع واجهة برمجة تطبيقات Intersection Observer

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

تلميح
لا يعمل lazy-loading المحلي حاليًا في Safari (لا على macOS ولا على iOS). نظرًا لأن Safari يدعم واجهة برمجة تطبيقات Intersection Observer .

التحميل الكسول WordPress

إذا كنت قد أنشأت موقعك بك باستخدام WordPress ، فيمكنك بسهولة دمج lazy-loading من خلال مكون إضافي – على سبيل المثال  a3 Lazy Load . بالإضافة إلى الصور ومقاطع الفيديو ، يدعم الامتداد أيضًا طريقة التحميل الكسول للمحتوى المضمن .

التحميل الكسول ومشكلة بكسل التتبع

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

اعتمادًا على المتغير المستخدم ، يمكنك أيضًا تحميل بكسل التتبع بشكل منفصل عند استدعاء الصفحة :

Native Lazy Loading: أضف سمة التحميل = “eager” إلى بكسل التتبع .
التحميل الكسول باستخدام JavaScript: امنح بكسل التتبع فئة معينة تستبعدها في شفرة JavaScript .

علاء الحناوي

خريج كلية تجارة وادارة اعمال وحاصل على العديد من الكورسات والدبلومات فى مجالات دراسة الجدوى والدراسات التسويقية والتحليل المالى ومراجعة الحسابات.
زر الذهاب إلى الأعلى
Don`t copy text!