لود ایجکسی تصاویر در وردپرس بدون افزونه برای افزایش سرعت سایت

lazy-loading یا همان لود تنبل یکی از کاربردهای تکنولوژی ایجکس است؛ که تقریبا برای تمام موارد یک سایت می توان از آن استفاده کرد.

در این پست قصد داریم که از تکنولوژی محبوب ایجکس، تصاویر سایت خود را بارگذاری کنیم تا علاوه بر بهبود و افزایش سرعت لود سایت، هم تجربه بهتری به کاربر خود ارائه دهیم و هم از مصرف بیش از حد از منابع سرور خود کم کنیم و به نوعی در هزینه های سایت خود صرفه جویی کنیم!

لود تصاویر به صورت ایجکسی در وردپرس راه های متنوع و زیادی دارد، که هم با استفاده از افزونه می توان استفاده کرد و هم بدون استفاده از افزونه. (خودم بدون افزونه استفاده میکنم. بخاطر اینکه برای تغییرات دلخواه دستم باز باشه ).

نکته کاربردی و مهم: اگر از وردپرس 5.5 استفاده میکنید، دیگه لازم نیست که از این آموزش استفاده کنید! چرا که وردپرس در این نسخه (5.5) ویژگی لود ایجکسی تصاویر رو به صورت درونی همراه داره و فقط کافیه به تگ img های خاصیت loading="lazy" بدید! باید تگ های موجود در قالب سایتتون رو بررسی کنید و ببینید که از این خاصیت در تگ تصاویر استفاده شده یا خیر.

همچنان اگر خواهان کدنویسی هستید و می خواهید یبار برای همیشه لود ایجکسی تصاویر در وردپرس رو یاد بگیرید، در ادامه همراه بشید:

قدم اول لود ایجکسی تصاویر در وردپرس: SRC ها را جایگزین کنید

در قدم اول لازمه که به تمام تصاویر موجود در قالب سایتتون برچسب img رو پیدا کنید و خاصیت های src و srcset رو به data-src و data-srcset تبدیل کنید. (عبارت data- رو به قبل اونها اضافه کنید)

<!-- قبل از تغییر -->
<img src=".." srcset="...">

<!-- بعد از تغییر -->
<img data-src="..." data-srcset="...">

دلیل اینکار اینه که وقتی از src و srcset در تگ تصویر استفاده میشه، مهم نیست که شما از ایجکس استفاده میکنید یا خیر، تصاویر بدون ایجکس لود خواهند شد!

نکته: لازم نیست که تغییرات بالا رو دستی اعمال کنید! (لازم نیست توی فایل های قالب دست ببرید و تک به تک تصاویر رو تغییر بدید). تا وقتی هوک های وردپرس هست، غمی نیست 🙂

فقط کافیه هوک های the_content, widget_text, wp_get_attachment_image_attributes رو فیلتر کنیم.

برای جایگزینی src و srcset به صورت زیر هوک های بالا رو فیلتر می کنیم:

add_filter( 'the_content', 'my_lazyload_content_images' );
add_filter( 'widget_text', 'my_lazyload_content_images' );
add_filter( 'wp_get_attachment_image_attributes', 'my_lazyload_attachments', 10, 2 );

// Replace the image attributes in Post/Page Content
function my_lazyload_content_images( $content ) {
  $content = preg_replace( '/(<img.+)(src)/Ui', '$1data-$2', $content );
  $content = preg_replace( '/(<img.+)(srcset)/Ui', '$1data-$2', $content );
  return $content;
}

// Replace the image attributes in Post Listing, Related Posts, etc.
function my_lazyload_attachments( $atts, $attachment ) {
  $atts['data-src'] = $atts['src'];
  unset( $atts['src'] );
  
  if( isset( $atts['srcset'] ) ) {
    $atts['data-srcset'] = $atts['srcset'];
    unset( $atts['srcset'] );
  }

  return $atts;
}

