تصاویر لیزی لود : صفحات وب سریعتر ، سئوی دوست داشتنی !

تصاویر لیزی لود یه تکنیک برنامه نویسیه که در اکثر وبسایت های وردپرسی به منظور افزایش سرعت وردپرس استفاده میشه. این تکنیک منابع بارگیری رو تا زمانی که لازم باشه به تأخیر می‌اندازه. یه نمونه متداول، یه صفحه وبه که از بارگیری تصاویر تا زمانی که کاربرصفحه رو اسکرول نکرده و به قسمت‌های دیگه صفحه جا به جا نشده، جلوگیری میکنه. تصاویر لیزی لود (Lazy Loading Images) در وب و در برنامه‌های نرم افزاری مثل برنامه‌های موبایل و دسکتاپ استفاده میشه.

تصاویر، یه محتوای اصلی در وب سایت هستن. اگر در مورد عملکرد وب سایتت جدی هستی، احتمالاً اونها رو بهینه کردی. اما آیا در نظر گرفتی که تصاویرت رو لیزی لود کنی؟ تصاویر لیزی لود ابتدا با ذخیره پهنای باند برای محتوای مهم، تجربه کاربر را بهبود می‌بخشن.

بعضی افراد این تکنیک رو برای ملاحظات سئو رد می‌کنن. اما مطمئن باش تصاویر لیزی لود، مانع از ایندکس شدن اونها نمی‌شه. در ادامه این نکته رو متوجه میشی که چرا باید تصاویر لیزی لود رو پیاده سازی کنی، و چطور مطمئن بشی که اونو به روشی یوزر فرندلی برای کاربر ساختی.

تصاویر لیزی لود در وب

تصاویر در همه جای وب هستن. ارائه تصویر مناسب در متن مناسب می‌تونه واقعاً چالش برانگیز باشه. تصاویر باید بهینه سازی بشن، متناسب با منطقه ارائه آن تنظیم بشن و فقط در صورت لزوم بارگیری بشن.

Lazy Loading Images مجموعه‌ای از تکنیک‌های طراحی شده برای پاسخ به این تقاضای نهاییه. تصاویر لیزی لود در یه صفحه وب می‌تونن زمان بار رو سرعت ببخشن، چون مرورگر نیازی به بارگیری تصاویری که قابل مشاهده نیستن نداره. زمانی که کاربر صفحه را به بالا و پایین حرکت میده، تصاویر بارگیری می‌شن. این کار با استفاده از JavaScript انجام می‌شه که موقعیت هر تصویر را تشخیص می‌ده و تعیین می‌کنه که آیا در قسمت قابل مشاهده پنجره مرورگر قرار داره یا نه. اگر کاربر به طرف پایین یه تصویر حرکت کنه، جاوا اسکریپت منبع رو از سرور وب درخواست می‌کنه و تصویر رو در صفحه، نمایش می‌ده. اگر کاربر به پایین نره، تصویر بارگیری نمی‌شه.

تأخیر در بارگیری منابع دیگه، مثل پرونده‌های JavaScript، CSS و حتی خود HTML ممکنه. مثلا، یه توسعه دهنده وب می‌تونه تعیین کنه که کدام سبک CSS برای محتوای «بالاتر از حد» در یک صفحه وب یا محتوای قابل مشاهده در ارتفاع یک پنجره معمولی مرورگر لازمه. توسعه دهنده می‌تونه این موارد رو به عنوان «سبک‌های درون خطی» یا سبک‌های تعریف شده در HTML صفحه وب پیاده سازی کنه. جاوا اسکریپت برای بارگذاری CSS اضافی بعد از بارگیری صفحه یا به محض اسکرول کاربر استفاده می‌شه.

طبق HTTP Archive، ۴۲۰ کیلوبایت (مقدار متوسط) با لیزی لودینگ صفحه نمایش و تصاویر پنهان، می‌تونه در هر صفحه ذخیره بشه.

بعضی از موارد استفاده:

موارد خاص زیادی وجود داره که Lazy Loading درگیر اونه. بگذارید چند مثال بزنیم:

