راهنمای کامل Lazy loading | بارگذاری تنبل چگونه باعث افزایش سرعت سایت می‌شود؟

Lazy loading یک استراتژی برای شناسایی منابع به عنوان منابع غیر بحرانی و بارگذاری آنها تنها در صورت نیاز است. Lazy loading تکنیکی برای کوتاه کردن طول مسیر رندر است، که به کاهش زمان بارگذاری صفحه تبدیل می شود. بارگذاری تنبل می تواند در لحظات مختلف برنامه اتفاق بیفتد. معمولاً در برخی از تعاملات کاربر مانند پیمایش و ناوبری اتفاق می افتد.
با تکامل سایت و شبکه اطلاعات، شاهد افزایش عظیمی در تعداد و اندازه دارایی های ارسال شده به کاربران هستیم. بین سال‌های 2011 و 2019، میانگین وزن منابع از 100 کیلوبایت به 400 کیلوبایت برای دسکتاپ و 50 کیلوبایت به 350 کیلوبایت برای موبایل افزایش یافته است. در حالی که اندازه تصویر از ~250KB به ~900KB در دسکتاپ و ~100KB به ~850KB در موبایل افزایش یافته است.

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

اصولا صفحه ایی که Lazy loading باشد، به صورت زیر عمل می‌کند.

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

چرا تصاویر یا ویدیوها به جای بارگیری معمولی با تنبلی بارگذاری می شوند؟

زیرا ممکن است در حال بارگیری مواردی باشید که کاربر هرگز آن را نبیند. این به چند دلیل مشکل ساز است.

بارگیری معمولی داده ها را هدر می دهد. در برنامه‌های داده محدود، بارگذاری مواردی که کاربر هرگز نمی‌بیند، می‌تواند به طور موثر پول و منابع را هدر دهد.

زمان پردازش، باتری و سایر منابع سیستم را هدر می دهد. پس از دانلود یک منبع رسانه ای، مرورگر باید آن را رمزگشایی کرده و محتوای آن را در viewport نمایش دهد.

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

پیاده سازی Lazy loading

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

امروزه تصاویر برای هر وب سایت و برنامه ای حیاتی هستند. چه بنرهای بازاریابی، چه تصاویر محصول یا لوگوها. تصور یک وب سایت بدون تصاویر غیرممکن است. با این حال، تصاویر اندازه بزرگی دارند و بیشترین حجم سایت را تصاویر می‌گیرند. طبق آخرین داده های بایگانی HTTPS، اندازه متوسط ​​صفحه در دسکتاپ ها 1511 کیلوبایت است. تصاویر تقریباً 650 کیلوبایت از آن اندازه را تشکیل می دهند که تقریباً 45٪ از حجم کل صفحه را شامل می‌شود. اکنون، از آنجایی که نمی‌توانیم تصاویر را حذف کنیم، باید صفحات وب خود را سریع تر با آنها بارگذاری کنیم.

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

ساخت سایت

همانطور که کاربر صفحه را به پایین اسکرول می کند، مکان نگهدارنده های تصویر شروع به ورود به viewport (بخش قابل مشاهده از صفحه وب) می کنند. هنگامی که این تصاویر قابل مشاهده می شوند، بار را برای آنها فعال می کنیم. با استفاده از ابزار حسابرسی Google Lighthouse می توانید بفهمید کدام تصاویر کاندید بارگذاری تنبل هستند و چند بایت می توانید در بارگذاری اولیه صفحه ذخیره کنید. ممیزی انجام شده توسط این ابزار دارای بخشی است که برای تصاویر خارج از صفحه اختصاص داده شده است. همچنین می‌توانید از تحلیلگر وب‌سایت ImageKit برای تشخیص اینکه آیا وب‌سایت شما از بارگذاری تنبل استفاده می‌کند یا خیر، استفاده کنید.

بارگذاری تنبل نه تنها برای عملکرد خوب، بلکه برای ارائه یک تجربه کاربری خوب نیز ضروری است.

سئو سایت

Image Lazy Loading چیست؟

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

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

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

Lazy Loading دو مزیت اصلی دارد.

1. بهبود عملکرد سایت

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

2. کاهش هزینه برای صاحب سایت و کاربر

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

