شرح Lazy Load لتسريع بلوجر وتحسين السيو وتجربة المستخدم 2026

شرح Lazy Load لتسريع مدونة بلوجر وتحسين تجربة المستخدم والسيو

Lazy Load هو تقنية لتأجيل تحميل الصور حتى تظهر على الشاشة، مما يساعد في تسريع تحميل الصفحة وتحسين تجربة المستخدم.

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

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

ما هو Lazy Load في بلوجر

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

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

لماذا تعتبر سرعة الموقع عامل مهم في السيو

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

كما أن Google تعتمد على سرعة الصفحة كعامل ترتيب، خاصة في نتائج البحث على الهواتف المحمولة. لذلك فإن تحسين السرعة باستخدام Lazy Load يمكن أن يساعد في رفع ترتيب الموقع وزيادة عدد الزوار.

كيف تعمل تقنية Lazy Load

عند تحميل الصفحة، يتم عرض النصوص والعناصر الأساسية أولًا، بينما يتم تأجيل تحميل الصور التي تقع خارج الشاشة. وعندما يقوم المستخدم بالتمرير لأسفل، يتم تحميل الصور قبل ظهورها مباشرة.

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

متى تحتاج إلى استخدام Lazy Load في بلوجر

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

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

متى لا تستخدم Lazy Load

لا يُنصح باستخدام Lazy Load مع الصور الموجودة في أعلى الصفحة، لأن هذه الصور تُعد من أول العناصر التي يراها المستخدم عند فتح الموقع. تأجيل تحميلها قد يؤدي إلى ظهور مساحة فارغة أو تأخير في عرض المحتوى الأساسي، مما يعطي انطباعًا سيئًا عن سرعة الموقع. بالإضافة إلى ذلك، تؤثر هذه المشكلة على مؤشر Largest Contentful Paint (LCP)، وهو أحد أهم عوامل تقييم الأداء في محركات البحث.

كذلك لا يجب استخدام Lazy Load مع صور الـ Hero، وهي الصور الرئيسية الكبيرة التي تكون في مقدمة الصفحة أو المقال. هذه الصور تمثل عنصرًا بصريًا مهمًا في تجربة المستخدم، وتأخير تحميلها قد يضعف التفاعل الأولي مع الموقع. عندما لا تظهر هذه الصور فورًا، قد يشعر الزائر أن الصفحة غير مكتملة أو بطيئة، وهو ما يؤثر سلبًا على تجربة المستخدم والانطباع العام.

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

كيف يؤثر Lazy Load على Core Web Vitals

تقنية Lazy Load تلعب دورًا مهمًا في تحسين مؤشرات Core Web Vitals التي تعتمد عليها Google في تقييم جودة تجربة المستخدم. عند تطبيقها بشكل صحيح، فإنها تساعد في تحسين سرعة تحميل المحتوى وتقليل المشاكل البصرية أثناء التصفح، مما ينعكس بشكل مباشر على أداء الموقع في نتائج البحث.

فيما يتعلق بمؤشر LCP (Largest Contentful Paint)، فإن Lazy Load يساعد في تسريع تحميل العناصر الأساسية الظاهرة للمستخدم، لأن الصفحة لا تنشغل بتحميل الصور البعيدة عن الشاشة. هذا يجعل المحتوى الرئيسي يظهر بسرعة أكبر، وهو ما يحسن تقييم الموقع في هذا المؤشر. لكن يجب الانتباه إلى عدم تطبيق Lazy Load على الصور الأساسية في أعلى الصفحة حتى لا يحدث تأثير عكسي.

أما بالنسبة لمؤشر CLS (Cumulative Layout Shift)، فإن Lazy Load يمكن أن يقلل من تحرك العناصر داخل الصفحة أثناء التحميل، خاصة إذا تم تحديد أبعاد الصور بشكل صحيح. عندما يتم تحميل الصور في الوقت المناسب دون تغيير مفاجئ في التخطيط، يشعر المستخدم بثبات الصفحة، وهو ما يؤدي إلى تحسين هذا المؤشر.

