در این مقاله قصد داریم با تکنیک‌های بهینه‌سازی تصاویر آشنا شویم که می‌تواند منجر به بارگذاری سریعتر صفحات وب شود. امروز، می‌خواهیم در مورد اینکه که چگونه می‌توانیم با « lazy loading » تصاویرمان، را بهبود ببخشیم صحبت کنیم
هیجان انگیز به نظر می رسد نه ؟ بریم سراغ ادامه مطلب
اصلا Lazy Loading چیه ؟
بهتره با یک مثال براتون توضیح بدم
شما یک صفحه وب را در مرورگرتون باز میکنید و با مرور محتوا شروع به پیمایش صفحه می کنید. در نقطه ای، یک تصویر تار می بینید که به طور جادویی با یک تصویر HD واضح جایگزین می شود. خانم ها و آقایان، درست حدس زدید به این مورد Lazy Loading می گویند !
اکنون که می دانید در مورد چه چیزی صحبت می کنم، بیایید بفهمیم که چگونه این جادو را در وب سایت خودمان پیاده سازی کنیم!
Lazy Loading چگونه پیاده سازی می شود؟ اصول اولیه .
با توجه به کد بالا که ویژگی های src و data-src در یک تگ <img> به صورت اینلاین قرار گرفته است مرورگر محتوای “placeholder-image.jpg” را در تگ <img> بارگزاری می کند زیرا ویژگی های data-src یا data-srcset را تشخیص نمی دهد. تاکتیک Lazy Loading در یک فرآیند 2 مرحله ای قابل انجام است :
مرحله اول : بررسی کنید که آیا تصویر در Viewport است یا خیر. ( شاید با خودتون بگید . هااا ؟؟ به این منظور که آیا این تصویر در صفحه مانیتور هم اکنون قایل نمایش می باشد یا خیر )
اگر بله، ویژگی src (و گاهی اوقات srcset) را با مقدار data-src (یا data-srcset) جایگزین کنید. ( توسط جاوا اسکریپت )
باحاله، درسته؟ من هم وقتی اولین بار این موضع را فهمیدم حیران شدم! 🤯
راه های متعدد Lazy Loading
راه های مختلفی وجود دارد که می توانید Lazy Loading را در وب سایت خود پیاده سازی کنید. در این مقاله به شما سه روش رایج استفاده از این ویژگی را توضیح میدم
۱ – استفاده از کنترل کننده رویداد مانند اسکرول و تغییر اندازه ( سازگارترین روش در مرورگرها ).
۲ – استفاده از Intersection Observers – سازگار با اکثر مرورگرهای مدرن.
۳ – اما ساده ترین روش از طریق ویژگی (loading=”lazy”) اما با همه با مرورگرهایی مثل سافاری سازگاری نداره میتوانید لیست مرورگرهای سازگار با این روش را در اینجا مطالعه کنید
کتابخانه های جانبی
اگر نمی‌خواهید ویژگی Lazy Loading را از ابتدا به تنهایی پیاده‌سازی کنید، نگران نباشید! گزینه های بسیار زیادی وجود دارد که می توانید از بین آنها انتخاب کنید که همان تجربه فوق را با حداقل هزینه اضافی ارائه می دهند.
lazysizes
lazysizes یک لودر سریع، سازگار با سئو برای تصاویر می باشد. همچنین منابع را با تمایز بین عناصر مهم در دید و نمای نزدیک اولویت بندی می کند تا عملکرد لود تصاویر را حتی سریعتر کند. lazySizes با زبان جاوا اسکریپت و با عملکرد بالا نوشته شده است.
چگونه کار می کند؟
به سادگی JS را به وب سایت خود اضافه کنید و کلاس “lazyload” را در تمام عناصر img قرار دهید .
در اینجا مراحل دقیق برای استفاده از این کتابخانه توضیح داده می شود :
اسکریپت lazysizes.min.js را دانلود کنید و lazysizes را در صفحه وب خود قرار دهید (<script src=”lazysizes.min.js” async=””></script>)
کلاس “lazyload” را به همراه ویژگی data-src و/یا data-srcset که تصویر واقعی را نگه می دارد، به تصاویر خود اضافه کنید. در صورت تمایل میتوانید یک ویژگی src را با یک تصویر با کیفیت پایین اضافه کنید که به کاربر می‌گوید تا زمانی که تصویر واقعی بارگذاری شود، انتظار چه چیزی را داشته باشد.
نتیجه
Lazy Loading کردن تصاویر می تواند زمان بارگذاری اولیه و دانلودهای شبکه را در سایت شما به طور چشمگیری کاهش دهد. کاربران هیچ هزینه‌ای برای پردازش تصاویری که ممکن است هرگز نبینند متحمل نمی‌شوند، مگر اینکه واقعاً بخواهند.
عالی! بنابراین، شما یاد گرفته اید که ” Lazy Loading ” چیست، چرا لازم است / راه های پیاده سازی آن در وب سایت خود چگونه است