نتایج جستجوی تجارت الکترونیکی E-Commerce. این صفحات اغلب حاوی نتایج زیادی هستن که خیلی از محصولات آن، خارج از قاب بازدید هستن. آیا بارگیری اون تصویرها مفیده؟ با Lazy Loading، می‌تونی بارگیری اونها رو به تاخیر بیندازی تا اینکه صفحه اسکرول بشه.

کروسل. در مورد اونها می‌دونی، درسته؟ چرا کاربر باید همه تصویرها رو لود کنه در حالی که فقط اولین تصویر رو در طی چند ثانیه، به نمایش می‌گذاره… اونها رو لیزی لود کن! اولین مورد رو لود کن و موارد بعدی رو چند ثانیه قبل از انیمیشن کروسل در پس زمینه لود کن.

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

بسته به ماهیت صفحه، موارد دیگه امکان پذیره. هیچ تصویری بدون اینکه قبلش از خودت پرسیده باشی که تأخیر در لود اونها وجود داره، نباید در صفحاتت وارد بشه.

ضرورت‌های آشکار

با به تعویق انداختن بارگذاری تصاویر که بلافاصله موردنیاز نیستن – یا بعضی وقت ها، لود نکردن اونها – مرورگر منابع (پهنای باند و همچنین CPU) رو ذخیره می‌کنه. این صفحه سریعتر بارگیری می‌شه و باعث بهبود تجربه کاربر میشه. چون منابع ذخیره شده می‌تونن بر محتوای مهمتری اثر بذارن. همچنین نیازهای سمت سرور هم وجود داره. CPU و پهنای باند مورد نیاز برای تحویل منابع، تحت فشار روانی کمتری قرار می‌گیرن و هزینه‌های میزبانی و یا CDN رو کاهش می‌دن.

همانطور که در مقدمه گفتیم، تصاویر لیزی لود از ایندکس شدن تصاویر شما بوسیله موتورهای جستجو جلوگیری نمی‌کنه. اما می‌تونه مشکل باشه و همه تکنیک‌ها برابر نیستن، چون همه بهترین شیوه‌ها بوسیله کتابخانه‌ها و افزونه‌های مختلفی که در بازار وجود دارن، اجرا نمی‌شن. برای حفظ سئوی ارگانیک خود، باید درک کنی که Lazy Loading Images چگونه کار می‌کنه، و چگونه می‌توانی با خیال راحت از اون استفاده کنی.

می خواهی تصاویرت ایندکس بشن؟ باید برچسب < img> رو در HTML داشته باشی.

تصاویر لیزی لود با JavaScript

