افزایش سرعت باز شدن صفحات سایت از طریق بارگذاری ناهمگام تصاویر

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

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

برای استفاده از روش lazy loading پلاگینهای رایگان زیادی وجود داره که کافیه فقط همین کلیدواژه رو سرچ کنید تا به صدها کد رایگان دسترسی داشته باشید. اما به شخصه پلاگین 6 کیلوبایتی زیر رو معرفی میکنم که بصورت بهینه ای از قابلیت جدیدی که توی مرورگرها داره تست میشه به نام Intersection Observer استفاده میکنه و عکسها رو بسیار بسیار سریع لود میکنه همزمان با اسکرول کاربرها.

لینک پلاگین:

https://appelsiini.net/projects/lazyload/

البته این تکنیک از اونجایی که جدید هست قبلش حتما جدول پشتیبانی مرورگرها رو از این قابلیت چک کنید چون باید واقعا مرورگر کاربرها نسخه های بروزی باشن وگرنه کار نخواهد کرد.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility

یه پلاگین سبک دیگه که از نسخه های بیشتری از مرورگرها پشتیبانی میکنه:

https://github.com/ApoorvSaxena/lozad.js

نکته آخر: توی پلاگین بالا من با کد جی کوئری که توی داکیومنتش وجود داره نتونستم این رو پیاده سازی کنم و از کدهای جاوا اسکریپتی که داشت استفاده کردم.

دموی پلاگین: http://atarix.ir/suggest-game