در خط اول و دوم، تابع my_lazyload_content_images رو به هوک های the_content و widget_text قلاب میکنیم؛ و سپس در تابع my_lazyload_content_images، با استفاده از تابع preg_replace در محتوا جستجو می کنیم تا اگر از تصویر استفاده شده، src و srcset های تصویر رو تغییر بدیم.

در خط سوم به هوک wp_get_attachment_image_attributes تابع my_lazyload_attachments را قلاب میکنیم و جایگزینی ها را انجام میدهیم.

قدم اول بارگذاری تصاویر در وردپرس با AJAX: کدنویسی قسمت JavaScript

در بارگذاری تصاویر سایت وردپرس با ایجکس می خواهیم وقتی که کاربر به تصویر رسید، آن را لود کنیم. برای اینکار باید زمان رسیدن کاربر به موقعیت تصویر را بدانیم. و زمانی که کاربر به تصویر رسید، مقدار درون data-src رو درون src بریزیم و تصویر لود بشه!. کد زیر رو درون فایلی با نام به کد زیر دقت کنید:

( function() { 'use strict';
  let images = document.querySelectorAll('img[data-src]');
              
  document.addEventListener('DOMContentLoaded', onReady);
  function onReady() {
    // Show above-the-fold images first
    showImagesOnView();

    // scroll listener
    window.addEventListener( 'scroll', showImagesOnView, false );
  }
  
  // Show the image if reached on viewport
  function showImagesOnView( e ) {
    
    for( let i of images ) {
      if( i.getAttribute('src') ) { continue; } // SKIP if already displayed
      
      // Compare the position of image and scroll
      let bounding = i.getBoundingClientRect();
      let isOnView = bounding.top >= 0 &&
      bounding.left >= 0 &&
      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      bounding.right <= (window.innerWidth || document.documentElement.clientWidth);
      
      if( isOnView ) {
        i.setAttribute( 'src', i.dataset.src );
        if( i.getAttribute('data-srcset') ) {
          i.setAttribute( 'srcset', i.dataset.srcset );
        }
      }
    }
  }
              
})();

کد بالا رو در فایلی به نام lazyload.js در پوشه js ذخیره کنید.

قدم سوم لود ایجکسی تصاویر در وردپرس: اتصال فایل جاوااسکریپت

کد زیر رو در انتهای فایل functions.php قالب سایتتون قرار بدید:

add_action( 'wp_enqueue_scripts', 'my_lazyload_assets', 10 );
function my_lazyload_assets() {
  $js_dir = get_stylesheet_directory_uri() . '/js';
  wp_enqueue_script( 'my-lazyload', $js_dir . '/lazyload.js', [], '', true );
}

مطمئین شوید که حتما فایل جاوااسکریپت بالا به سایت شما اضافه شده باشد! در غیر اینصورت کد کار نخواهد کرد و تمام تصاویر سایت شکسته خواهد شد.

قدم اضافی: افزودن انیمیشن به تصویر

می تونید این کد رو به استایل های قالب اضافه کنید تا هنگام لود تصویر، تجربه بهتر و زیباتری داشته باشید:

img[data-src] {
  opacity: 0;
  transition: opacity .25s ease-in-out;
  will-change: opacity;
}

/* appear animation */
img[data-src][src] {
  opacity: 1;
}

نکات امنیتی!

حتما قبل از انجام هر کاری، ابتدا از پوشه قالب بکاپ بگیرید -> پوشه قالب رو زیپ و دانلود کنید. تا اگر مشکلی به وجود اومد بتونید تغییرات رو بازنشانی کنید!

درج نظر
نظر خود را درباره لود ایجکسی تصاویر در وردپرس بدون افزونه برای افزایش سرعت سایت بنویسید.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات کاربران

هنوز هیچ نظری برای این پست ثبت نشده است. شما اولین نفر باشید!