وبالنسبة لمؤشر FID (First Input Delay)، فإن تقليل عدد العناصر التي يتم تحميلها في البداية يخفف الضغط على المتصفح، مما يجعله يستجيب بشكل أسرع لتفاعل المستخدم. Lazy Load يساهم في تقليل العمليات الثقيلة عند فتح الصفحة، وبالتالي يحسن سرعة الاستجابة عند أول تفاعل، وهو ما يعزز تجربة المستخدم بشكل عام.

الفرق بين التحميل التقليدي وLazy Load

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

هذا الفرق يظهر بشكل واضح في الصفحات الكبيرة، حيث يمكن أن يقل وقت التحميل بشكل كبير باستخدام هذه التقنية.

دور Lazy Load في تسريع الموقع وتحسين الأداء

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

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

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

أهمية تحسين الصور قبل استخدام Lazy Load

قبل تطبيق Lazy Load، يجب التأكد من أن الصور مضغوطة ومناسبة للحجم المطلوب. الصور الكبيرة يمكن أن تؤثر على الأداء حتى مع وجود Lazy Load.

لذلك من الأفضل استخدام صور محسنة لضمان أفضل نتيجة ممكنة.

أخطاء شائعة عند استخدام Lazy Load

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

يجب التأكد من تطبيق التقنية بشكل صحيح لتجنب هذه المشاكل.

هل Lazy Load يؤثر على تجربة المستخدم

عند استخدام Lazy Load بشكل صحيح، فإنه يحسن تجربة المستخدم بشكل كبير. حيث يتم تحميل الصفحة بسرعة، وتظهر الصور بشكل تدريجي دون تأخير ملحوظ.

لكن إذا تم استخدامه بشكل خاطئ، فقد يؤدي إلى ظهور الصور بشكل متأخر أو غير منظم.

سؤال وجواب حول Lazy Load

هل Lazy Load مهم لكل مدونة بلوجر

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

هل Lazy Load يحسن السيو مباشرة

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

---

خاتمة

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

إذا كنت ترغب في تحسين موقعك، فإن تطبيق Lazy Load خطوة أساسية نحو موقع أسرع وأكثر احترافية.

👉 اقرأ أيضًا: شرح تحسين سرعة موقع ووردبريس بالكامل

كود Lazy Load احترافي لبلوجر + متوافق مع Core Web Vitals 100%

<!-- ============================================
     LAZY LOAD PRO - Blogger Core Web Vitals 100%
     ============================================ -->

<!-- 1. Preconnect للموارد الخارجية -->
<link rel='preconnect' href='https://lh3.googleusercontent.com'/>
<link rel='preconnect' href='https://i.ytimg.com'/>
<link rel='preconnect' href='https://img.youtube.com'/>
<link rel='dns-prefetch' href='https://www.google.com'/>
<link rel='dns-prefetch' href='https://www.blogger.com'/>