تکنیک های بارگذاری تنبل برای تصاویر

تصاویر موجود در یک صفحه وب را می توان به دو روش بارگذاری کرد. با استفاده از تگ <img> یا با استفاده از ویژگی «پس‌زمینه» CSS. اجازه دهید ابتدا به تگ <img> که رایج تر است نگاه کنیم و سپس به تصاویر پس‌ زمینه CSS برویم.

مفهوم کلی Lazy loading تصاویر در تگ <img>

تصاویر بارگذاری تنبل را می توان به دو مرحله تقسیم کرد.

مرحله اول جلوگیری از بارگذاری تصویر از قسمت جلویی سایت است. برای تصاویری که با استفاده از تگ <img> بارگذاری می شوند، مرورگر از ویژگی src تگ، برای شروع بارگذاری تصویر استفاده می کند. صرف نظر از اینکه این اولین یا هزارمین تصویر در HTML شما باشد یا حتی عکس های خارج از صفحه، اگر مرورگر ویژگی src را دریافت کند، بارگذاری تصویر را آغاز می کند. بنابراین، برای لود کردن اینگونه تصاویر، URL تصویر را در ویژگی دیگری غیر از src قرار دهید. فرض کنید URL تصویر را در ویژگی data-src تگ تصویر مشخص می کنیم. اکنون که src خالی است، مرورگر بارگذاری تصویر را شروع نمی کند.

<img data-src=”https://ik.imagekit.io/demo/default-image.jpg” />
اکنون که بارگذاری اولیه را متوقف کرده ایم، باید به مرورگر بگوییم چه زمانی تصویر را بارگذاری کند.

برای این کار، باید بررسی کنیم، به محض اینکه تصویر (یعنی مکان نگهدار آن) وارد viewport شد، بارگذاری را فعال کنیم. و برای بررسی اینکه چه زمانی یک تصویر وارد ویوپورت می شود، دو راه وجود دارد.

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

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

هنگامی که هر یک از این رویدادها رخ می دهد، تمام تصاویری را در صفحه می یابیم که باید لود شوند و هنوز بارگذاری نشده اند. از این تصاویر، بررسی می کنیم که کدام یک در حال حاضر در ویوپورت هستند. این کار با استفاده از افست بالای تصویر، صفحه اسکرول سند فعلی و ارتفاع پنجره انجام می شود. اگر وارد viewport شده باشد، URL را از ویژگی data-src انتخاب کرده و در ویژگی src قرار می دهیم. این کار باعث بارگذاری تصویر می شود.

اگر متوجه شده باشید، تصاویر موجود در ابتدای سایت در جلو بارگذاری می شوند. URL به جای ویژگی data-src مستقیماً در ویژگی src وجود دارد. این برای یک تجربه کاربری خوب ضروری است. از آنجایی که این تصاویر در بالای صفحه قرار دارند، باید در اسرع وقت قابل مشاهده باشند. ما نباید منتظر یک رویداد یا اجرای JS باشیم تا آنها را بارگذاری کنیم.

2. استفاده از Intersection Observer API برای راه اندازی بارگذاری تصویر

Intersection Observer API یک API نسبتاً جدید در مرورگرها است. تشخیص زمانی که یک عنصر وارد viewport می شود و بارگیری سریع آن. در روش قبلی، ما باید رویدادها را پیوند می‌دادیم، عملکرد را در نظر می‌گرفتیم و روشی را برای محاسبه اینکه آیا عنصر در ویوپورت بود یا خیر، پیاده‌سازی می‌کردیم. Intersection Observer API این عملیات را بسیار ساده می کند. باعث کمتر شدن سر و کار ما با ریاضیات می‌شود و عملکردی عالی ارائه می دهد.

نمونه ای از استفاده از Intersection Observer API برای بارگذاری تنبل تصاویر:

ناظر را روی تمام تصاویر وصل می کنیم تا لود شوند. هنگامی که API تشخیص داد که عنصر وارد viewport شده است، با استفاده از ویژگی isIntersecting ،URL را از ویژگی data-src انتخاب می کنیم و آن را به ویژگی src منتقل می کنیم تا مرورگر بارگذاری تصویر را فعال کند. پس از انجام این کار، کلاس lazy را از تصویر حذف می کنیم و همچنین مشاهده گر را از آن تصویر پاک می‌کنیم.

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

