بهینه سازی تصاویر React با Lazy Load ( بارگذاری تنبل )

8 مرداد 1402
ارسال شده توسط
ری اکت
بهینه سازی تصاویر ری اکت - lazy load images ری اکت

یکی از تاثیرگذار ترین روش های بهبود Performance وبسایت ها ،  بهینه سازی تصاویر موجود در وبسایت است .

یکی از بهترین روش های بهینه سازی تصاویر ، بارگذاری تنبل ( Lazy Load ) است .

بارگذاری تنبل تصاویر ( Lazy Load Images ) چیست ؟

بارگذاری تنبل تصاویر یک استراتژی جالب برای بهینه سازی تصاویر است که در آن تصاویر فقط زمانی که به آنها نیاز است ، بارگذاری میشوند .

در واقع Lazy Load تصاویر باعث میشود رندر صفحه در مدت زمان کوتاه تری صورت پذیرد . در نتیجه زمان بارگذاری صفحه کمتر میشود که باعث بهبود سئو ( SEO ) و تجربه کاربری ( UX ) میشود.

به تصویر بالا دقت کنید ..

در اسکرین سمت راست ( که بارگذاری تنبل دارد ) فقط تصاویری بارگذاری شده اند که کاربر میتواند آنرا مشاهده کند و به آن نیاز دارد. به همین دلیل حجم صفحه بسیار کمتر از حالت عادی شده است .

اما در اسکرین سمت چپ ( بدون بارگذاری تنبل ) تمامی تصاویر صفحه بارگذاری شده اند و حجم صفحه 2 برابر شده است !

بارگذاری تنبل یک استراتژی است که بارگذاری منابع سایت مثل تصاویر را به تاخیر می اندازد . این تاخیر تا زمانی ادامه دارد که آن تصویر در صفحه ( ViewPort ) کاربر قرار بگیرد . بطور مثال آن تصویر زمانی بارگذاری میشود که کاربر اسکرول کند تا آن تصویر در صفحه نمایش کاربر ( معرض دید او ) قرار بگیرد .

نقل قول از : داکیومنت MDN

چطور بارگذاری تنبل تصاویر ری اکت ( React Lazy Load Images ) را فعال کنیم ؟

برای مشخص کردن اینکه یک تصویر بارگذاری تنبل داشته باشد ، کاقیست بصورت زیر عمل کنید :

<img src=”FrontEndi.jpg” alt=”من یک تصویر با قابلیت بارگذاری تنبل هستم” loading=”lazy” />

در تیکه کد بالا ، یک تصویر داریم که به خصوصیت loading آن ، مقدار lazy داده ایم .

بارگذاری تنبل تصاویر ری اکت ( React Lazy Load Images )

کتابخانه های بسیار زیادی برای ری اکت وجود دارند که به شما کمک میکنند تصاویر خود را بصورت lazy load بارگذاری کنید .

این کتابخانه ها سبک هستند و کارکردن با آنها بسیار آسان است .

در این مقاله ما از کتابخانه react-lazy-load-image-component استفاده میکنیم.

پس بریم تا بهینه سازی تصاویر ری اکت با Lazy Loading رو باهم بررسی کنیم ..

مرحله 1 – در ابتدا این کتابخانه را توسط دستور زیر نصب کنید :

برای Npm :

				
					npm i --save react-lazy-load-image-component

برای Yarn :

				
					yarn add react-lazy-load-image-component

مرحله 2- کامپوننت مربوط به این کتابخانه را import ( فراخوانی ) کنید :

				
					import Image from "../images/frontendi.jpg";
import { LazyLoadImage } from "react-lazy-load-image-component";

در خط 1 ، تصویر مدنظر خودتون رو import کنید ( ممکنه تصویر شما local نباشه و قصد استفاده از یک external url داشته باشید، در اینصورت نیازی به import تصویر نیست )

در خط 2 ، کامپوننت LazyLoadImage را فراخوانی میکنیم که به ما در بارگذاری تنبل تصاویر ری اکت ، کمک میکند .

مرحله 3 – استفاده از کامپوننت LazyLoadImage :

برای بارگذاری تنبل تصاویر ری اکت ، کافیست بجای استفاده از تگ img ، از کامپوننت LazyLoadImage استفاده کنیم :

				
					import Image from "../images/frontendi.jpg";
import { LazyLoadImage } from "react-lazy-load-image-component";

const APP = () => { 
return (
    <LazyLoadImage
        src={Image}
        width={600} 
        height={400}
        alt="بارگذاری تنبل برای این تصویر فعال شده است"
      />
)
}
export default App;

به همین سادگی 🙂

اما بیاید تست کنیم که مطمئن بشیم تصاویر ما lazy load هستن .

تست Lazy Load بودن یک تصویر

