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

لود تنبل یا Lazy Loading به چه معناست؟Reviewed by نسترن خیرمند on Oct 19Rating: 5.0

اهمیت لود تنبل یا Lazy Loading چیست؟

صفحات هر سایت از مطالب و محتوا به صورت متن، تصویر و ویدئو تشکیل شده است. به طور کلی حجم کل صفحات به طور میانگین ۳۳۷۶ کیلو بایت می باشد. این حجم از صفحات حدودا ۷۰ درصد از کدهای HTTP Archive را به خود اختصاص می دهد. مرورگرها برای باز کردن این حجم صفحات نیاز به قدرت بالایی برای دانلود دارد. حجم صفحات با اضافه کردن تصاویر، مقالات و ویدئوهای جدید نیز افزایش می یابد و به همین دلیل باعث کاهش سرعت لود شدن سایت و در نهایت کاهش رتبه سایت خواهد شد. درست در این جا استفاده از تکنیک لود تنبل اهمیت پیدا می کند.

طبق تحقیقاتی که در سال ۲۰۱۶ انجام شده است، کمپانی گوگل اعلام کرده سایت هایی که سرعت لود شدن آن ها بیشتر از ۳ ثانیه طول بکشد، ۵۳ درصد از کاربران خود را از دست می دهند.

برای مثال سایت هایی وجود دارد که با بهینه سازی سرعت سایت توانسته اند تا میزان قابل توجهی رضایت کاربران را جلب کرده و باعث افزایش ترافیک سایت خود شوند. از جمله سایت Pinterest. این سایت توانسته با افزایش سرعت بارگذاری سایت تا ۴۰ درصد، ترافیک و ورودی سایت را تا ۱۵ درصد افزایش دهد. اطلاعات و آماری که در مورد سایت خبرگذاری BBC به دست آمده نشان می دهد این سایت به دلیل تاخیر یک ثانیه در بارگذاری سایت تا حدود ۱۰ درصد از کاربران و دنبال کنندگان خود را از دست داده است. حتی طبق یکی از آمار و تحقیقاتی که کمپانی گوگل اعلام کرده یک وب سایت فروشگاهی معروف به نام Home Deopt که لوازم خانه و ابزار آلات می فروشد، با افزایش سرعت بارگذاری سایت توانسته که در آمد سالانه اش را تا ۷۶۳ دلار افزایش دهد.

این آمار به طور کلی تکیه بر اهمیت افزایش سرعت سایت دارد.

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

تصور کنید زمانی که آدرس سایت را در قسمت Address bar وارد می کنید، کلیک می کنید و منتظر می شوید که صفحه اصلی سایت نمایش داده شود. چشم انداز اولیه سایت اطلاعات و مطالبی است که در اولین نگاه در سایت ظاهر می شود. این اطلاعات شامل HTML، CSS، javascript و عکس های اصلی است. این اطلاعات سعی دارند تا به صورت همزمان و سریع بارگذاری و لود شود تا سریع توسط کاربر دیده شود. زمان بارگذاری بقیه اطلاعاتی که بعد از اسکرول کردن دیده می شود را می توان در مقایسه با چشم انداز اولیه بیشتر کرد تا منابع و اطلاعات اولیه سریع تر بارگذاری و دیده شود. همین تاخیر و برنامه ریزی برای به تعویق انداختن منابعی که بعد از اسکرول کردن دیده می شود، کمک می کند تا کاربران بیشتری را در سایت نگه دارید و نرخ پرش سایت (بانس ریت) را تا حد زیادی کاهش دهید.

لود تنبل یا lazy loading

تصاویر و حجم قابل توجه آن ها

شاید ندانید اما تصاویر سایت تا حدود ۶۵ درصد از حجم کل سایت را به خود اختصاص می دهند و همین عدد تاثیر به سزایی در کاهش سرعت سایت دارد. کاهش سرعت سایت حتی در صورتی که تصاویر را بهینه و فشرده کرده باشید هم می تواند تا میزان قابل توجهی سرعت سایت را کاهش دهد. رفته رفته این کاهش زمان بارگذاری از دست دادن کاربران و کاهش رشد و حتی توقف رشد سایت و احتمالا کاهش فروش سایت را به همراه دارد. کاربران به دنبال سایتی هستند که سریعا اطلاعات، محصولات و نیازی که به دنبالش هستند را مشاهده کنند. اگر کاربر مجبور شود زمان بیشتری را صبر کند و منتظر شود که سایت لود شود طبیعی است که مرورگر را می بندد و سراغ سایت دیگری می روند. این اتفاق برای سایت های فروشگاهی فاجعه است!

