Lazy Loading یا لیزی لود چیست ؟

Lazy loading را باید سلاح مخفی توسعه دهندگان سایت برای موفقیت در چالش ارائه سریع ترین وبسایت دانست. اما دقیقاً لیزی لود یا بارگذاری تنبل چیست؟ به بیان ساده، lazyload یک تکنیک هوشمندانه است که به وب سایت شما می گوید تا زمانی که کاربر به آنها نیاز دارد، بارگذاری برخی از عناصر را متوقف کند. میشود آن را به عنوان لود درخواستی برای وب سایت خود در نظر بگیرید.

Lazy Loading یا لیزی لود چیست ؟

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

Lazy Loading روشی است که این سناریو را تغییر می دهد. به جای گفتن، “همه چیز را همین الان بارگذاری کن!” به وب‌سایت دستور می‌دهد: «بیایید با موارد ضروری شروع کنیم و بقیه را با پایین آمدن کاربر بارگذاری کنیم.» این یعنی محتوایی که بلافاصله روی صفحه نمایش شما ظاهر می شود در اولویت قرار می گیرد و حس لود سریع را به شما می دهد. همانطور که با صفحه تعامل دارید، عناصر پایین تر صفحه نیز به زیبایی ظاهر می شوند.

چرا باید از Lazy Loading استفاده کنید؟

• بارگذاری اولیه به یک چشم به هم زدن: با اولویت بندی محتوای بالای صفحه، وب سایت شما سریع و ریسپانسیو است و کاربران را از همان لحظه اول جذب می کند.
• تجربه کاربری پیشرفته (UX): با لود دیرهنگام تصاویر، دیگر جهش های طرح بندی ناخوشایندی در لحظه بارگذاری وجود ندارد. لیزی لود یک پیمایش یکپارچه با محتوای صفحه را تضمین می کند که به آرامی ظاهر می شود و یک تجربه کاربری مرتب در دید کاربر ایجاد می کند.
• حفظ پهنای باند: وب‌سایت‌ها، به‌ویژه وب‌سایت‌هایی که دارای تصویرسنگین هستند، می‌توانند پهنای باند را نابود کنند. بارگذاری تنبل فشار بر روی پهنای باند اینترنت کاربر و منابع سرور شما را کاهش می دهد.
• بهبود سئو: در حالی که یک عامل رتبه بندی مستقیم نیست، بارگذاری تنبل به سرعت بیشتر صفحه کمک می کند، که یکی از جنبه های کلیدی Core Web Vitals در گوگل است ( در واقع همان مجموعه ای از معیارها که بر رتبه بندی موتورهای جستجو تأثیر می گذارد).
•  

انواع محتوا مناسب برای تکنیک بارگذاری تنبل یا Lazy Loading

• تصاویر: تصاویر معمولا بیشترین تاثیر را در مدت زمان بارگذاری صفحه دارند.
• ویدیوها: ویدیوهای جاسازی شده یا Embededمی‌توانند سنگین باشند – Lazy Load بارگیری ویدیوها را تا زمانی که کاربر شروع به پخش کند به تاخیر می‌اندازد.
• Iframes: این عناصر که برای نمایش نقشه‌ها و ابزارک‌های رسانه‌های اجتماعی استفاده می شود؛ را نیز می توانید با بارگذاری تنبل بهینه کنید.
• اسکریپت‌ها، متن و موارد دیگر: در حالی که کمتر رایج است، لیزی لود می‌تواند روی بلوک‌های متن سنگین، اسکریپت‌های جاوااسکریپت یا سایر عناصرنیز اعمال شود.

لیزی لود چگونه کار می کند؟

تفاوت بین روش لود قدیمی با Lazy Load

در وبسایتی که هیچ بهینه سازی انجام نشده، مراحل زیر اتفاق میفتد:

1. ارسال درخواست: شما یک URL را تایپ می کنید و اینتر را می زنید.
2. سرور پاسخ می دهد: سرور وب سایت مجموعه بزرگی از فایل ها را ارسال می کند – HTML، CSS، جاوا اسکریپت، تصاویرو…
3. دانلود: مرورگر شما شروع به دانلود این بسته بزرگ می کند.
4. رندر: وقتی که همه چیز دانلود شد، مرورگر شما می‌تواند شروع به ساخت و نمایش صفحه کند.

همه آن عناصر سنگین، مانند تصاویری که در پایین صفحه هستند، آنچه در ابتدای کار مهم است و دیده می شود را به تاخیر می اندازند.

حالا یک نمای ساده از نحوه عملکرد یک وب سایت با Lazy Load را مرور می کنیم:

1. درخواست: مثل حالت قبل.
2. پاسخ سرور: Html، css و جاوااسکریپت ضروری برای لود اولیه را ارسال می کند. تصاویر و دیگر کاندیدهای لیزی لود دستورالعمل های بعدی را دریافت می کنند.
3. رندر: مرورگر قسمت قابل مشاهده صفحه را با سرعت برق و باد می سازد.
4. لود به محض درخواست : همانطور که اسکرول می کنید، به کمک کدهای جاوا اسکریپت (Intersection Observer API که در ادامه توضیح داده می شود) شروع به کار می کند و تشخیص می دهد که چه زمانی عناصر خارج از صفحه به viewport نزدیک شده اند و بارگذاری آنها را آغاز می کند.

