لیزی لود (lazy load) چیست و تاثیر آن بر سرعت سایت

 

در این مقاله از مجله آژانس دیجیتال مارکتینگ منتا، ما قصد داریم به اصل لیزی لود (lazy load) نگاهی بیندازیم، تکنیکی مفید که بارگذاری تصاویر را به تعویق می‌اندازد و آنها را تا زمانی که به آن‌ها نیاز ندارید، لود نمی کند.

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

Lazy load چه کار می‌کند؟ چرا این روش سرعت یک وب سایت را سریع‌تر می‌کند؟ چگونه از این روش در وردپرس استفاده کنیم؟ هدف این مقاله ارائه پاسخ به این پرسش‌ها است. چند نکته نیز وجود دارد که باید قبل از استفاده از lazy load در نظر بگیرید. در غیر این صورت، مشکلات مربوط به زمان بارگذاری یک وب سایت حل نمی‌شود. در این مقاله کارهای مقدماتی لازم برای استفاده موثر از لیزی لود را نیز شرح می‌دهیم.

Lazy load چیست؟

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

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

یک صفحه وب معمولا چگونه بارگیری می شود؟

هر زمان که از مرورگر خود بخواهید یک URL را باز کند، این اتفاق می افتد:

• کلیک بر روی لینک یک درخواست را ارسال می کند
• صفحه با تمام منابع (فایل) آن دانلود می شود
• مرورگر وب صفحه را با استفاده از منابع موجود در آن می سازد
• اکنون صفحه به کاربر نمایش داده می شود (رندر می شود).

سوالی که وجود دارد، در مرحله دوم معمولاً چه منابعی در یک صفحه گنجانده شده است؟ این منابع شامل:

• HTML (از حدود 15 تا 120 کیلوبایت کد)
• فایل های جاوا اسکریپت و CSS (از 5 تا 200 کیلوبایت کد)
• تصاویر و آی فریم ها (از 200 کیلوبایت به بالا )

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

با لیزی لود در این مراحل چه اتفاقی می افتد؟

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

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

تصاویر تا زمانی که کاربر تصمیم بگیرد صفحه را به پایین اسکرول کند، به طور کلی بارگیری نمی شوند.

Lazy load چه مزایایی دارد؟

در ادامه 6 مزایای این تکنیک را مورد بررسی قرار می دهیم:

1. بهبود در زمان بارگذاری

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

1. کاهش فعالیت برای مرورگر

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

1. کاهش تعداد درخواست های HTTP در طول بارگذاری صفحه اول

همچنین تعداد درخواست های HTTP را کاهش می دهید.

1. بهبود در PageSpeed ​​Insights

هنگامی که تصاویر خود را با لیزی بارگذاری می‌کنید، PageSpeed ​​Insights  نتایج خوبی را نشان می دهند.

1. داده های کمتری توسط سرور یا CDN ارائه می شود

سرور یا CDN باید داده های کمتری را دانلود کند و در نتیجه هزینه کمتری برای شما خواهد داشت.

1. ذخیره داده و پهنای باند (مخصوصاً از طریق تلفن همراه)

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

لیزی لود با جاوا اسکریپت

Lazy load توسط سرور قابل کنترل نیست، زیرا سرور نمی‌داند کدام ناحیه از صفحه در حال حاضر در مرورگر بازدیدکننده قابل مشاهده است و کدام قسمت نیست. بنابراین این روش همیشه نیاز به اجرای کد جاوا اسکریپت در مرورگر دارد.

قالب‌های بی شماری برای جاوا اسکریپت برای ایجاد لیزی لود وجود دارد که می‌توانند به راحتی در وب سایت شما استفاده شوند. می‌توانید از اسکریپت LazyLoad استفاده کنید که یک راه حل  بدون jQuery است. این اسکریپت 2.4 کیلوبایتی علاوه بر اینکه می‌تواند لیزی لود را برای تصاویر، ویدئو و iFrames تنظیم کند، از تصاویر واکنش‌گرا نیز پشتیبانی می‌کند.

 به عنوان جایگزینی برای LazyLoad، می‌توانید از اسکریپت Lazy Load Remastered استفاده کنید. تفاوت آن با LazyLoad در این است که از jQuery استفاده می‌کند و افکت‌های خوبی مانند تکنیک blur ارائه می‌دهد. همچنین می‌توانید از افزونه‌های مانند WP Rocket استفاده کنید تا با استفاده از سایر ویژگی‌های قدرتمند این افزونه، علاوه بر لیزی لود، سرعت سایت خود را با چند کلیک افزایش دهید.

چه زمانی باید از lazy load تصویر استفاده کرد؟

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

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

به منظور بهبود طراحی تصاویر در وب سایت خود، lazy load می‌تواند اقدام مناسبی برای کاهش زمان بارگذاری باشد. ظاهراً با استفاده از این روش نمی‌توان رتبه خود را به طور غیرمستقیم بهبود بخشید، اما از آنجا که لیزی لود تأثیر مثبتی بر سرعت کلی صفحه دارد، به خوبی می‌توان آن را به عنوان یک عامل رتبه‌ بندی غیر مستقیم طبقه‌ بندی کرد. علاوه بر این، بارگذاری یک اسکریپت بزرگ می‌تواند باعث ایجاد مشکلاتی در هنگام ساخت وب سایت شود. و همه کاربران با Lazy Load راحت نیستند، این قضیه می‌تواند منجر به روش کاهش نرخ پرش شود که دقیقا برعکس عمل می‌کند.

توصیه برای انجام lazy load

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

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

برگرفته از : wp-rocket.me