برای اینکه بفهمیم بارگذاری یک تصویر بصورت تنبل هست یا عادی ، تب Network مرورگر رو باز کنید . ( با دکمه Crtl+Shift+J برای ویندوز و لینوکس یا با دکمه Cmd+Opt+J در مک )

برای اینکه تغییرات خیلی سریع اتفاق نیوفتن و بتونیم بارگذاری تنبل رو تشخیص بدیم ، حالت شبکه رو روی 3G ضعیف بزارید و Cashe ( کش ) رو هم غیرفعال کنید .

از همون بخش ( تب Network ) Images رو انتخاب کنید تا فقط تصاویر بارگذاری شده رو ببینیم .

دقیقا مطابق تصویر زیر :

روی تصویر کلیک کنید تا بزرگتر شود.

حالا اگر تصاویر شما دارای قابلیت Lazy Load ( بارگذاری تنبل ) باشند ، مثل زیر بارگذاری خواهند شد :

اگر به ویدئوی بالا دقت کنید متوجه 2 نکته میشوید :

  1. تصاویر فقط زمانی که در viewPort هستند ( قابل دیدن هستند ) دانلود میشوند .

فرض کنید این صفحه شامل 300 تصویر است ، اما شما فقط میخواهید 3 تصویر اول را مشاهده کنید .

بارگذاری تنبل باعث میشود که فقط همان 3 تصویر دانلود و نمایش داده شوند و 297 تصویر دیگر حتی دانلود هم نشوند .

اما این همه چیز نیست 🙂

بیاید یکم حرفه ای تر عمل کنیم ..

مرحله 4 – افزودن placeholder به تصاویر ری اکت

اگر به ویدئوی بالایی نگاه کنید ، متوجه میشین تصاویری که هنوز بارگذاری نشدند ، یک حالت کم کیفیت و مات دارند .

این به کاربر این حس رو القا میکنه که اینجا ، جای یک تصویر هست که هنوز دانلود و نمایش داده نشده .

همچین هر تصویر ابعاد مورد نیاز خودش رو حتی زمانیکه دانلود نشده ،  اِشغال کرده .

افزودن placeholder به تصاویر ری اکت  فوق العادس و حتی کاربر میتونه حدس بزنه این تصویر ، تقریبا چیه !

برای افزودن placeholder به تصاویر ری اکت  ، به یک نسخه خیلی خیلی کم حجم اون تصویر احتیاج داریم .

فرض کنید تصویر شما 250KB سایز داره ، شما باید همین تصویر رو توسط ابزار های آنلاین یا آفلاین مثل فتوشاپ انقدر کم حجم کنید که حجمش حدودا به 2KB برسه .

حالا مثل نمونه زیر ، به تصویر خودمون Placeholder میدیم :

				
					import Image from "../images/frontendi.jpg"; // آدرس تصویر اصلی
import PlaceHolder from "../images/frontendi-low-size.jpg"; // آدرس تصویر کم حجم
import { LazyLoadImage } from "react-lazy-load-image-component"; // کتابخانه بارگذاری تنبل تصاویر ری اکت

const APP = () => { 
return (
    <LazyLoadImage
       src={Image} // آدرس تصویر اصلی
        width={600} // طول
        height={400} // ارتفاع
        PlaceholderSrc={PlaceHolder} //تصویر کم حجم
      />
)
}
export default App;

به همین سادگی 🙂

با عمل کردن به نکات گفته شده تو این مقاله میتونید تمامی تصاویر خودتون رو بصورت lazy load ، بارگذاری کنید و به اونها Placeholder بدید .

استفاده از قابلیت lazy load تصاویر ری اکت و placeholder تصاویر ری اکت ، باعث میشه تا پروژه شما نسبت به سایر پروژه ها متمایز باشه .

در واقع همین نکته های ساده هستند که شمارو به Front-End Developer بهتری نسبت به سایرین تبدیل میکنند .

اگه 1% هنوز قانع نشدید که باید تصاویر وبسایت خودتون رو Lazy Load کنید ، من چند تا دلیل برای اینکار براتون میارم 🙂

بارگذاری تنبل تصاویر در React - بارگذاری تنبل تصاویر در ری اکت - lazy load تصاویر ری اکت - lazy load تصاویر react

چرا باید تصاویر ری اکت رو بصورت تنبل ( Lazy Load ) بارگذاری کنیم ؟

  • صرفه جویی در مصرف پهنای باند کاربران سایت

اگر از قابلیت lazy load images استفاده نکرده باشید ، کاربران شما به محض ورود به هر صفحه از سایت شما ، تمامی تصاویر آن صفحه را دانلود میکنند .

ممکن است به برخی از تصاویر دانلود شده که در پایین صفحه قرارداده شده حتی نگاه هم نکنند !

اما اگر تصاویر شما بصورت lazy load باشند ، فقط تصاویر مورد نیاز کاربر بارگیری میشود و در مصرفه پهنای باند آن شخص صرفه جویی میشود .

  • کاهش هزینه و بار اضافی سرور