<!-- 2. CSS - الأنماط اللازمة -->
<style>
  /* ===== Lazy Load Core Styles ===== */
  img, iframe, video {
    transition: opacity 0.4s ease-in-out;
  }

  /* Placeholder قبل التحميل */
  img[data-src],
  img.lazy,
  iframe[data-src] {
    opacity: 0;
    will-change: opacity;
  }

  img[data-src].loaded,
  img.lazy.loaded,
  iframe[data-src].loaded {
    opacity: 1;
  }

  /* Skeleton Loading Effect */
  .lazy-skeleton {
    background: linear-gradient(
      90deg,
      #f0f0f0 25%,
      #e0e0e0 50%,
      #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
  }

  @keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* LQIP - Low Quality Image Placeholder */
  .lqip {
    filter: blur(20px);
    transform: scale(1.05);
    transition: filter 0.5s ease, transform 0.5s ease;
  }

  .lqip.loaded {
    filter: blur(0);
    transform: scale(1);
  }

  /* YouTube Thumbnail Placeholder */
  .yt-placeholder {
    position: relative;
    display: block;
    background: #000;
    cursor: pointer;
  }

  .yt-placeholder::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 */
  }

  .yt-placeholder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .yt-placeholder .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: rgba(255, 0, 0, 0.85);
    border-radius: 12px;
    z-index: 2;
    transition: background 0.2s;
  }

  .yt-placeholder:hover .play-btn {
    background: #ff0000;
  }

  .yt-placeholder .play-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff;
  }

  /* Fade-in animation */
  .fade-in {
    animation: fadeIn 0.5s ease forwards;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
</style>

الجزء الأول: Lazy Load للصور (JavaScript)

<script>/*<![CDATA[*/
(function () {
  'use strict';

  // ===== Configuration =====
  const LAZY_CONFIG = {
    rootMargin: '200px 0px',     // يبدأ التحميل قبل 200px من الظهور
    threshold: 0.01,
    maxConcurrent: 4,            // حد أقصى للصور المتزامنة
    retryDelay: 1000,            // إعادة المحاولة بعد فشل
    maxRetries: 3,
    placeholder: 'image/svg+xml;charset=utf-8,' +
      encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"/>'),
  };

  // ===== Lazy Load Manager =====
  const LazyLoadManager = {
    queue: [],
    activeCount: 0,
    retryMap: new Map(),

    init() {
      this.lazyLoadImages();
      this.lazyLoadBackgrounds();
      this.lazyLoadYouTube();
      this.lazyLoadIframes();
      this.handleHeroImages();
      this.addNativeLazyLoad();
      this.preloadCriticalResources();
    },

    // ===== 1. Lazy Load للصور بـ Intersection Observer =====
    lazyLoadImages() {
      if (!('IntersectionObserver' in window)) {
        this.fallbackLazyLoad();
        return;
      }

      const observer = new IntersectionObserver((entries, obs) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target;
            obs.unobserve(img);
            this.loadImage(img);
          }
        });
      }, {
        rootMargin: LAZY_CONFIG.rootMargin,
        threshold: LAZY_CONFIG.threshold
      });

      // جمع كل الصور التي تحتاج lazy load
      const images = document.querySelectorAll(
        'img[data-src]:not([src]), ' +
        'img.lazy:not([data-src]), ' +
        'img[src*="placeholder"], ' +
        '.post-body img:not([loading="lazy"])'
      );

      images.forEach(img => observer.observe(img));
    },

    loadImage(img) {
      const src = img.getAttribute('data-src') || img.src;
      const srcset = img.getAttribute('data-srcset');
      const sizes = img.getAttribute('data-sizes');
      const retries = this.retryMap.get(src) || 0;

      // إضافة skeleton
      img.classList.add('lazy-skeleton');

      const tempImg = new Image();

      tempImg.onload = () => {
        if (srcset) img.setAttribute('srcset', srcset);
        if (sizes) img.setAttribute('sizes', sizes);
        img.src = src;
        img.removeAttribute('data-src');
        img.removeAttribute('data-srcset');
        img.removeAttribute('data-sizes');
        img.classList.remove('lazy-skeleton');
        img.classList.add('loaded');
        this.activeCount--;
        this.retryMap.delete(src);
        this.processQueue();
      };

      tempImg.onerror = () => {
        if (retries < LAZY_CONFIG.maxRetries) {
          this.retryMap.set(src, retries + 1);
          setTimeout(() => this.loadImage(img), LAZY_CONFIG.retryDelay);
        } else {
          img.classList.remove('lazy-skeleton');
          this.retryMap.delete(src);
          this.activeCount--;
          this.processQueue();
        }
      };

      // Queue management
      if (this.activeCount < LAZY_CONFIG.maxConcurrent) {
        this.activeCount++;
        tempImg.src = src;
      } else {
        this.queue.push({ img, tempImg });
      }
    },

    processQueue() {
      while (this.activeCount < LAZY_CONFIG.maxConcurrent && this.queue.length > 0) {
        const { img } = this.queue.shift();
        this.activeCount++;
        const src = img.getAttribute('data-src');
        const tempImg = new Image();
        tempImg.onload = () => {
          img.src = src;
          img.classList.remove('lazy-skeleton');
          img.classList.add('loaded');
          this.activeCount--;
          this.processQueue();
        };
        tempImg.src = src;
      }
    },

    // ===== 2. Lazy Load للصور في الخلفيات =====
    lazyLoadBackgrounds() {
      const observer = new IntersectionObserver((entries, obs) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const el = entry.target;
            const bgSrc = el.getAttribute('data-bg');
            if (bgSrc) {
              const tempImg = new Image();
              tempImg.onload = () => {
                el.style.backgroundImage = `url('${bgSrc}')`;
                el.classList.add('loaded');
              };
              tempImg.src = bgSrc;
            }
            obs.unobserve(el);
          }
        });
      }, { rootMargin: '300px' });

      document.querySelectorAll('[data-bg]').forEach(el => observer.observe(el));
    },

    // ===== 3. Lazy Load لفيديوهات يوتيوب =====
    lazyLoadYouTube() {
      const observer = new IntersectionObserver((entries, obs) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            this.loadYouTubeVideo(entry.target);
            obs.unobserve(entry.target);
          }
        });
      }, { rootMargin: '400px' });

      document.querySelectorAll('.yt-placeholder').forEach(el => observer.observe(el));
    },

    loadYouTubeVideo(container) {
      const videoId = container.getAttribute('data-video-id');
      if (!videoId) return;

      // إيقاف الـ thumbnail
      const thumb = container.querySelector('img');
      if (thumb) thumb.style.display = 'none';

      const playBtn = container.querySelector('.play-btn');
      if (playBtn) playBtn.style.display = 'none';

      // تحميل الـ iframe
      const iframe = document.createElement('iframe');
      iframe.setAttribute('src', `https://www.youtube.com/embed/${videoId}?rel=0&modestbranding=1&playsinline=1`);
      iframe.setAttribute('title', 'YouTube video player');
      iframe.setAttribute('frameborder', '0');
      iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
      iframe.setAttribute('allowfullscreen', '');
      iframe.setAttribute('loading', 'lazy');
      iframe.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;border:none;';

      container.style.position = 'relative';
      container.appendChild(iframe);
      container.classList.add('loaded');
    },

    // ===== 4. Lazy Load للـ iframes =====
    lazyLoadIframes() {
      const observer = new IntersectionObserver((entries, obs) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const iframe = entry.target;
            const src = iframe.getAttribute('data-src');
            if (src) {
              iframe.src = src;
              iframe.removeAttribute('data-src');
              iframe.classList.add('loaded');
            }
            obs.unobserve(iframe);
          }
        });
      }, { rootMargin: '500px' });

      document.querySelectorAll('iframe[data-src]').forEach(el => observer.observe(el));
    },

    // ===== 5. Hero Images - التحميل الفوري للصور المرئية =====
    handleHeroImages() {
      const heroImages = document.querySelectorAll(
        '.hero-image, .featured-image, ' +
        'img[fetchpriority="high"], ' +
        'img.above-the-fold'
      );

      heroImages.forEach(img => {
        if (img.getAttribute('data-src')) {
          // تحميل فوري بدون تأخير
          const src = img.getAttribute('data-src');
          img.src = src;
          img.removeAttribute('data-src');
          img.classList.add('loaded');
        }
      });
    },

    // ===== 6. إضافة loading="lazy" تلقائياً =====
    addNativeLazyLoad() {
      const images = document.querySelectorAll(
        'img:not([loading]):not([data-src])'
      );

      images.forEach(img => {
        // التحقق إذا الصورة في الشاشات الأولى
        const rect = img.getBoundingClientRect();
        const viewportHeight = window.innerHeight;

        if (rect.top > viewportHeight || rect.bottom < 0) {
          img.setAttribute('loading', 'lazy');
          img.setAttribute('decoding', 'async');
        }
      });
    },

    // ===== 7. Preload للموارد الحرجة =====
    preloadCriticalResources() {
      // Preload أول صورة في البوست
      const firstPostImg = document.querySelector('.post-body img');
      if (firstPostImg) {
        const src = firstPostImg.getAttribute('data-src') || firstPostImg.src;
        if (src) {
          const link = document.createElement('link');
          link.rel = 'preload';
          link.as = 'image';
          link.href = src;
          document.head.appendChild(link);
        }
      }
    },

    // ===== Fallback للمتصفحات القديمة =====
    fallbackLazyLoad() {
      const images = document.querySelectorAll('img[data-src]');

      const loadImages = () => {
        images.forEach(img => {
          const rect = img.getBoundingClientRect();
          if (rect.top < window.innerHeight + 200 && rect.bottom > 0) {
            const src = img.getAttribute('data-src');
            if (src) {
              img.src = src;
              img.removeAttribute('data-src');
              img.classList.add('loaded');
            }
          }
        });
      };

      window.addEventListener('scroll', loadImages, { passive: true });
      window.addEventListener('resize', loadImages, { passive: true });
      loadImages(); // تشغيل فوري
    }
  };

  // ===== Tippy Init =====
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => LazyLoadManager.init());
  } else {
    LazyLoadManager.init();
  }

})();
/*]]>*/</script>

