🚀 تسريع مدونة بلوجر عبر سكربت Image Lazy Load Script 2020

📷 تعرّف على تقنية التحميل الكسول للصور (Lazy Load) ولماذا تُعد من أفضل الطرق لتسريع مدونتك على بلوجر

💡 ما هي تقنية Lazy Load؟

Lazy Load تعني التحميل المؤجل أو الكسول للصور، أي أن الصور لا تُحمّل إلا عندما يقترب المستخدم من رؤيتها أثناء التمرير لأسفل الصفحة. هذا يقلل من حجم الصفحة عند فتحها لأول مرة، مما يجعلها أسرع بكثير في التحميل خاصة للزوار الذين يستخدمون الإنترنت البطيء.

🎯 لماذا تستخدم Lazy Load في مدونة بلوجر؟

⬆️ تحسين سرعة تحميل الصفحة: تقليل وقت فتح الصفحة بشكل ملحوظ.
📱 أداء أفضل على الهاتف: الصور الثقيلة تؤثر بشكل سلبي على مستخدمي الجوال.
📊 تحسين ترتيب الموقع: Google يعطي الأولوية للمواقع السريعة في نتائج البحث.
🌐 تجربة مستخدم مريحة: أقل تحميل = أسرع تصفح = رضا أكبر للزائر.

🔧 خطوات تركيب سكربت Lazy Load في مدونة بلوجر

📍 الخطوة 1: افتح مظهر المدونة

اذهب إلى لوحة التحكم في Blogger > المظهر > تحرير HTML

📍 الخطوة 2: قبل الوسم `</body>` مباشرة، أضف السكربت التالي:

<script>
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img"));
  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          if (lazyImage.dataset.src) {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.removeAttribute("data-src");
          }
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    lazyImages.forEach(function(lazyImage) {
      if (lazyImage.getAttribute("src")) {
        lazyImage.setAttribute("data-src", lazyImage.src);
        lazyImage.removeAttribute("src");
      }
      lazyImageObserver.observe(lazyImage);
    });
  }
});
</script>

📍 الخطوة 3: تعديل الصور داخل المشاركات

تحتاج إلى تعديل صور مقالاتك بالشكل التالي:

<img data-src="رابط-الصورة.jpg" alt="وصف الصورة">

قد يعجبك ايضا

أو إذا كنت تريد أن تظهر صورة مؤقتة قبل التحميل:

<img src="loading.gif" data-src="رابط-الصورة.jpg" alt="وصف">

🎨 ملاحظة:

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

<style>
img {
  transition: opacity 0.3s ease;
  opacity: 0.3;
}
img[data-src]:not([src]) {
  opacity: 0.1;
}
img[src] {
  opacity: 1;
}
</style>

🧪 كيف تتأكد أن Lazy Load يعمل؟

افتح الصفحة من متصفح بدون اتصال إنترنت جيد، ولاحظ أن الصور لا تظهر إلا عند التمرير.
استخدم أدوات مثل Google PageSpeed أو GTmetrix لملاحظة التحسن في سرعة التحميل.

📦 هل هذا السكربت متوافق مع كل القوالب؟

نعم، يعمل مع معظم قوالب بلوجر الحديثة، لكن يُفضل دائمًا أخذ نسخة احتياطية من القالب قبل أي تعديل.

🏁 خلاصة

بتركيب هذا السكربت البسيط، يمكنك تسريع مدونتك في بلوجر بشكل كبير وتحسين تجربة الزوار. لا تتردد في تطبيقه اليوم لتشاهد الفرق بنفسك!

✍️ بقلم: MALSAH MOUMEN
💻 أستاذ الإعلاميات ومهتم بتحسين الأداء التقني للمدونات العربية.

تعديل المقال

IloveBLOGGER

🚀 تسريع مدونة بلوجر عبر سكربت Image Lazy Load Script 2020