در یه دنیای ایده آل، مرورگر به طور خودکار تصاویر رو لیزی لود می‌کنه. این کار ممکنه در آینده اتفاق بیفته، چون یه سیاست ویژه Lazy load در دست مطالعه است، اما ما هنوز به اونجا نرسیدیم. در ضمن، ما باید راه حل‌های دیگه رو کشف کنیم، هرکدام از اونها دلالت بر اصلاح نشانه گذاری HTML و افزودن وابستگی (JavaScript (JS می‌کنن.

مهم

دیگه لازم نیست – و نباید – همه تصویرها رو لیزی لود کنی. اگه می‌دانی بعضی از تصاویر بیشتر اوقات نمایش داده می‌شه، اجازه بده به طور عادی بارگیری و رندر بشن. تصاویر لیزی لود فقط برای تصاویر دیگه توصیه می‌شه. وقتی لزومی نداره، کارت رو پیچیده نکن!

سنتی‌ترین راه حل شامل استفاده از JS برای ارزیابی مجدد، در فواصل منظم و برای هر تصویره (یا هر عنصری که یه تصویر رو به عنوان پس زمینه نمایش می‌ده) در صورتی که نیاز به بارگیری داره. کتابخانه‌های با کارایی بالا مثل lazy sizes در این الگو ساخته شدن و با مرورگرهای قدیمی سازگار هستن. lazy sizes حتی می‌تونه تشخیص بده که آیا کاربر میتونه اسکرول کنه و اگر نمیتونه، تصاویر رو فوراً بارگذاری می‌کنه.

با این حال، اجرای اون تست‌ها به طور مرتب هزینه داره. از این هزینه میشه برای مرورگرهای وب که از API‌های تقاطع و جهش ناظر استفاده می‌کنن (که به جای اینکه دائما مورد استفاده قرار بگیرن به مکان‌های DOM خاص واکنش نشون میدن) جلوگیری کرد. yall. js و lozad. js نمونه‌های خوبی از این تکنیک مبتنی بر شرایط هستن (آنها فقط با مرورگرهای مدرن سازگار هستن، اما می‌تونی از یه فایل چند منظوره برای جبران ویژگی گمشده در مرورگرهای قدیمی استفاده کنی).

نکته

از اونجا که مرورگر ممکنه هر نوع حذف src رو به عنوان یک خطا تعبیر کنه ، توصیه می کنم که هنوز هم مقدار اتریبیوت src را تعریف کنی، با استفاده از یه مکان یاب تصویر شفاف کوچک ، حتی درون خطی ، مثل:

هر راه حل JavaScript رو که در client side انتخاب می‌کنی، برای بازگشت کد HTML صحیح، باید backend خودت رو هم اصلاح کنی. نشانه گذاری HTML برای لیزی لودینگ یه تصویر همیشه مشابهه: مقدار نهایی اتریبیوت src به طور موقت در یه اتریبیوت data-src قرار می‌گیره که عنصر از بارگیری تصویر نهایی بلافاصله جلوگیری می‌کنه.

این کتابخانه تصاویر هدف خودش رو از طریق یه ویژگی مشخص می‌کنه، معمولا با استفاده از یه کلاس خاص (مثلا: اینجا ما از کلاس js-lazyload استفاده می‌کنیم). هنگامی که کتابخانه زمان بارگذاری تصویر رو تشخیص داد، از ویژگی data-src برای جمع کردن ویژگی src استفاده می‌شه و مرورگر شروع به بارگیری تصویر می‌کنه. این روش برای اکثر رسانه‌ها (ویدئو، iframes) یا تصاویر اقتباس شده برای طراحی وب واکنش گرا یکسانه (برای نمونه: میشه از ویژگی data-srcset برای حفظ موقت مقدار نهایی ویژگی srcset استفاده کرد).

فیلم لیزی لود

فیلم لیزی لود هم در وب محبوبه و اثرگذار. چون فایلهای ویدیویی معمولاً بزرگترین منابع بارگذاری شده در یه صفحه وب هستن. به جای ارسال همه ویدیو به دستگاه مشتری، وب سرور فقط بخش‌های کوچکی از فیلم رو که کاربر در حال دیدن اونه ارسال می‌کنه. وب سایت‌های معروف ویدیو مثل YouTube و Vimeo از لیزی لود برای کاهش پهنای باند و جلوگیری از بارگیری بیشتر محتوای ویدیویی، زمانی که لازم باشه استفاده می‌کنن. این کار مخصوصا برای کاربرانی که اتصالات اینترنتی کنترل شده و محدود، مثل برنامه‌های موبایل دیتا دارن، خیلی مفیده.

وقتی یه ویدئو رو Lazy Load می‌کنی، رایجه که چند ثانیه یا حتی چند دقیقه جلوتر از نقطه جاری، ویدئو رو هم لود کنی. برای همین، دیتای ویدئو در یه بافر ذخیره میشه، تا کمک کنه ویدئو پیوسته و بدون قطعی نمایش داده بشه حتی زمانی که اتصال اینترنت ضعیفه و قطع و وصل میشه.

لیزی لود در برنامه‌های نرم افزاری

در حالی که لیزی لود در وب رواج زیادی پیدا کرده، مدت طولانیه که در توسعه نرم افزار استفاده می‌شه. مثلا، یه سیستم عامل، ممکنه فقط تصویرهای کوچک برای آیکون‌های قابل مشاهده در یه پوشه رو نمایش بده. به همین ترتیب، یه برنامه مشاهده تصویر، فقط تصاویر قابل مشاهده در یک کتابخانه عکس رو بارگذاری میکنه. این روش از حافظه کمتری استفاده می‌کنه و عملکرد برنامه رو بهبود می‌بخشه چون برنامه، داده‌های غیر ضروری رو لود نمی‌کنه.