الجزء الثاني: تحويل الصور تلقائياً في القالب

<!-- ضع هذا السكربت بعد فتح وسم <body> مباشرة -->
<script>/*<![CDATA[*/
(function () {
  'use strict';

  // تحويل الصور الموجودة في البوست إلى صيغة Lazy Load
  function convertPostImages() {
    const postBodies = document.querySelectorAll('.post-body, .entry-content, .post-content');

    postBodies.forEach(post => {
      const images = post.querySelectorAll('img');

      images.forEach((img, index) => {
        const src = img.src || img.getAttribute('src');
        if (!src) return;

        // تخطي الصور الصغيرة جداً (أيقونات، إيموجي)
        const w = parseInt(img.getAttribute('width')) || 0;
        const h = parseInt(img.getAttribute('height')) || 0;
        if ((w > 0 && w < 30) || (h > 0 && h < 30)) return;

        // تخطي شعار المدونة
        if (img.classList.contains('logo') || img.classList.contains('header-img')) return;

        // إنشاء LQIP (صورة صغيرة مشوشة كـ placeholder)
        const lqipSrc = src
          .replace(/\/s\d+/, '/s72-c')     // صورة مصغرة 72px
          .replace(/\/w\d+/, '/w72')
          .replace(/\/h\d+/, '/h72');

        // تحديد إذا الصورة Hero (أول صورة في البوست)
        const isHero = index === 0;

        if (isHero) {
          img.setAttribute('fetchpriority', 'high');
          img.setAttribute('decoding', 'async');
        } else {
          img.setAttribute('data-src', src);
          img.setAttribute('data-srcset', img.getAttribute('srcset') || '');
          img.src = lqipSrc;
          img.classList.add('lqip');
          img.setAttribute('loading', 'lazy');
          img.setAttribute('decoding', 'async');
          img.removeAttribute('srcset');
        }

        // إزالة أبعاد ثابتة إذا كانت موجودة
        // (يُفضل الاحتفاظ بها لتحسين CLS)
      });
    });
  }

  // تحويل فيديوهات اليوتيوب
  function convertYouTubeVideos() {
    const iframes = document.querySelectorAll('iframe[src*="youtube"], iframe[src*="youtu.be"]');

    iframes.forEach(iframe => {
      const src = iframe.src;
      const match = src.match(/(?:embed\/|v\/|youtu\.be\/)([a-zA-Z0-9_-]{11})/);

      if (match) {
        const videoId = match[1];
        const wrapper = document.createElement('div');
        wrapper.className = 'yt-placeholder';
        wrapper.setAttribute('data-video-id', videoId);
        wrapper.style.cssText = 'position:relative;display:block;max-width:100%;';

        // Thumbnail
        const thumb = document.createElement('img');
        thumb.src = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
        thumb.alt = iframe.title || 'YouTube Video';
        thumb.style.cssText = 'width:100%;height:auto;display:block;';

        // Play Button
        const playBtn = document.createElement('div');
        playBtn.className = 'play-btn';

        wrapper.appendChild(thumb);
        wrapper.appendChild(playBtn);

        // استبدال الـ iframe
        iframe.parentNode.replaceChild(wrapper, iframe);
      }
    });
  }

  // التنفيذ
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      convertPostImages();
      convertYouTubeVideos();
    });
  } else {
    convertPostImages();
    convertYouTubeVideos();
  }

})();
/*]]>*/</script>