تعریف مفهوم کلی تکنیک Lazy Loading

Lazy loading در معنای عام یعنی بارگذاری غیر همگام. به این معنا که تصاویر به صورت غیر همگام در مقایسه سایر محتواهای دیگر سایت با سرعت کمتری بارگذاری می شود. همان طور که در قسمت بالا گفته شد یعنی اول قسمت اولیه سایت به طور کامل بارگذاری و لود شود و سپس مرورگر تصاویر سایت را لود و دانلود کند.

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

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

آن چه از ابتدای مقاله تاکنون گفتیم دلیل بر اهمیت استفاده از lazy loading دارد. از جمله مزایای استفاده از تکنیک لود تنبل عبارتست از:

  • کاهش استفاده از پهنای باند: بسیاری از کاربران با یک نگاه اجمالی به ابتدای صفحه اصلی مطالبی که به دنبال آن هستند، نیازی ندارند که تا انتهای صفحه را اسکرول کنند و ببینند. در صورتی که از این تکنیک استفاده نکنید حتی در صورتی که کاربر اسکرول نکند همه تصاویر لود و دانلود می شوند که همین اتفاق باعث استفاده بیشتری از حجم پهنای باند می شود. در صورت پیاده سازی تکنیک lazy loading هم پهنای باند کمتری استفاده می شود، هم اتلاف هزینه ندارید و هم به دلیل آزاد بودن حجم بیشتری از پهنای باند سرعت بارگذاری سایت افزایش پیدا می کند.
  • کاهش زمان بارگذاری سایت: پیاده سازی این تکنیک کمک می کند تا محتوای اولیه صفحه اصلی سایت سریع تر بارگذاری و دیده شود. (به ویژه در سایت هایی که یا عکس ندارند تا تصاویر کمتری دارند.)
  • به تعویق انداختن جاوا اسکریپت ها: برخی از سایت ها از جاوا اسکریپت برای بارگذاری محتوا استفاده می کنند. این سایت ها از DOM استفاده می کنند که این کار باعث توقف تا بارگذاری کامل DOM می شود. در صورتی که تصاویر زیادی در سایت داشته باشید بارگذاری اسکریپت ها تا اجرای کامل تصاویر به تعویق خواهد افتاد.

روش های پیاده سازی تکنیک Lazy loading

در ادامه سایر روش های پیاده سازی تکنیک لود تنبل که توسط برنامه نویسان و طراحان زیادی استفاده می شود را معرفی می کنیم. شما نیز می توانید با توجه به نوع سایت و کاربرد مورد نظرتان تکنیک لود تنبل را پیاده سازی کنید.

روش رابین آزبورن (Robin Ozborne)

این روش لود تنبل توسط یک برنامه نویس به نام خانم آزبورن استفاده شد و “پیشرفت تدریجی” نامیده شد. در این روش به جای استفاده از کدهای HTML و CSS از کدهای جاوا اسکریپت برای بارگذاری تصاویر استفاده می شود. منظور از پیشرفت مرحله ای این است که اگر از روشی که وابسته به جاوا اسکریپت باشد، استفاده می کنید؛ در صورتی که جاوا اسکریپت به هر دلیلی کار نکند باعث می شود که هیچ کدام از تصاویر سایت نمایش داده نشود. اما در روش رابین آزبورن حتی در صورتی که جاوا از کار بیافتد، باز هم عکس ها به مخاطبین نمایش داده می شود. برای پیاده سازی این روش بهتر است از ساختار موجود در این لینک https://codepen.io/rposbo/pen/ONmgVG استفاده کنید.

استفاده از این روش مزایای زیر را به همراه دارد:

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

استفاده از روش David Walsh

در این روش که توسط آقای والش پیشنهاد شد، زمان لود تصاویر به جای استفاده از scr در کدنویسی HTML از ویژگی data- scr استفاده کنید.

این ویژگی در وهله اول در کدنویسی های CSS مخفی است ولی زمانی که کد زیر اضافه شود در انتقال نرم CSS نشان داده می شود.

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

