در دنیای واقعی، تنبلی همیشه صفتی مثبت تلقی نمی‌شود، اما؛ در دنیای وب، گاهی اوقات می‌تواند به نفع شما باشد. «بارگذاری تنبل» (Lazy Loading) یکی از این موارد است. اگر دوست دارید تا بیشتر درباره آن اطلاعات کسب کنید، تا انتهای این مطلب از سهامگ همراه‌مان باشید.
مفهوم lazy loading یعنی چه؟
در هنگام بارگذاری یک صفحه وب، مرورگر به طور معمول تمام عناصر موجود در آن صفحه، از جمله تصاویر، ویدیوها و سایر محتوای بصری را به طور همزمان دانلود می‌کند. این فرآیند می‌تواند زمان‌بر باشد، به خصوص اگر صفحه وب حاوی تصاویر و ویدیوهای با حجم بالا باشد.
بارگذاری تنبل، رویکردی متفاوت را در پیش می‌گیرد. در این روش، مرورگر فقط عناصری را که در معرض دید کاربر قرار دارند، به طور کامل بارگذاری می‌کند و بارگذاری سایر عناصر را به زمانی که کاربر به آن‌ها می‌رسد، موکول می‌کند. به این ترتیب، زمان بارگذاری اولیه صفحه به طور قابل توجهی کاهش می‌یابد و تجربه کاربری به طورکلی بهبود می‌یابد.
تصاویر با بارگذاری lazy loading چگونه کار می‌کنند؟
همانطور که اشاره شد، بارگذاری تنبل (لیزی لودینگ) تکنیکی است که به سایت شما کمک می‌کند تا سریع‌تر بارگذاری شود، به خصوص در صفحاتی که تصاویر زیادی دارند. اما این روش چگونه کار می‌کند؟
هنگام مرور وب، اسکرول‌کردن شما (حرکت دادن صفحه با ماوس) اغلب، محرک اصلی بارگذاری لیزی لودینگ، تصاویر است. به عبارت دیگر، زمانی که به سمت پایین صفحه را اسکرول می‌کنید، به مرورگر اعلام می‌کنید که تصاویر موجود در آن بخش را بارگذاری کند.
وقتی یک صفحه وب را باز می‌کنید، قسمتی که کاربر بلافاصله می‌بیند «بالای تاخوردگی» (Above the Fold)
و قسمتی که هنوز قابل مشاهده نیست «پایین تاخوردگی» (Below the Fold)نام دارد. این 2 واژه، اصطلاحاتی هستند که از چیدمان روزنامه‌ها نشأت می‌گیرند.
روزنامه‌ها اغلب؛ از وسط به صورت افقی تا می‌خوردند و نیمه جلویی، ناحیه بالای تاخوردگی، اولین چیزی است که خواننده می‌بیند. هنگامی‌که این اصطلاح در چیدمان سایت به کار گرفته می‌شود، «تاخوردگی» به پایین صفحه نمایش کاربر اشاره می‌کند.
تصاویر بالای تاخوردگی باید بلافاصله بارگذاری شوند تا کاربر با کندی مواجه نشود. اما تصاویری که پایین‌تر قرار دارند، تا زمانی که کاربر به آن قسمت اسکرول نکند، لزومی به بارگذاری ندارند. اینجاست که بارگذاری تنبل وارد عمل شده و به تاخیرانداختن بارگذاری این تصاویر کمک می‌کند.
مزایای استفاده از lazy loading چیست؟
شاید برای شما این سوال پیش آمده‌است که چرا lazy loading را فعال کنیم؟ در ادامه با خواندن مزایای نصب آن، خود جواب سوال‌تان را پیدا خواهید کرد.
· سرعت بارگذاری صفحه را افزایش می‌دهد
این امر به ویژه برای سایت‌های با تصاویر و ویدیوهای زیاد بسیار مفید و کاربردی است.
· تجربه کاربری را بهبود می‌بخشد
با بارگذاری سریع‌تر صفحات، کاربران می‌توانند سریع‌تر به محتوای مورد نظر خود دسترسی پیدا کنند.
· مصرف پهنای باند را کاهش می‌دهد
با بارگذاری فقط عناصری که کاربر می‌بیند، می‌توان در مصرف پهنای باند صرفه‌جویی کرد.
· به سئو (SEO) وب‌سایت کمک می‌کند.
سرعت بارگذاری صفحه یکی از فاکتورهای مهم رتبه‌بندی در موتورهای جست‌وجو مانند گوگل است.
آموزش فعال‌سازی lazy loading در وردپرس
همانطور که بارها اشاره کردیم، بارگذاری تنبل (Lazy Load) تکنیکی کارآمد برای بهبود سرعت بارگذاری صفحات وب است، به خصوص در مورد تصاویر. 2 روش اصلی برای فعال‌سازی Lazy Load در وردپرس وجود دارد:
1. استفاده از افزونه lazy loading
ساده‌ترین روش استفاده از افزونه‌های لیزی لودینگ است. محبوب‌ترین آن‌ها WP Rocket، ShortPixel Image Optimizer و A3 Lazy Load هستند.
مزایای نصب افزونه lazy loading در وردپرس
- نصب و پیکربندی آسان
- نیاز به دانش کدنویسی نیست.
معایب نصب افزونه lazy loading در وردپرس
برخی از افزونه‌ها ممکن است؛ سنگین باشند و سرعت سایت را کمی کاهش دهند.
2. استفاده از کد
می‌توانید به صورت دستی کدبارگذاری تنبل در وردپرس را به تم یا افزونه‌های خود اضافه کنید.
مزایای کدنویسی
کنترل کامل بر نحوه عملکرد لیزی لودینگ
معایب کدنویسی
نیاز به داشتن دانش کدنویسی، احتمال خطا در صورت عدم انجام صحیح آن وجود دارد.
مراحل استفاده از افزونه‌های Lazy Loading
· نصب و فعال‌سازی افزونه
برای نصب افزونه، به بخش پیشخوان وردپرس خود بروید و از منوی “افزونه‌ها” گزینه “افزودن” را انتخاب کنید. نام افزونه مورد نظر خود را جست‌وجو کنید، سپس روی “نصب” و “فعال‌سازی” کلیک کنید.
· پیکربندی افزونه
پس از فعال‌سازی افزونه، به تنظیمات آن بروید. در این بخش می‌توانید گزینه‌های مختلفی را برای تنظیم نحوه بارگذاری تنبل تصاویر و سایر عناصر انتخاب کنید. بیشتر افزونه‌ها به صورت پیش‌فرض بهینه شده‌اند، اما شما می‌توانید تنظیمات را بر اساس نیازهای خود تغییر دهید.
· بررسی و تست
پس از انجام تنظیمات، سایت خود را بررسی کنید تا مطمئن شوید که تصاویر به درستی و به صورت لیزی لودینگ بارگذاری می‌شوند. می‌توانید از ابزارهای سرعت‌سنج مانند GTmetrix یا Google PageSpeed Insights برای تست سرعت و عملکرد سایت استفاده کنید.
انواع lazy loading
انتخاب نوع بارگذاری تنبل، به نوع محتوای وب‌سایت و نیاز شما بستگی دارد. انواع لیزی لودینگ، عبارت‌اند از:
- لود تنبل تصاویر: رایج‌ترین نوع
- لود تنبل ویدئوها: برای وب‌سایت‌های با محتوای ویدئویی زیاد
- لود تنبل اسکریپت‌ها: برای اسکریپت‌های غیرضروری
- لود تنبل فونت‌ها: برای وب‌سایت‌هایی با فونت‌های سفارشی زیاد.
و اما سخن آخر
لیزی لودینگ تکنیکی موثر برای بهبود سرعت و کارایی وب‌سایت است که با تأخیر در بارگذاری تصاویر، ویدئوها، و سایر منابع، تنها زمانی که نیاز است، بارگذاری می‌شود. این روش به کاهش زمان بارگذاری اولیه صفحات و افزایش تجربه کاربری کمک می‌کند. انواع مختلف lazy loading شامل بارگذاری تصاویر، ویدئوها، iframes، داده‌ها و اجزای رابط کاربری است.
اگر به دنبال بهبود کارایی و سرعت وب‌سایت خود هستید، اکنون زمان آن رسیده که از تخصص «آژانس دیجیتال مارکتینگ سها» بهره‌مند شوید. با ما تماس بگیرید و وب‌سایت خود را بهینه‌سازی کنید!
متادیسکریپشن
بهبود سرعت وب‌سایت خود را با تکنیک lazy loading تجربه کنید. این روش کارایی وب‌سایت شما را افزایش داده و تجربه کاربری بهتری برای‌تان فراهم می‌کند. اکنون با آژانس دیجیتال مارکتینگ سها تماس بگیرید و سایت خود را بهینه‌سازی کنید!
منابع: cloudflare/ imperva