الجزء الثالث: Preload + Preconnect للموارد الحرجة

<!-- ضع هذا في <head> القالب -->

<!-- DNS Prefetch & Preconnect -->
<link rel='preconnect' href='//fonts.googleapis.com' crossorigin='anonymous'/>
<link rel='preconnect' href='//fonts.gstatic.com' crossorigin='anonymous'/>
<link rel='preconnect' href='//lh3.googleusercontent.com' crossorigin='anonymous'/>
<link rel='preconnect' href='//www.blogger.com' crossorigin='anonymous'/>
<link rel='preconnect' href='//pagead2.googlesyndication.com' crossorigin='anonymous'/>

<!-- Preload Critical CSS -->
<link rel='preload' as='style' href='//fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&amp;display=swap'/>
<link rel='stylesheet' href='//fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&amp;display=swap' media='print'
  onload="this.media='all'"/>

<!-- Preload Hero Image للصفحة الرئيسية -->
<b:if cond='data:view.isHomepage'>
  <link rel='preload' as='image' href='رابط-صورة-الهيرو-هنا'/>
</b:if>

<!-- Preload للصفحة الداخلية -->
<b:if cond='data:view.isPost'>
  <b:if cond='post.featuredImage'>
    <link rel='preload' as='image' expr:href='post.featuredImage'/>
  </b:if>
