بهطورمعمول وقتی کاربری یک صفحه وب را باز میکند، تمام محتوای صفحه بهصورت یکباره دانلود و رندر (تحویل) میشود. این کار به مرورگر امکان میدهد تا صفحه وب را کش کند، اما هیچ تضمینی وجود ندارد که کاربر تمام محتواهای دانلود شده را ببیند. برای مثال، اگر یک گالری تصویر بهصورت کامل دانلود شود اما کاربر بعد از مشاهده اولین تصویر از آن خارج شود، باعث هدر رفتن حافظه و پهنای باند خواهد شد.
بهجای بارگذاری تمام محتوا در هنگام ورود کاربر به یک صفحه، میتوان محتوا را زمانی بارگذاری کرد که کاربر به بخش مورد نظر خود در صفحه دسترسی پیدا میکند. با بارگذاری تنبل یا Lazy Loading صفحهها بامحتوای Placeholder ایجاد میشوند و این محتوا فقط زمانی که کاربر نیاز داشته باشد با محتوای واقعی جایگزین میگردد.
بارگذاری تنبل دقیقاً چه سازوکاری دارد؟
وقتی شخصی یک منبع مانند عکس و ویدئو را به صفحه وب اضافه میکند، منبع به یک placeholder کوچک ارجاع داده میشود. وقتی کاربر وارد صفحه میشود، منبع واقعی توسط مرورگر کش شده و هنگام نمایان شدن منبع روی نمایشگر کاربر، placeholder را با محتوای واقعی تعویض میکند. برای مثال، اگر کاربر یک صفحه را بارگذاری و بلافاصله آن را ترک کند، در اینجا هیچچیزی بهجز قسمت بالای صفحه بارگذاری نمیشود.
تأثیر بارگذاری تنبل بر سئو
تأثیر بارگذاری تنبل بر رتبهبندی صفحهها در موتورهای جستجو یکی از رایجترین معایب آن به شمار میرود.
ازآنجاکه منابع نسبت به محتوای جایگزین در حالت پیشفرض قرار میگیرد، خزنده یک موتور جستجو ممکن است آن را بد تفسیر کند یا بهصورت کامل منابع را نادیده بگیرد. بارگذاری تنبل یک عنصر کامل از یک صفحه وب مانند پست وبلاگی میتواند بهصرف نظر کردن موتورهای جستجو از خزیدن منجر شود. این کار درنهایت به کاهش تعداد نتایج موتورهای جستجو میانجامد؛ چراکه تعداد محتوای کمتری ایندکس میشود.
یکی از ترفندهای غلبه بر این مشکل، تهیه لینک برای محتواهایی است که lazy loading دارند. وقتی موتور جستجو یک وبسایت را ایندکس میکند، این موتور جستجو لینکها را دنبال کرده و محتواهای پیداشده را ایندکس میکند. این روش اساساً یک وبسایت با بارگذاری تنبل را به یک وبسایت سنتی تبدیل میکند، اما بااینحال کاربران همچنان میتوانند محتوا را بهصورت پویا بارگذاری کنند.
مثالهایی از بارگذاری تنبل
وردپرس بهعنوان یکی از بزرگترین پلتفرمهای وبلاگ نویسی در سطح وب یک راهکار بارگذاری تنبل بانام Infinite Scroll را ارائه میدهد. همانطور که از اسمش برداشت میشود، در Infinite Scroll همزمان با اسکرول کردن کاربر به سمت پایین صفحه محتوا هم بارگذاری میشود. فوتر صفحه که معمولاً در یک صفحه وب بینهایت غیرقابلدسترس است، بهعنوان یک پوشش زیر محتوای اسکرول شده نمایش داده میشود. وردپرس ادعا میکند که کاربران میتوانند با فعالسازی Infinite Scroll محتواهای بیشتری را بخوانند و این کاملاً با رویکرد صفحه محور سنتی در تضاد است.
گوگل برای نتایج جستجوی تصاویر خود، رویکرد متفاوتی را در پیشگرفته است. همزمان با اسکرول کردن کاربر به سمت پایین صفحه، تصاویر جایگزین با نمونههای بندانگشتی جایگزین میشوند. بعدازاینکه تعداد مشخصی از تصاویر بارگذاری شدند، یک دکمه به کاربران امکان میدهد تا تصاویر بیشتری را بارگذاری کنند. گوگل با ارائه این دکمه درواقع Infinite Scroll و بارگذاری تنبل را باهم ترکیب کرده است تا یک رویکرد هیبریدی پویا را ارائه دهد.
مزایای lazy loading
- ۱ – Lazy loading باعث ایجاد تعادل میان بهینهسازی تحویل محتوا و سادهسازی تجربه نهایی کاربری میشود.
- ۲ – ازآنجاکه در این رویکرد تنها بخشی از صفحه در صورت نیاز کاربر دانلود میشود، درنتیجه کاربر میتواند سریعتر با محتوا ارتباط برقرار کند.
- ۳ – محتوا بهصورت مستمر به کاربر تحویل داده میشود و کسبوکارها میتوانند شاهد جذب مشتری بیشتری باشند. بارگذاری تنبل احتمال خارج شدن کاربر از وبسایت را هم کاهش میدهد.
- ۴ – هزینهای که کسبوکارها برای منابع خود میپردازند کاهش مییابد؛ چراکه محتوا تنها در صورت درخواست کاربر بارگذاری میشود.
نتیجهگیری
سادهسازی و افزایش تأثیرگذاری محتوای صفحه بخشی حیاتی از شکل دادن تجربه مرور کاربر است. بارگذاری پویای منابع به کاربر امکان میدهد تا بدون نیاز به مراجعه به چندین صفحه و منتظر ماندن برای بارگذاری آنها محتواهای بیشتری را مشاهده کند. اگر lazy loading را بهدرستی اجرای کنید، این رویکرد میتواند حتی بدون آنکه کاربر متوجه شود هم محتواهای بیشتری را به او ارائه دهد.
افزودن بارگذاری تنبل میتواند باعث افزایش سرعت بارگذاری سایت شود؛ در پهنای باند صرفهجویی کند و تجربهای بیوقفه از وبگردی را ارائه دهد. تقریباً نیمی از کاربرانی که از یک وبسایت بازدید میکنند تنها صفحه اول آن را میبینند. بارگذاری تنبل میتواند با اضافه کردن مستمر محتوا همزمان با اسکرول کردن کاربر این بازدید یکصفحهای را برای شما به چیزی ارزشمندتر تبدیل کند.
منبع:
blog.stackpath.com
ترجمه شده در:
mag.hostiran.net