بارگیری تنبل بومی

Google در جدیدترین به‌روزرسانی خود، پشتیبانی از بارگیری تنبل بومی را در آخرین نسخه مرورگر Chrome – Chrome 76 اضافه کرده است. همه مرورگرهای مبتنی بر Chromium، یعنی Chrome، Edge، و Safari و Firefox. می توانید جزئیات بیشتری در مورد پشتیبانی مرورگر برای بارگیری تنبل بومی در caniuse.com بیابید.

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

بنابراین کد اکنون شبیه به:

<img src=”example.jpg” loading=”lazy” alt=”…” />
<iframe src=”example.html” loading=”lazy”></iframe>

مقادیر زیر توسط ویژگی lazy loading پشتیبانی می شوند.

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

Lazy loading تصاویر پس زمینه CSS

پس از تگ‌های <img />، تصاویر پس‌ زمینه رایج‌ ترین راه برای بارگذاری تصاویر در یک صفحه وب هستند. برای تگ های <img />، مرورگر یک رویکرد بسیار ساده دارد. اگر URL تصویر در دسترس است، بیایید تصویر را بارگذاری کنیم. تصاویر پس‌ زمینه CSS کار چندان ساده‌ای نیست. برای بارگذاری تصاویر پس‌ زمینه CSS، مرورگر باید درخت DOM (مدل شیء سند) و همچنین درخت CSSOM (CSS Object Model) را بسازد تا تصمیم بگیرد که آیا سبک CSS برای یک گره DOM در سند فعلی اعمال می‌شود یا خیر.

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

در اینجا یک مثال کاری وجود دارد که Lazy loading یک تصویر پس زمینه CSS را بارگذاری می کند.

نکته ای که در اینجا باید به آن توجه کرد این است که کد جاوا اسکریپت برای بارگذاری تنبل هنوز یکسان است. ما از متد Intersection Observer API با یک بازگشت به شنوندگان رویداد استفاده می کنیم. این ترفند در CSS نهفته است.

عنصر با شناسه bg-image دارای یک تصویر پس زمینه است که در CSS مشخص شده است. با این حال، وقتی کلاس lazy به این عنصر اضافه می‌شود، در CSS ویژگی background-image را لغو می‌کنیم و آن را روی none تنظیم می‌کنیم. از آنجایی که قانون، ترکیب #bg-image با کلاس lazy اولویت بیشتری در CSS نسبت به #bg-image دارد، مرورگر ویژگی background-image: none را در ابتدا به عنصر اعمال می کند. وقتی به پایین اسکرول می‌کنیم، Intersection Observer (یا شنوندگان رویداد) تشخیص می‌دهد که تصویر در ویوپورت است و کلاس تنبل را حذف می‌کند. این CSS قابل اجرا را تغییر می‌دهد و ویژگی پس‌ زمینه – تصویر واقعی را به عنصری که بار تصویر پس‌ زمینه را راه‌ اندازی می‌کند، اعمال می‌کند.

تجربه کاربری بهتر با بارگذاری تنبل تصاویر

بارگذاری تنبل یک مزیت عالی دارد. برای یک شرکت تجارت الکترونیکی که صدها تصویر محصول را در یک صفحه بارگذاری می کند، بارگذاری تنبل می تواند در زمان بارگذاری اولیه صفحه بهبود قابل توجهی داشته باشد و در عین حال مصرف پهنای باند را کاهش دهد. همچنین سرعت سایت را! با این حال، بسیاری از شرکت‌ها بارگذاری تنبل را انتخاب نمی‌کنند. زیرا معتقدند که این کار با ارائه یک تجربه کاربری عالی با ذکر دلایلی مانند “موقعیت مکان اولیه مناسب نیست” یا “زمان بارگذاری کند است” و غیره مخالف هستند. این بهانه ها شامل:

• افزایش CLS
• افزایش زمان برای دانلود تصاویر و کاهش رضایت کاربری
• تغییر محتوا با بارگذاری تنبل و افزایش CLS