مکانیزم فنی لیزی لود

بیایید به روش‌های رایج اجرای lazy load نگاه کنیم:

• جاوا اسکریپت (با Intersection Observer API): کتابخانه‌های جاوا اسکریپت و کدهای سفارشی با استفاده از Intersection Observer API کنترل دقیقی روی اجرای بارگذاری تنبل و زمان انجام این فرایند ارائه می‌دهند. این API بررسی می کند که یک عنصر وارد قسمت قابل مشاهده پنجره مرورگر(view port) شود.
• استفاده از ویژگی ‘loading’ در تگ های HTML: اکثر مرورگرهای جدید از ویژگی loading=”lazy” در تگ های <img> و <iframe> پشتیبانی می کنند. این یک راه بسیار ساده برای دستور دادن به مرورگر برای مدیریت بارگذاری تنبل برای این عناصر محسوب می شود.

نحوه پیاده سازی Lazy Loading  برای افزایش سرعت

پیاده سازی دستی

این راه مناسبی افرادی است که دستی در توسعه وبسایت و کدنویسی دارند:

• از طریق کدنویسی جاوااسکریپت: با کمک کدنویسی جاوااسکریپت و ابزار ویژه‌ای به نام Intersection Observer API به وب‌سایت می توان تشخیص داد که چه زمانی عناصر خارج از صفحه قرار است وارد قسمت قابل مشاهده صفحه مرورگر (viewport) شوند و بعد ا ز آن فرآیند بارگذاری آغاز می شود.
• تعریف ویژگی loading به صورت محلی: اکثر مرورگرها از ویژگی loading=”lazy” در تگ های <img> و <iframe> پشتیبانی میکند. این ویژگی را به تصویر یا کد iframe خود اضافه کنید تا مرورگر به طور خودکار لود آنها را تا زمانی که کاربر نزدیک آنها اسکرول نکرده به تاخیر بیندازد.

کتابخانه های Lazy Loading

اگر می‌خواهید در زمان صرفه‌جویی کنید و از ویژگی‌های پیشرفته بهره ببرید، استفاده از یک کتابخانه اختصاصی Lazy Loading گزینه بسیار خوبی است. نمونه ای از این کتابخانه ها موارد زیر است:

• js: سبک و ساده.
• Lazysizes: دارای ویژگی های پیشرفته، امکان سفارشی سازی زیاد و مدیریت تصویر ریسپانسیو را ارائه می دهد.
• Vanilla Lazyload: برای پروژه های کوچک عالی است.

پیاده سازی Lazy Load در وردپرس

برای وردپرس کاران استفاده از این قابلیت خیلی ساده است و برای این کار تنها نیاز است یکی از افزونه های زیر را نصب کنند:

• WP Rocket: این افزونه برای بهینه سازی سرعت در وردپرس ایجاد شده که قابلیت لیزی لود را نیز دارد.
• Smush: برای بهینه سازی تصویر استفاده می شود بارگذاری تنبل را نیز ارائه می دهد.
• Autoptimize: Lazy Loading را در کنار سایر تغییرات عملکرد برای وردپرس انجام می دهد.

چه زمانی باید از Lazy Load استفاده کنید و چه زمانی نباید این قابلیت را فعال کرد؟

لیزی لود یک راه حل  فوق العاده برای افزایش سرعت لود سایت است اما همیشه نباید از آن استفاده کرد! این قانون طلایی را در این خصوص در نظر داشته باشید:

• اگر محتوای انتهایی صفحه شامل تصاویر سنگین، فیلم و کدهای iframe است؛ حتما از بارگذاری تنبل استفاده کنید.
• برای تصاویر مهم و کلیدی ابتدای صفحه که به محض بازشدن صفحه باید کاربر را جذب کنند از لیزی لود استفاده نکنید.

باید و نباید استفاده از Lazy Load باتوجه به تجربه کاربری (UX)

Lazy loading یک ابزار قدرتمند برای UX است، اما به شرطی با دقت استفاد شود:

• استفاده از انمیشن ها و نمادهای لودینگ: نمادهای spinner یا انیمیشن های کوچک که به کاربران اطمینان می دهند که چیزهایی در حال رخ دادن هستند.
• کمک گرفتن از جلوه انیمیشنی Fade-in: انتقال روان هنگامی که محتوای Lazy Load شده وارد می‌شود، از نظر بصری جذاب است.
• کنترل بروز خطا: اگر محتوا بارگیری نشد، مطمئن شوید که پیغام مناسب جهت نمایش تعیین شده باشد. نماد تصویر شکسته یا دکمه بارگذاری مجدد باید قرار داده شود.
• ریسپانسیو را در نظر بگیرید: ممکن است بسته به طرح، لازم باشد تصاویردر صفحه‌های کوچک‌تر زودتر لود شوند.