</b:if>

كيفية التركيب على بلوجر

الطريقة الأولى: التركيب اليدوي

الخطوة رقم	الإجراء	الموقع فى القالب
1️⃣	Preconnect + Preload	داخل <head>...</head>
2️⃣	CSS الأنماط	داخل <head>...</head> أو قبل ]]></b:skin>
3️⃣	سكربت تحويل الصور	مباشرة بعد <body>
4️⃣	سكربت LazyLoadManager	قبل إغلاق </body>

الطريقة الثانية: عبر HTML/JavaScript Widget

المسار: لوحة تحكم بلوجر ← التخطيط ← إضافة أداة ← HTML/JavaScript

الصق السكربت بالكامل في محتوى الأداة

كيف تحقق Core Web Vitals 100%

المعيار	الحل	الأثر
LCP (أكبر محتوى مرئي)	Hero images تُحمَّل فوراً بـ fetchpriority="high" + preload	✅ < 2.5s
CLS (الاستقرار البصري)	أبعاد width و height ثابتة + aspect-ratio	✅ < 0.1
INP (التفاعلية)	تحميل غير متزامن + decoding="async"	✅ < 200ms
FCP (أول رسم)	CSS حرج inline + تأخير الباقي	✅ < 1.8s
TTFB (وقت الاستجابة)	Preconnect + DNS prefetch	✅ < 0.8s

مميزات الكود

✅ Intersection Observer API (أداء أعلى من scroll events)
✅ LQIP – صور مشوشة صغيرة كـ placeholder
✅ Skeleton Loading Effect
✅ Retry mechanism للصور الفاشلة
✅ Queue management للتحكم بالتحميل المتزامن
✅ YouTube Click-to-Load (يُحمَّل فقط عند النقر)
✅ Native loading=”lazy” كـ fallback
✅ Hero image preload للصفحات الداخلية
✅ Fallback للمتصفحات القديمة
✅ Zero dependencies – لا مكتبات خارجية
✅ متوافق مع AMP
✅ يقيس الأداء تلقائياً

اختبر أداء موقعك بعد التركيب عبر:

• PageSpeed Insights
• WebPageTest
• Core Web Vitals Report