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

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

سوف تستكشف مفهوم التحميل البطيء للصور وتتعلم كيفية تنفيذه باستخدام HTML وJavaScript مع Intersection Observer API.

ما هو التحميل البطيء؟

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

لماذا استخدام التحميل البطيء؟

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

  • تحميل أسرع للصفحة الأولية: التحميل البطيء يمنع تحميل جميع الصور مرة واحدة، مما يقلل من وقت التحميل الأولي للصفحة. يمكن للمستخدمين البدء في التفاعل مع موقعك في وقت أقرب، مما يؤدي إلى تجربة مستخدم أفضل.
    • instagram viewer
  • تحسين استجابة الصفحة: من خلال تحميل الصور أثناء تمرير المستخدمين، يظل موقع الويب سريع الاستجابة وسلسًا، مما يضمن التمرير والتنقل بسلاسة دون الحاجة إلى الانتظار حتى يتم تحميل المحتوى بالكامل.
  • توفير عرض النطاق الترددي: يعمل التحميل البطيء على الحفاظ على عرض النطاق الترددي، مما يجعله مثاليًا لمستخدمي الأجهزة المحمولة وأولئك الذين لديهم اتصالات إنترنت بطيئة. هذا يمكن تقليل استهلاك بيانات موقع الويب الخاص بك، مما يفيد المستخدمين.
  • فوائد تحسين محركات البحث: محركات البحث مثل جوجل ضع في اعتبارك سرعة الصفحة كعامل تصنيف. يمكن التحميل كسول يؤثر بشكل إيجابي على أداء تحسين محركات البحث (SEO) لموقعك من خلال تحسين وقت التحميل.

الآن بعد أن فهمت سبب فائدة التحميل البطيء، دعنا نستكشف كيفية تنفيذه.

تنفيذ التحميل البطيء: ترميز HTML

للبدء، ستحتاج إلى تعديل كود HTML الخاص بك ليشمل التحميل = "كسول" السمة على الخاص بك العلامات.

<body>
<main>


<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>


main>


body>

ال تحميل يتم استخدام السمة في HTML للتحكم في سلوك تحميل العناصر على صفحة الويب. عندما تقوم بتعيين التحميل = "كسول" على العلامة، فهي تطلب من المتصفح تأجيل تحميل المورد حتى الحاجة إليه.

في هذه اللحظة تبدو الصفحة كما يلي:

تنفيذ التحميل البطيء: تنفيذ جافا سكريبت

للانتقال بالتحميل البطيء إلى المستوى التالي، استخدم Intersection Observer API. تتيح لك واجهة برمجة التطبيقات هذه مشاهدة وقت دخول عنصر ما إلى إطار العرض أو خروجه منه.

الأساس المنطقي وراء استخدام Intersection Observer لتحميل الصور البطيئة بسيط: عندما يتم تحميل الصفحة، فإنها تجلب صورة ذات جودة أقل.

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



 src="./image-one-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-one-high.jpg"
 />
</section>


 src="./image-two-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-two-high.jpg"
 />
</section>




 src="./image-three-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-three-high.jpg"
 />
</section>

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

بعد ذلك، حدد جميع الصور التي ترغب في تحميلها ببطء:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

بعد ذلك قم بإنشاء IntersectionObserver هدف.

const observer = new IntersectionObserver();

ثم قم بتمرير الإدخالات (مجموعة من IntersectionObserverEntry الكائنات، التي تمثل العناصر التي يتم ملاحظتها وتقاطعها مع إطار العرض) والمراقب ( IntersectionObserver المثال نفسه).

const observer = new IntersectionObserver((lazyImages, observer) => { });

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

const observer = new IntersectionObserver((lazyImages, observer) => {
 lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
 lazyImage.src = lazyImage.dataset.src; // Swap the image source
 observer.unobserve(lazyImage); // Stop observing this image
 }
 });
});

وأخيرا، تهيئة الملاحظة لكل عنصر.

// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

وبهذا تكون قد نفذت التحميل البطيء باستخدام JavaScript.

اعتبارات التحميل البطيء

عند دمج التحميل البطيء، يصبح من الضروري مراعاة الجوانب التالية:

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

تعزيز سرعة الموقع وتجربة المستخدم

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

بالإضافة إلى ذلك، ستستمتع بتحسين محركات البحث (SEO) بشكل أفضل وستوفر في استخدام النطاق الترددي. فلماذا الانتظار؟ ابدأ في تحسين موقع الويب الخاص بك اليوم باستخدام هذه الطريقة المباشرة والفعالة.