پشتیبانی از Lazy Loading تصاویر در مرورگرها
مرورگرهای وب بیش از پیش وارد حوزههایی خارج از نقش سنتی خود میشوند. در آخرین این تغییرات، مرورگرهای گوگل کروم و فایرفاکس در حال پیادهسازی قابلیت Lazy Loading برای تصاویر هستند.
این قابلیت اکنون در گوگل کروم فعال شده است و در نگارش ۷۵ فایرفاکس هم که به زودی منتشر میشود، پیادهسازی شده است.
Lazy Loading چیست ؟
هر صفحه وب شامل دهها فایل جانبی مثل فایلهای جاوااسکریپت و CSS و تصاویر و فیلم است. اگر این منابع جانبی همه به صورت یکجا در زمان شروع به پیمایش صفحه، بارگزاری شوند دو مشکل ایجاد میشود.
- استفاده بیمورد از پهنای باند اینترنتی و پهنای باند سرور در حالی که ممکن است همه این منابع واقعا مورد استفاده قرار نگیرند.
- کاهش سرعت بارگزاری اولیه صفحات به دلیل انتظار برای دریافت فایلهای زیاد با حجم زیاد.
تکنیک Lazy Loading یا بارگزاری دیرهنگام با هدف به تاخیر انداختن بارگزاری تک تک منابع تا زمانی که واقعا به آنها نیاز باشد، کار میکند. برای مثال اگر یک تصویر در بخش پایین سایت استفاده شده باشد، تا زمانی که کاربر صفحه را حرکت ندهد و به پایین سایت نرود، این تصویر بارگزاری نمیشود.
Lazy Loading در مرورگرها
پیش از این با استفاده از کدهای جاوااسکریپت، کار بررسی نیاز کاربران به تصاویر بررسی میشد و فقط زمانی که به تصویری نیاز بود، آن تصویر نمایش داده میشد. با تغییراتی که در مرورگرهای گوگل کروم و فایرفاکس به انجام خواهد رسید، این کار به صورت هوشمند توسط مرورگرها عملی میشود.
مزیت استفاده از امکانات مرورگر به جای جاوااسکریپت این است که این روش کارآمدتر و دقیقتر است. استفاده از جاوااسکریپت خود باری اضافی روی صفحات ایجاد میکند که ممکن است باعث اتلاف انرژی به ویژه روی گوشیهای موبایل باشد.
نمایش تصاویر و iframe به صورت Lazy
در آخرین نگارش مرورگر کروم، این قابلیت به شکل زیر پیادهسازی شده است و احتمال دارد تا مرورگرهای دیگر هم به تدریج این قابلیت را اضافه کنند. در حال حاضر استفاده از این قابلیت میتواند مفید باشد و در صورت عدم پشتیبانی مرورگر هم مشکلی برای سایت ایجاد نمیکند.
|
1 2 |
<img loading="lazy" src="..." alt="..."> <iframe loading="lazy" src="..."> |
مقایسه Lazy Loading با جاوااسکریپت و قابلیتهای مرورگر
بارگذاری تنبل تصاویر با جاوا اسکریپت تکنیکی است که بارگذاری تصاویر را تا زمانی که در نزدیکی ورود به دید هستند، به تأخیر میاندازد، که معمولا از IntersectionObserver استفاده میکند. تصاویر در ابتدا دارای یک placeholder یا بدون منبع هستند و ویژگی src واقعی آنها به صورت پویا زمانی که تصویر نزدیک یا در معرض دید قرار میگیرد، تنظیم میشود. این کار باعث افزایش سرعت بارگذاری صفحه، صرفهجویی در پهنای باند و بهبود تجربه کاربر با بارگذاری فقط تصاویری میشود که در آن لحظه ضروری هستند.
Lazy Loading بومی مرورگر با اضافه کردن ویژگی loading="lazy" روی عناصر img، راهی سادهتر برای دستیابی به نتایج مشابه ارائه میدهد. سپس مرورگر به طور خودکار بارگذاری تصاویر را تا زمانی که به نمای کاربر نزدیک میشوند، بدون کدنویسی اضافی جاوا اسکریپت، به تعویق میاندازد.
| جنبه (Aspect) | بارگذاری تنبل با JS (JS Lazy Loading) | بارگذاری تنبل بومی (Native Lazy Loading) |
|---|---|---|
| پیادهسازی | نیاز به راهاندازی دستی JS و استفاده از IntersectionObserver | استفاده ساده از ویژگی loading=lazy |
| پشتیبانی مرورگر | در همه مرورگرهای مدرن با استفاده از polyfills کار میکند | در بیشتر مرورگرهای مدرن پشتیبانی میشود، اما ممکن است مرورگرهای قدیمی آن را کامل پشتیبانی نکنند |
| سفارشیسازی | بسیار قابل سفارشیسازی (placeholder، آستانهها) | سفارشیسازی کمتر |
| عملکرد | کمی سربار JS دارد اما برای موارد پیچیده انعطافپذیر است | سبک، بومی و کارآمد |
| سئو و دسترسپذیری | نیاز به مدیریت دقیق | بهینهسازیهای داخلی مرورگر |
از lazy loading مرورگر زمانی استفاده کنید که میخواهید سادهترین و کارآمدترین روش را برای به تعویق انداختن بارگذاری تصویر با حداقل تلاش، به ویژه برای تگهای استاندارد <img> در مرورگرهای مدرن، داشته باشید.
از lazy loading جاوا اسکریپت زمانی استفاده کنید که به کنترل بیشتری بر رفتار بارگذاری نیاز دارید، مانند thresholds پیشرفته، placeholders سفارشی، lazy loading برای عناصر غیر <img> یا پشتیبانی از مرورگرهای قدیمیتر که فاقد lazy loading بومی هستند.