اگر برای سایت خودتون یک CDN ( شبکه توزیع محتوا ) تهیه کردین ، این نکته خیلی مهمی برای شماست .

زمانیکه از CDN استفاده میکنید ، تصاویری که بارگذاری تنبل دارن فقط از CDN بارگذاری میشن و این یعنی فشار کمتری به سرور شما میاد .

  • بهبود سئوی سایت و افزایش رتبه در گوگل

یکی از مهمترین فاکتور های سئو ، سرعت بارگذاری سایت هست . اگر سایت شما خیلی سریع لود بشه ، موتور های جستجو به شما رتبه بهتری میدن .

زمانیکه تصاویر سایتتون رو بصورت تنبل بارگذاری میکنید ، به دلیل سبک شدن صفحه ، سرعت لود سریعتری خواهد داشت .

  • تجربه کاربری بهتر ( UX )

اگر تصاویر سایتتون بصورت lazy load بارگذاری بشن ، صفحه شما سبکتر و زمان لود صفحه خیلی کمتر میشه .

و این حس خیلی بهتری به کاربر میده.

نتیجه گیری

مهارت بهینه سازی ، یکی از مهمترین مهارت هایی هست که هر Front-End Developer باید به اون تسط داشته باشه .

بهینه سازی تصاویر React ، کار خیلی ساده و آسونیه و قطعا زمان زیادی از شما نمیگیره . اما باعث میشه خروجی نهایی شما بسیار حرفه ای تر باشه و تجربه و حس خیلی بهتری به یوزر نهایی بده .

و چنین نکات ساده ای هست که شمارو با سایر فرانت اند دولوپر ها متمایز میکنه 🙂

 

خیر ضروری نیست!

اما اگر تصاویر سایتتون بصورت Lazy Load بارگذاری بشن ، چند مزیت عالی براتون داره :

  • بهبود سئو سایت
  • سریعتر لود شدن صفحه
  • کاهش حجم/سایز صفحه 
  • بهبود تجربه کاربری ( UX )
  • صرفه جویی در مصرف پهنای باند کاربر
  • کاهش بار سمت سرور

کتابخانه های بسیار زیادی برای فعالسازی Lazy Load تصاویر ری اکت وجود دارن . یکی از بهترین اونها کتابخانه react-lazy-load-image-component هست که آموزش کامل استفاده از این کتابخانه ، در همین مقاله ذکر شده .

سوالات متداول فِرانت اِندی
درباره احمد احمدنژاد

من یه برنامه نویس و توسعه دهنده وب هستم که عاشق دنیای صفر و یکم❤️

6 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • سلام وقت بخیر
    خیلی ممنون از پست های خیلی خیلی مفید با توضیح بسیار ساده تون. امیدوارم که روز به روز مطالب بیشتری آپلود بشه.

    میخواستم یه نکته ای رو ازتون بپرسم. ما تو کامپوننت LazyLoadImage، یه عرض و ارتفاع رو بهش میدیم. این توی ریسپانسیو اذیت کننده نمیشه؟ چون من 300 * 300 بدم مختص دسکتاپ هست ولی تو موبایل چی؟ خودش اتومات تنظیم میکنه یا نه باید برای موبایل دوباره عرض و ارتفاع داده بشه؟

    پاسخ

    • سلام دانیال جان
      قطعا تو ریسپانسیو چالش هایی داریم که میتونیم بصورت زیر حلشون کنیم:
      بهتره از واحد های ریسپانسیو مثل vh , vw و درصد استفاده کنیم. یا از ویژگی هایی های css مثل object-fit یا max-height استفاده کنیم.
      یسری کتابخانه هم هستن که خودشون در پشت صحنه این چالش رو مدیریت میکنن مثل کتابخانه react-lazy-load-image-component .

      پاسخ

  • ممنونم بابت مطالب مفیدتون
    یه سوال دارم. وقتی با ری اکت سایت بزنیم یعنی داریم با جاوا اسکریپت html و css رو ایجاد میکنیم درسته؟ بعد مشکل seo و اینکه گوگل نمیتونه ایندکس کنه چیزی که هنوز ایجاد نشده چی میشه؟

    پاسخ

    • سلام امین جان قربانت
      کاملا درسته، یکی از چالش هایی که اپیکیشن های ری اکتی دارن بحث سئو هست که تو مقاله زیر بهش اشاره کردیم :
      سئو در ری اکت
      اما در کل، اگه قصد توسعه سایت یا وب اپیکیشنی داری که نیاز به سئو هم داره ( مثل بخش مقالات، فروشگاه و .. ) بهتره که از فریمورک Next.js استفاده کنی که تو مقاله درموردش صحبت کردیم :
      Next.js چیست ؟

      پاسخ

دیدگاهتان را بنویسید