چگونه می توانیم چنین نگرانی هایی را در مورد تجربه کاربر با lazy loading تصاویر حل کنیم؟

1. استفاده از مکان‌ نما های مناسب تصویر

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

نگاهی به چند نمونه از متغیرهای بهتر برای تصاویر:

الف) مکان رنگ غالب

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

دستیابی به این ویژگی ممکن است پیچیده به نظر برسد، اما یک راه بسیار ساده برای انجام این کار این است که ابتدا تصویر را به یک پیکسل 1×1 کوچک کنید و سپس آن را به اندازه مکان نگهدار بزرگ کنید. یک تقریب بسیار خشن، اما ساده و بدون دردسر. راهی برای بدست آوردن یک رنگ غالب.

ب) مکان‌دار تصویر با کیفیت پایین (LQIP)

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

این تکنیک توسط افرادی مانند Facebook و Medium.com برای تصاویر موجود در وب سایت ها و برنامه های خود استفاده شده است.

ساخت سایت

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

اضافه کردن مقداری زمان بافر برای بارگذاری تصویر

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

مشکل بارگذاری تنبل

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

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

راه حل lazy loading

به‌جای بارگیری تصویر درست زمانی که دقیقاً وارد Viewport می‌شوند، تصاویر را زمانی بارگذاری کنید که مثلاً 500 پیکسل از ورود به ویوپورت فاصله دارند. این زمان بیشتری را بین ماشه بارگذاری و ورودی واقعی در viewport برای بارگذاری تصاویر فراهم می کند.

با Intersection Observer API، می‌توانید از پارامتر «root» به همراه پارامتر «rootMargin» استفاده کنید. این ویژگی ها به عنوان قانون حاشیه استاندارد CSS عمل می‌کند، تا کادر محدود مؤثری را که برای یافتن «تقاطع» در نظر گرفته می‌شود را افزایش دهید.

با روش شنونده رویداد، به جای اینکه تفاوت بین لبه تصویر و لبه دید را 0 بررسی کنیم، می‌توانیم از یک عدد مثبت برای اضافه کردن مقدار آستانه استفاده کنیم.

ساخت سایت

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

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

اجتناب از تغییر محتوا با Lazy loading

این یکی دیگر از نکات بی اهمیت است که در صورت حل شدن، می تواند به حفظ یک تجربه کاربری خوب کمک کند. وقتی تصویری وجود ندارد، مرورگر از ابعاد محتوایی که قرار است در محفظه محصور نمایش داده شود، اطلاعی ندارد. و اگر آن را با استفاده از CSS مشخص نکنیم، ظرف محصور هیچ ابعادی ندارد، یعنی 0*0 پیکسل. بنابراین، هنگامی که تصویر بارگذاری می شود، مرورگر اندازه محفظه دربرگیرنده را برای تناسب با تصویر تغییر می دهد. این تغییر ناگهانی در چیدمان باعث جابجایی عناصر دیگر می شود و به آن تغییر محتوا می گویند.

راه حل تغییر محتوا در بارگذاری تنبل

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

تنبلی نکنید! همه تصاویر را تنبل بارگذاری نکنید

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

در اینجا چند اصل کلی وجود دارد که باید رعایت کنید تا تشخیص دهید کدام تصاویر باید با تنبلی بارگذاری شوند.

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

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

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

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

وابستگی Lazy loading به جاوا اسکریپت

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

می توانید به آنها پیامی نشان دهید که به آنها بگوید چرا تصاویر بارگیری نمی شوند و باید به یک مرورگر مدرن سوئیچ کنند یا جاوا اسکریپت را فعال کنند. یا می توانید از تگ noscript برای ایجاد یک تجربه قابل استفاده برای این کاربران نیز استفاده کنید. استفاده از رویکرد تگ <noscript> برای چنین کاربرانی دارای اشکالاتی است.

چگونه آزمایش کنیم که بفهمیم lazy loading کار می‌کند یا نه؟

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

به Tab Network > Images بروید.

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

راه دیگر این است که پس از اعمال تغییرات، گزارش حسابرسی Google Chrome Lighthouse را در صفحه خود اجرا کنید و در بخش «تصاویر خارج از صفحه» به دنبال پیشنهادها بگردید.

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