بهینه سازی تصاویر React با Lazy Load ( بارگذاری تنبل )
یکی از تاثیرگذار ترین روش های بهبود 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 (
)
}
export default App;
به همین سادگی 🙂
اما بیاید تست کنیم که مطمئن بشیم تصاویر ما lazy load هستن .
تست Lazy Load بودن یک تصویر
برای اینکه بفهمیم بارگذاری یک تصویر بصورت تنبل هست یا عادی ، تب Network مرورگر رو باز کنید . ( با دکمه Crtl+Shift+J برای ویندوز و لینوکس یا با دکمه Cmd+Opt+J در مک )
برای اینکه تغییرات خیلی سریع اتفاق نیوفتن و بتونیم بارگذاری تنبل رو تشخیص بدیم ، حالت شبکه رو روی 3G ضعیف بزارید و Cashe ( کش ) رو هم غیرفعال کنید .
از همون بخش ( تب Network ) Images رو انتخاب کنید تا فقط تصاویر بارگذاری شده رو ببینیم .
دقیقا مطابق تصویر زیر :
حالا اگر تصاویر شما دارای قابلیت Lazy Load ( بارگذاری تنبل ) باشند ، مثل زیر بارگذاری خواهند شد :
اگر به ویدئوی بالا دقت کنید متوجه 2 نکته میشوید :
- تصاویر فقط زمانی که در 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 (
)
}
export default App;
به همین سادگی 🙂
با عمل کردن به نکات گفته شده تو این مقاله میتونید تمامی تصاویر خودتون رو بصورت lazy load ، بارگذاری کنید و به اونها Placeholder بدید .
استفاده از قابلیت lazy load تصاویر ری اکت و placeholder تصاویر ری اکت ، باعث میشه تا پروژه شما نسبت به سایر پروژه ها متمایز باشه .
در واقع همین نکته های ساده هستند که شمارو به Front-End Developer بهتری نسبت به سایرین تبدیل میکنند .
اگه 1% هنوز قانع نشدید که باید تصاویر وبسایت خودتون رو Lazy Load کنید ، من چند تا دلیل برای اینکار براتون میارم 🙂
چرا باید تصاویر ری اکت رو بصورت تنبل ( 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 هست که آموزش کامل استفاده از این کتابخانه ، در همین مقاله ذکر شده .
درباره احمد احمدنژاد
من یه برنامه نویس و توسعه دهنده وب هستم که عاشق دنیای صفر و یکم❤️
نوشتههای بیشتر از احمد احمدنژاد1 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
بسیار جامع و تخصصی توضیح داده بودین . ممنون ازتون
سلام و درود ، زنده باشین 🙂