چگونه Lazy Loading سرعت بارگذاری سایت را افزایش می دهد؟

لازم است بدانید افزایش سرعت سایت یکی از مهم ترین فاکتورهای بهینه سازی سایت است که به کمک لیزی لود یا لود تنبل امکان‌پذیر است، حالا سؤال اینجاست که لیزی‌لود (Lazy Load) چیست؟ در جواب باید بگوییم که یکی از تکنیک‌های افزایش سرعت بارگذاری سایت است که از کم شدن سرعت سایت به وسیله تصاویر و ویدئوها جلوگیری می‌کند در واقع  Lazy loading سلاح مخفی توسعه دهندگان سایت برای موفقیت در چالش ارائه سریع ترین وبسایت می‌باشد؛ به بیانی ساده‌تر لیزی‌لود یک تکنیک هوشمندانه است که به وب‌سایت شما می‌گوید بارگذاری برخی از عناصر را تا زمانی که کاربر به آنها نیاز ندارد متوقف کند، می‌توان آن را به عنوان لود درخواستی وب‌سایت نیز در نظر گرفت؛ با توجه به اهمیت سرعت سایت در سئو با ما همراه باشید تا توضیح دهیم که لود تنبل چیست؟ افزایش سرعت سایت با Lazy Loading را شرح دهیم:

لیزی لود (Lazy Load) چیست؟

در این قسمت به پاسخ دقیق این سؤال می‌پردازیم که لیزی لود (Lazy Load) چیست؟ گفتنی است که تصاویر و ویدئوها معمولا 70 درصد از حجم یک صفحه سایت را تشکیل می‌دهند که تاثیر زیادی در کاهش سرعت بارگذاری سایت برای کاربر دارند. وظیفه لیزی لود که با نام لود تنبل هم شناخته می‌شود این است که بارگذاری تصاویر و ویدئوها را تا زمان رسیدن کاربر به آنها به تعویق بیندازد؛ در حالت عادی، وقتی کاربر وارد یک صفحه می‌شود، مرورگر تمام اطلاعات آن صفحه اعم از متن، تصویر، ویدیو و.. را دانلود کرده سپس به کاربر نمایش می‌دهد؛ لود تصاویر و ویدیوها، معمولا 63 درصد از  زمان کل بارگذاری را در بر می‌گیرد در نتیجه کاربر باید تایم زیادی منتظر باشد تا صفحه برای او بارگذاری شود؛

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

مزایای استفاده از لیزی لود

ناگفته نماند که لیزی لود علاوه بر افزایش سرعت سایت مزایای متعددی را برای صفحات وب به همراه دارد که در ادامه توضیح می‌دهیم:

سرعت بارگذاری بالاتر

در شرایط برابر، صفحات وبی که حجم کم‌تری دارند، سریع‌تر بارگذاری می‌شوند؛ بارگذاری تنبل باعث می‌شود تا یک صفحه وب با اندازه‌ای کوچک‌تر از حجم نهایی خود بارگذاری اولیه را انجام داده در نتیجه سرعت بارگذاری کلی افزایش یابد و همین عملکرد بالای وب مزایای بسیاری از جمله بهبود سئو (SEO)، نرخ تبدیل بالاتر و بهینه‌سازی تجربه کاربر را به دنبال دارد.

جلوگیری از بارگذاری محتوای غیرضروری

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

معایب و محدودیت‌های Lazy Loading

در ادامه مبحث لیزی لود (Lazy Load) چیست؟ باید بگوییم که در کنار مزایای قابل توجهی که بارگذاری تنبل دارد دارای معایبی نیز می‌باشد که حتماً باید در نظر گرفته شوند:

• درخواست سریع‌تر منابع توسط کاربران: برای مثال، اگر کاربری به سرعت در صفحه اسکرول کند، ممکن است مجبور شود برای بارگذاری تصاویر کمی صبر کند و این مورد می‌تواند بر تجربه کاربری تأثیر منفی بگذارد.
• ارتباط اضافی با سرور: به جای درخواست تمام محتوای صفحه به طور یک‌جا، ممکن است مرورگر نیاز داشته باشد تا کاربر با اسکرول و تعامل با صفحه، چندین درخواست جهت دریافت محتوا به سرورهای ‌سایت ارسال کند؛ بهره بردن از یک شبکه توزیع محتوا (CDN) این مشکل بالقوه را به کمترین مقدار می‌رساند، زیرا تصاویر توسط CDN کش (ذخیره موقت) شده و مرورگر برای دریافت آن‌ها نیازی به ارسال درخواست به سرور اصلی (origin server) ندارد.
• کد اضافی برای پردازش توسط مرورگر: اگر توسعه‌دهنده برای آموزش مرورگر در خصوص نحوه بارگذاری تنبل منابع صفحه، چندین خط کد جاوا اسکریپت به وب‌سایت اضافه کند، این کد به حجم کلی کدی که مرورگر باید بارگذاری و پردازش نماید، اضافه می‌شود در صورت اجرای ناکارآمد، این زمان اضافی صرف شده برای بارگذاری و پردازش کد، ممکن است زمان صرفه‌جویی شده توسط بارگذاری تنبل را جبران کند.

لیزی‌لود در چه بخش‌هایی استفاده می‌شود؟

در ادامه بحث لیزی لود (Lazy Load) چیست؟ باید بگوییم که بارگذاری تنبل تنها به تصاویر محدود نمی‌شود. و می‌توان در سایر منابع نیز به بارگذاری تدریجی محتوا و بر حسب نیاز کاربر پرداخت، در ادامه این منابع را ذکر می‌کنیم:

• جاوا اسکریپت (JavaScript): جاوا اسکریپت به عنوان یک منبع render-blocking شناخته می‌شود، به این معنی که مرورگر نمی‌تواند صفحه را رندر کند تا زمانی که کد لیزی‌لود جاوا اسکریپت بارگذاری گردد؛ کد جاوا اسکریپت به بخش‌های کوچک‌تر قابل تقسیم بوده که در صورت نیاز بارگذاری می‌شوند در نتیجه تایم بارگذاری صفحاتی که نیاز به اجرای جاوا اسکریپت دارند، کاهش می‌یابد.
• CSS : این نیز یک منبع مسدود کننده رندر است تقسیم یک فایل CSS به چندین فایل که تنها در صورت نیاز بارگذاری می‌شوند، می‌تواند به کاهش مدت زمانی که مرورگر از رندر کردن بقیه صفحه مسدود می‌شود کمک کند؛ فایل‌های CSS غیرمسدودکننده باید لینک مخصوص به خود را داشته باشند که با اضافه کردن ویژگی media به مرورگر اعلام شود که چه زمانی آن‌ها را بارگذاری نماید.
• آی‌فریم (iframes): بارگذاری تنبل iframes، برای جاسازی محتوای خارجی در یک صفحه وب استفاده می‌شود؛ تگ‌های آی‌فریم می‌توانند همانند ویژگی loading که در بخش قبل برای تصاویر شرح داده شد داشته باشند.

آموزش پیاده‌سازی Lazy Loading در سایت

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

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

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

Js  سبک و ساده

Lazysizes: از ویژگی‎های پیشرفته بهره‌مند بوده و امکان سفارشی‌سازی گسترده، مدیریت تصویر ریسپانسیو و.. را ارائه می‌دهد.

Vanilla Lazyload: برای پروژه‌های کوچک عالی است.

در HTML

برای فعال‌سازی Lazy Loading در HTML، نیازی به نصب پلاگین لیزی‌لود یا ابزار خاصی نیست؛ مرورگرهای مدرن این قابلیت را به‌صورت داخلی پشتیبانی می‌کنند. کافی است از ویژگی loading=”lazy” در تگ‌های <img> یا <iframe>  استفاده کنید.

مراحل ساده پیاده‌سازی:

• انتخاب عناصر هدف: معمولاً تصاویر و آی‌فریم‌ها بیشترین حجم را دارند.
• افزودن ویژگی Lazy: به‌سادگی ویژگی loading=”lazy” را به تگ اضافه کنید.
• تست در مرورگر: مطمئن شوید مرورگر شما از این ویژگی پشتیبانی می‌کند (اکثر مرورگرهای جدید پشتیبانی می‌کنند).

در وردپرس

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

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

در JavaScript

برای نصب و پیاده‌سازی Lazy Loading در JavaScript نیاز به نصب کتابخانه خاصی ندارید؛ چون می‌توانید

با امکانات داخلی مرورگر یا کمی کدنویسی ساده به بهبود Page Speed کمک کنید؛ با این حال، اگر بخواهید از کتابخانه‌های آماده استفاده کنید، گزینه‌هایی مثل lazysizes یا vanilla-lazyload وجود دارند که کار شما را راحت‌تر می‌کنند.

• روش بدون کتابخانه با Intersection Observer : این روش نیازی به نصب ندارد و فقط با جاوااسکریپت خام پیاده‌سازی می‌شود.
• روش با نصب کتابخانه مثلاً lazysizes

اگر بخواهید از کتابخانه آماده استفاده کنید:

• نصب با npm
• یا اضافه کردن مستقیم از CDN
• استفاده در HTML

لیزی لود و سئو: آیا تأثیر منفی دارد؟

گفتنی است که اگر Lazy Loading به‌درستی پیاده‌سازی شود، تأثیر منفی بر سئو ندارد؛ بلکه با کاهش زمان بارگذاری صفحه می‌تواند رتبه سایت را بهبود دهد و مشکل زمانی پیش می‌آید که تصاویر یا محتوای Lazy Load  برای خزنده‌های موتور جستجو قابل مشاهده نباشند.

مزایای که برای سئو دارد:

• کم کردن تایم بارگذاری اولیه صفحه و بهبود تجربه کاربر
• کاهش نرخ پرش (Bounce Rate) چون کاربران سریع‌تر به محتوای اصلی دسترسی پیدا می‌کنند.
• گوگل و سایر موتورهای جستجو از سرعت سایت به‌عنوان یکی از فاکتورهای رتبه‌بندی استفاده می‌کنند، بنابراین Lazy Loading می‌تواند به بهبود رتبه کمک کند.

چالش‌ها و ریسک‌ها:

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

سخن پایانی

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

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

سؤالات متداول

چه تفاوتی بین Lazy Load و Preload وجود دارد؟

در Lazy Load منابع فقط هنگام نیاز بارگذاری می‌شوند، اما در Preload مرورگر منابع مشخص‌شده را زودتر از موعد دانلود می‌کند.

آیا استفاده از لیزی لود روی سئو تأثیر دارد؟

Lazy Load اگر درست پیاده‌سازی شود، نه‌تنها به سئو آسیب نمی‌زند بلکه با بهبود سرعت سایت، رتبه را بهتر می‌کند.

آیا همه مرورگرها از ویژگی لیزی لود پشتیبانی می‌کنند؟

بیشتر مرورگرهای مدرن از ویژگی لیزی لود پشتیبانی می‌کنند، اما در مرورگرهای قدیمی ممکن است نیاز به اسکریپت کمکی باشد.

آیا Lazy Load باعث تأخیر در نمایش محتوا به کاربر نمی‌شود؟

Lazy Load فقط نمایش محتوای خارج از دید کاربر را به‌ تعویق می‌اندازد و محتوای اصلی صفحه بدون تأخیر نمایش داده می‌شود.