نصب و استفاده از افزونه js

این پلاگین در مقایسه با پلاگین های دیگر برای لود تصاویر تقریبا سبک بوده و برای مستقل شدن جاوا اسکریپت از آن استفاده می شود. پیاده سازی و استفاده از این روش بسیار آسان است. یک مثال از بارگذاری:

استفاده از این روش مستلزم تغییر تگ img به صورت زیر است:

  • افزونه js را نصب و لود کنید.
  • کلاس lazy را اضافه کنید.
  • یک عکس به دلخواه انتخاب کرده و به عنوان place holder به جای ویژگی scr استفاده کنید.
  • در جاوا اسکریپت افزونه blazy را فراخوانی کرده و تغییرات را به صورت زیر اعمال کنید:

نصب افزونه lazy load xt

استفاده از این تکنیک بسیار ساده و سریع است. برای این کار این پلاگین را در جی کوئری لود کرده و سپس در سورس کد اضافه و بارگذاری کنید. از آن جا سایت ها هم عکس و هم فیلم در سایت ها منتشر می کنند این پلاگین در دو نسخه در اختیار کاربران قرار گرفته است. برای اجرای لود تنبل برای تصاویر از نسخه jquery.lazyloadxt.js استفاده کنید؛ و برای اجرای lazy loading فیلم ها از نسخه jquery.lazyloadxt.extra.js. نمونه بارگذاری نصب شده این افزونه به صورت زیر است:

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

و حتی اگر از جی کوئری استفاده نمی کنید، این افزونه یک نسخه دیگر به نام https://github.com/ressio/lazy-load-xt#jqlight دارد که نمونه بارگذاری آن به صورت زیر است:

پس از این که این افزونه را نصب کردید، تصاویر را به جای src با ویژگی data-src اضافه کنید.

از جمله مزایای نصب و استفاده از افزونه lazy loadxt به شرح زیر است:

  • قابلیت پشتیبانی از https://github.com/ressio/lazy-load-xt#bootstrap-and-jquerymobile
  • در صورتی که برای تصاویر خود کد lazyloadxt.spinner.css را اضافه کنید، زمان لود شدن تصاویر یک نشانه دایره مانند به علامت loading به کاربر نمایش داده می شود.
  • این افزونه از مرورگرهای opera mini و IE6 و IE11 پشتیبانی می کند.
  • با نصب این افزونه به جای بارگذاری روی سرور خودتان می توانید از CDN استفاده کنید.

استفاده از تکنیک بلوری در lazy loading

قبل از توضیح در مورد این روش سایت https://medium.com/ را ببینید. تصاویر موجود در این سایت قبل از کامل لود شدن به صورت تار و بلوری نمایش داده می شود. برای پیاده سازی این تکنیک از سورس کد موجود در صفحه گیت هاب را دانلود و استفاده کنید. (https://github.com/craigbuckler/progressive-image.js)

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

  • در حالت minify فقط ۴۶۳ بایت از CSS و ۱۰۰۷ بایت از جاوا اسکریپت را اشغال می کند.
  • از صفحات Retina که رزولوشن بسیار بالایی دارد پشتیبانی می کند.
  • بر اساس تکنیک پیشرفت تدریجی رابین آزبورن پیاده سازی شده و مزایای آن روش را هم دارد.
  • برای اجرا به پلاگین خاصی نیاز ندارد.

سخن پایانی

آن چه در مورد استفاده از تکنیک لود تنبل یا lazy loading گفته شد، صرفا جهت استفاده بهینه از پهنای باند سایت و پیاده سازی آسان آن در سایت های مختلف است. در صورتی که برای پیاده سازی این تکنیک در سایت های وردپرسی قصد دارید که از افزونه های معرفی شده استفاده کنید، پیشنهاد می کنم توجه کنید که پلاگین ها و فریم ورک ها دارای قسمت های documentation ،installation یا usage هستند که روش کار با آن ها در آن نوشته شده است. این منابع به صورت سورس کد (منبع باز) نوشته شده و متعلق به کمپانی خاصی نیستند. به همین دلیل زمان پیاده سازی و استفاده از آن ها ممکن است سردرگم شوید چون شاید از همه استانداردها پیروی نکنند.