تاثیر Lazy Load در سئو

تاثیرات بالقوه سئو

موتورهای جستجو، مانند گوگل، وب سایت هایی را که به سرعت بارگذاری می شوند و تجربه کاربری لذت بخشی را ارائه می دهند، در اولویت قرار می دهند. اگرچه Lazy Load ممکن است یک سیگنال رتبه بندی مستقیم نباشد اما تأثیر آن بر نحوه تعامل کاربران با وب سایت شما قطعاً مهم است.

• ایندکس تصاویر در گوگل : موتورهای جستجو در درک و ایندکس تصاویر با لیزی لود ماهر شده اند. با این حال، بهتر است زمینه کافی برای درک تصاویر lazy Load شده را برای ربات های گوگل فراهم کنید.
• Core Web Vitals: بارگذاری تنبل مستقیماً به زمان بارگذاری سریع‌تر کمک می‌کند، که در Core Web Vitals Google نقش دارد.

ترفندهای Lazy Load برای بهبود رتبه سئو

در ادامه راهکارهای seo-friendly لیزی لود را بررسی می کنیم:

• از متغیرهای توصیفی استفاده کنید: فقط فضاهای خالی را رها نکنید! متغیرهایی را پیاده سازی کنید که نکاتی را در مورد محتوا ارائه می دهند. مکان‌نماهای تصویر با متن جایگزین معنی‌دار برای سئوی تصویر بسیار مهم هستند.
• اطمینان از دسترسی: محتوای لیزی لود شده هم باید به نحوی توسط ربات های موتور جستجو قابل کشف و درک باشد. استفاده از تگ های HTML معنایی، متن جایگزین یا ALT برای تصویر و.. بسیار مهم هستند.
• استفاده از داده‌های ساختاریافته یا Schema: در صورت امکان، از داده‌های ساختاریافته (مانند نشانه‌گذاری org) استفاده کنید تا به موتورهای جستجو اطلاعات بیشتری در مورد محتوای خود بدهید، حالا چه فوراً بارگیری شود یا بعداً لود شود.
• رندر سمت سرور (SSR): برای سایت های پر محتوا یا متکی به جاوا اسکریپت، SSR را در نظر بگیرید. این راهکار HTML از پیش رندر شده را به مرورگر می فرستد و اطمینان حاصل می کند که همه محتوا به راحتی قابل ایندکس شدن است.

ترفندهای پیشرفته لیزی لود یا بارگذاری تنبل

ریسپانسیوسازی Lazy Load

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

• نقاط شکست یا Breakpoint ها: نقاط شکست مختلفی را بسته به اندازه صفحه تعریف کنید. تصاویر باید زودتر در نمایشگرهای کوچکتر بارگیری شوند، جایی که محتوا به صورت عمودی نمایش داده شده است.
• اندازه‌های تصویر: کمک گرفتن از بارگذاری تنبل با تکنیک‌های تصویر واکنش‌گرا (مانند ویژگی‌های srcset و اندازه‌ها) به کاربران اطمینان می‌دهد که تصویر با اندازه مناسب را دریافت می‌کنند و پهنای باند هم ذخیره می شود.

لیزی لود برای فروشگاه های اینترنتی

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

رفع خطاهای احتمالی هنگام استفاده از Lazy Load

گاهی اوقات بارگذاری تنبل می تواند مشکلات زیر را ایجاد کند:

محتوا در بارگذاری پرش دارد: برای جلوگیری از جابجایی طرح‌بندی صفحه، اطمینان حاصل کنید که م placeholder های شما ابعادی مشابه محتوای اصلی دارند.

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

تضاد با سایر اسکریپت ها: اگر چندین کتابخانه جاوا اسکریپت را در سایت خود استفاده کنید، ممکن است عملکرد بارگیری تنبل شما را تحت تاثیر قرار دهد.

Lazy Loading تصاویر در المنتور چگونه عمل می‌کند؟

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

در اینجا Lazy Loading وارد عمل می‌شود. این تکنیک به جای آن‌که همه تصاویر را هم‌زمان بارگذاری کند، به مرورگر دستور می‌دهد: «تصاویری که در دید کاربر هستند را ابتدا بارگذاری کن و بقیه را در زمان نیاز.» یعنی زمانی که کاربر در حال اسکرول کردن صفحه است و به بخش‌های پایین‌تر می‌رسد، تصاویر مربوط به آن بخش‌ها نیز به‌تدریج و فقط در صورت نیاز بارگذاری می‌شوند.

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

جمع بندی

Lazy Loading راهکاری برای تبدیل یک سایت کند و خسته کننده به سایتی سریع و جذاب برای کاربران است. در این آموزش خواندید که این تکنیک علاوه بر بهبود سرعت و تجربه کاربری چگونه باعث صرفه جویی در منابع سرور و پهنای باند می شود. با نحوه پیاده سازی لیزی لود در سایت های مختلف از جمله در وردپرس آشنا شدید و آموختید که چگونه باید خطاهای احتمالی را هندل کنید.