بهطور معمول وقتی کاربری یک صفحه وب را باز میکند، تمام محتوای صفحه بهصورت یکباره دانلود و رندر (تحویل) میشود. این کار به مرورگر امکان میدهد تا صفحه وب را کش کند، اما هیچ تضمینی وجود ندارد که کاربر تمام محتواهای دانلود شده را ببیند. برای مثال، اگر یک گالری تصویر بهصورت کامل دانلود شود اما کاربر بعد از مشاهده اولین تصویر از آن خارج شود، باعث هدر رفتن حافظه و پهنای باند خواهد شد.
بهجای بارگذاری تمام محتوا در هنگام ورود کاربر به یک صفحه، میتوان محتوا را زمانی بارگذاری کرد که کاربر به بخش مورد نظر خود در صفحه دسترسی پیدا میکند. با بارگذاری تنبل یا Lazy Loading صفحهها بامحتوای Placeholder ایجاد میشوند و این محتوا فقط زمانی که کاربر نیاز داشته باشد با محتوای واقعی جایگزین میگردد.
Lazy Loading چیست؟
بارگذاری تنبل (Lazy Loading) یک تکنیک در توسعه نرمافزار و وب است که در آن منابع (مثل تصاویر، ویدیوها، یا دادهها) فقط زمانی بارگذاری میشوند که واقعاً به آنها نیاز باشد، نه از همان ابتدای بارگذاری صفحه یا برنامه!
با بیانی ساده تر فرض کن وارد یک صفحه وب طولانی میشی که پر از تصویر است، بهجای اینکه همه تصاویر از اول دانلود شوند، فقط تصاویری که در دید تو هستند لود میشوند. بقیه عکس ها وقتی صفحه را اسکرول میکنی، کمکم بارگذاری میشوند. این دقیقاً همان Lazy Loading هست.
──────────────────────────────
│ صفحه وب (Viewport) │
│ ────────────── │
│ │ تصویر 1 ✅ │ ← لود شده │
│ ├──────────────┤ │
│ │ تصویر 2 ✅ │ ← لود شده │
│ ├──────────────┤ │
│ │ تصویر 3 ⏳ │ ← هنوز لود نشده │
│ ├──────────────┤ │
│ │ تصویر 4 ⏳ │ ← هنوز لود نشده │
│ └──────────────┘ │
│ ↓ اسکرول کاربر │
──────────────────────────────
بارگذاری تنبل دقیقاً چه سازوکاری دارد؟
وقتی شخصی یک منبع مانند عکس و ویدئو را به صفحه وب اضافه میکند، منبع به یک placeholder کوچک ارجاع داده میشود. وقتی کاربر وارد صفحه میشود، منبع واقعی توسط مرورگر کش شده و هنگام نمایان شدن منبع روی نمایشگر کاربر، placeholder را با محتوای واقعی تعویض میکند. برای مثال، اگر کاربر یک صفحه را بارگذاری و بلافاصله آن را ترک کند، در اینجا هیچچیزی بهجز قسمت بالای صفحه بارگذاری نمیشود.
تأثیر بارگذاری تنبل بر سئو
تأثیر بارگذاری تنبل بر رتبهبندی صفحهها در موتورهای جستجو یکی از رایجترین معایب آن به شمار میرود.
ازآنجاکه منابع نسبت به محتوای جایگزین در حالت پیشفرض قرار میگیرد، خزنده یک موتور جستجو ممکن است آن را بد تفسیر کند یا بهصورت کامل منابع را نادیده بگیرد. بارگذاری تنبل یک عنصر کامل از یک صفحه وب مانند پست وبلاگی میتواند بهصرف نظر کردن موتورهای جستجو از خزیدن منجر شود. این کار درنهایت به کاهش تعداد نتایج موتورهای جستجو میانجامد؛ چراکه تعداد محتوای کمتری ایندکس میشود.
یکی از ترفندهای غلبه بر این مشکل، تهیه لینک برای محتواهایی است که lazy loading دارند. وقتی موتور جستجو یک وبسایت را ایندکس میکند، این موتور جستجو لینکها را دنبال کرده و محتواهای پیداشده را ایندکس میکند. این روش اساساً یک وبسایت با بارگذاری تنبل را به یک وبسایت سنتی تبدیل میکند، اما بااینحال کاربران همچنان میتوانند محتوا را بهصورت پویا بارگذاری کنند.
مثالهایی از بارگذاری تنبل
وردپرس بهعنوان یکی از بزرگترین پلتفرمهای وبلاگ نویسی در سطح وب یک راهکار بارگذاری تنبل بانام Infinite Scroll را ارائه میدهد. همانطور که از اسمش برداشت میشود، در Infinite Scroll همزمان با اسکرول کردن کاربر به سمت پایین صفحه محتوا هم بارگذاری میشود. فوتر صفحه که معمولاً در یک صفحه وب بینهایت غیرقابلدسترس است، بهعنوان یک پوشش زیر محتوای اسکرول شده نمایش داده میشود. وردپرس ادعا میکند که کاربران میتوانند با فعالسازی Infinite Scroll محتواهای بیشتری را بخوانند و این کاملاً با رویکرد صفحه محور سنتی در تضاد است.
گوگل برای نتایج جستجوی تصاویر خود، رویکرد متفاوتی را در پیشگرفته است. همزمان با اسکرول کردن کاربر به سمت پایین صفحه، تصاویر جایگزین با نمونههای بندانگشتی جایگزین میشوند. بعدازاینکه تعداد مشخصی از تصاویر بارگذاری شدند، یک دکمه به کاربران امکان میدهد تا تصاویر بیشتری را بارگذاری کنند. گوگل با ارائه این دکمه درواقع Infinite Scroll و بارگذاری تنبل را باهم ترکیب کرده است تا یک رویکرد هیبریدی پویا را ارائه دهد.
مزایای lazy loading
- ۱ – Lazy loading باعث ایجاد تعادل میان بهینهسازی تحویل محتوا و سادهسازی تجربه نهایی کاربری میشود.
- ۲ – ازآنجاکه در این رویکرد تنها بخشی از صفحه در صورت نیاز کاربر دانلود میشود، درنتیجه کاربر میتواند سریعتر با محتوا ارتباط برقرار کند.
- ۳ – محتوا بهصورت مستمر به کاربر تحویل داده میشود و کسبوکارها میتوانند شاهد جذب مشتری بیشتری باشند. بارگذاری تنبل احتمال خارج شدن کاربر از وبسایت را هم کاهش میدهد.
- ۴ – هزینهای که کسبوکارها برای منابع خود میپردازند کاهش مییابد؛ چراکه محتوا تنها در صورت درخواست کاربر بارگذاری میشود.
Lazy Loading در توسعه وب
در HTML مدرن، استفاده از Lazy Loading بسیار ساده شده است:
ویژگی loading="lazy" به مرورگر میگوید تصویر را فقط زمانی بارگذاری کند که نزدیک به دید کاربر باشد.
Lazy Loading در جاوااسکریپت
در فریمورکهایی مثل React یا Vue، Lazy Loading برای بارگذاری کامپوننتها استفاده میشود:
این کار باعث میشود کدها به صورت داینامیک و در زمان نیاز دانلود شوند.
نتیجهگیری
سادهسازی و افزایش تأثیرگذاری محتوای صفحه بخشی حیاتی از شکل دادن تجربه مرور کاربر است. بارگذاری پویای منابع به کاربر امکان میدهد تا بدون نیاز به مراجعه به چندین صفحه و منتظر ماندن برای بارگذاری آنها محتواهای بیشتری را مشاهده کند. اگر lazy loading را بهدرستی اجرای کنید، این رویکرد میتواند حتی بدون آنکه کاربر متوجه شود هم محتواهای بیشتری را به او ارائه دهد.
افزودن بارگذاری تنبل میتواند باعث افزایش سرعت بارگذاری سایت شود؛ در پهنای باند صرفهجویی کند و تجربهای بیوقفه از وبگردی را ارائه دهد. تقریباً نیمی از کاربرانی که از یک وبسایت بازدید میکنند تنها صفحه اول آن را میبینند. بارگذاری تنبل میتواند با اضافه کردن مستمر محتوا همزمان با اسکرول کردن کاربر این بازدید یکصفحهای را برای شما به چیزی ارزشمندتر تبدیل کند.
ارائه خدمات بهینه سازی وبسایت توسط شرکت فراتک
شرکت فراتک بهعنوان یکی از مجموعههای شناخته شده در مشهد، در حوزه خدمات دیجیتال فعالیت میکند و راهکارهای حرفهای برای حضور مؤثر کسبوکارها در فضای آنلاین ارائه میدهد. این شرکت با بهرهگیری از تجربه و دانش تخصصی، خدمات seo وب سایت را برای بهبود جایگاه وبسایتها در نتایج موتورهای جستجو و همچنین ارائه خدمات میزبانی وب پایدار و امن را در اختیار مشتریان خود قرار میدهد تا کسبوکارها بتوانند با اطمینان بیشتری فعالیت آنلاین خود را توسعه دهند.
منبع: blog.stackpath.com
ترجمه شده در: mag.hostiran.net