سرعت وب سایت یکی از مهم‌ترین مسائل در توسعه وب است که اگر به آن توجه نکنیم با مشکلات زیادی مواجه خواهیم شد. یکی از این مشکلات این داستان این است که اگر وب سایت ما کند باشد، کاربر به سرعت سایت را ترک می‌کند و دنبال منابع جایگزین خواهد گشت که این موضوع به شدت حیاتی است چرا که اگر وب سایت شما فروشگاهی باشد، ضرر و زیان بسیاری را متحمل خواهید شد.
حالا این سرعت کم سایت چه دلایلی دارد؟ سرعت سایت دلایل متعددی دارد که من در زیر چند تا از آنها را برای شما بیان می‌کنم.
- هاست نامناسب
- استاندارد نبودن کدها
- تعداد زیاد عکس‌ها در صفحه
- متناسب نبودن سایز عکس‌ها
- تغییر سایز عکس‌ها از طریق کدنویسی
- استفاده نکردن از کش
- و ...
هر کدام از این مسائل داستان خاص خود را دارند و می‌شود در رابطه با آن زیاد صحبت کرد اما اگر بخواهم یکی از مسائلی که بسیار به چشم می‌خورد را برای شما بگویم، بحث زیاد بودن تعداد عکس‌ها در یک صفحه است یا اگر بخواهم بیشتر از این مدل مثال بزنم بحث کامنت‌های زیاد در زیر یک مقاله یا پست یا هر چیز دیگری است.
بگذارید یک مثال واضح برای شما بیاورم، همه شمایی که این مقاله را می‌خوانید با اینستاگرام آشنایی دارید و حتما در زیر یک پست کامنتی گذاشته‌اید. اگر سعی در خواندن همه کامنت‌های یک پست داشته‌اید می‌دانید که در ابتدای کار همه کامنت‌ها برای شما لود نمی‌شود، ولی هر چقدر به پایین صفحه اسکرول می‌کنید کامنت‌های بیشتری برای شما لود می‌شود.
بیشتر بدانیم : تست سرعت وب سایت
خب، بیایید بررسی کنیم که چرا اینستاگرام این داستان را پیاده سازی کرده است. فرض کنید یک پیج بازدید میلیونی دارد و یک پست حداقل ۱ میلیون بازدید می‌گیرد. در یک پست با بازدید میلیونی حداقل بالای ۱۰۰۰ کامنت وجود خواهد داشت. اگر کل ۱۰۰۰ کامنت با هم لود شوند، فاجعه برای لود کامنت‌ها پیش خواهد آمد. پس این راه کار را برای این داستان پیاده سازی کرده است. اسم این تکنولوژی Lazy Loading است.
lazy loading (لیزی لود) چیست؟
بارگذاری تنبل (Lazy Loading - لیزی لود) تکنیکی است برای انتظار برای بارگیری قسمت های خاصی از یک صفحه وب به ویژه تصاویر تا زمانی که نیاز باشد. مرورگر به جای بارگیری همه چیز به یکباره، که به عنوان بارگیری اشتیاقی(eager) شناخته می شود، همه منابع را درخواست نمی کند تا زمانی که کاربر به گونه ای تعامل کند که آن منابع مورد نیاز باشد. وقتی به درستی این داستان اجرا شود، بارگذاری تنبل می‌تواند زمان بارگذاری صفحه را افزایش دهد.
این نوع بارگذاری تنبل(Lazy) نام دارد زیرا برای بارگذاری منابع مرورگر را تشویق به تعویق انداختن می‌کند. هنگام نمایش یک صفحه وب در حال بارگذاری تنبل یا lazy load ، یک مرورگر اساسا می گوید: "برای بارگیری این تصاویر تا زمانی که واقعاً نیاز داشته باشم صبر می کنم". هنگام نمایش یک صفحه وب در حال بارگذاری اشتیاقی، یک مرورگر نگرش مخالف را اتخاذ می کند و می‌گوید که من فورا همه چیز را بارگیری می‌کنم. در حالی که اهمال کاری گاهی در دنیای واقعی دارای مفاهیم منفی است، در این مورد اغلب کارآمدتر است.
به عنوان مثال، یک پست وبلاگ ممکن است یک تصویر در بالای صفحه و یک نمودار نزدیک به پایین داشته باشد. شخصی که پست وبلاگ را می خواند ممکن است برای چند دقیقه به انتهای متن نرسد، بنابراین مرورگر منتظر می ماند تا تا کاربر به آن بخش پیمایش کند بعد نمودار بارگیری شود. به این ترتیب، در ابتدا صفحه سریعتر بارگذاری می شود، زیرا مرورگر به جای دو تصویر، یک تصویر را بارگذاری می کند.
بیشتر بدانیم : آموزش لاراول (laravel) جامع و پروژه محور ساخت فروشگاه اینترنتی
بارگذاری تنبل تصاویر یا lazy load چگونه کار می کند؟
navigation کاربر معمولاً چیزی است که باعث بارگذاری تنبل تصاویر می شود. به ویژه، زمانی که کاربر در صفحه ای به پایین اسکرول می کند، به مرورگر می گوید که تصاویری را که در پایین صفحه ظاهر می شوند را بارگذاری کند.
هنگامی که یک صفحه وب بارگیری می شود، بخشی که کاربر می بیند "above the fold" نامیده می شود. در حالی که بخشی که کاربر هنوز نمی بیند "below the fold" نامیده می شود. تصاویری که در بالای صفحه قرار دارند باید فوراً بارگیری شوند، در غیر این صورت تجربه کاربر تحت تأثیر بدی قرار خواهد گرفت. اما کاربر تا زمانی که به پایین اسکرول نکند، تصاویر را که در زیر صفحه هستند را نمی بیند. بنابراین، تصاویر below the fold می توانند از بارگذاری تنبل استفاده کنند.
fold یعنی چه؟ above the fold و below the fold از طرح‌بندی روزنامه‌ها الهام گرفته‌اند. روزنامه‌ها معمولاً به‌صورت افقی از وسط تا می‌شوند، و نیمه جلویی - ناحیه بالای تاشو - همان چیزی است که خواننده ابتدا می‌بیند. هنگامی که این عبارت برای طرح‌بندی وب به کار می‌رود، fold پایین صفحه کاربر است.
نحوه اجرای بارگذاری تنبل (lazy load) برای تصاویر
یکی از راه‌های پیاده‌سازی بارگذاری تنبل، استفاده از ویژگی loading در HTML، در تگ img است. اضافه کردن loading=”lazy”، مانند مثال زیر، به مرورگر می‌گوید که صبر کند تا زمانی که کاربر به آن نزدیک شود و بعد تصویر بارگیری شود:
<img src="example.com/image" alt="example image" width="100" height="100" loading="lazy">
توسعه دهندگان وب همچنین می توانند از فریمورک‌های برنامه نویسی برای پیاده سازی بارگذاری تنبل پیچیده‌تر استفاده کنند. Angular معمولا برای این منظور استفاده می شود. کتابخانه جاوا اسکریپت React نیز از بارگذاری تنبل پشتیبانی می کند.
بیشتر بدانیم : آموزش انگولار
Cloudflare Mirage راه دیگری برای اجرای بارگذاری تنبل است. Mirage علاوه بر تغییر اندازه خودکار تصاویر، به عنوان یک لودر تنبل عمل می کند و فقط تصاویر را در صورت درخواست بارگیری می کند.
چه منابع صفحه دیگری می توانند از بارگذاری تنبل یا lazy load استفاده کنند؟
- JavaScript : جاوا اسکریپت چیزی است که به عنوان یک منبع مسدود کننده رندر شناخته می شود - به این معنی که یک مرورگر نمی تواند صفحه را تا زمانی که کد جاوا اسکریپت بارگیری شود، رندر کند. کد جاوا اسکریپت را می توان به ماژول های کوچکتر تقسیم کرد که در صورت نیاز بارگذاری شوند و زمان بارگذاری صفحاتی را که نیاز به اجرای جاوا اسکریپت دارند کاهش دهد.
- CSS : CSS هم یک منبع مسدود کننده رندر است. تقسیم یک فایل سی اس اس به چندین فایل که فقط در صورت لزوم بارگیری می شوند، می تواند به کاهش مدت زمانی که مرورگر بارگذاری را برای نمایش بقیه صفحه مسدود می شود، کمک کند. فایل‌های CSS غیر مسدود کننده باید پیوند خاص خود را با ویژگی رسانه اضافه کنند تا به مرورگر بگوید چه زمانی آنها را بارگیری کند.
- Iframes : iframes برای جاسازی محتوا از یک منبع خارجی در یک صفحه وب استفاده می‌کند. تگ‌های iframe می‌توانند شامل همان ویژگی loading در HTML باشند که در بالا برای تصاویر توضیح داده شد.
مزایای بارگذاری تنبل یا lazy load چیست؟
- بارگذاری سریعتر صفحه : اگر همه چیز درست طراحی شده باشد، صفحات وب با اندازه فایل های کوچکتر سریعتر بارگیری می شوند. با بارگذاری تنبل، یک صفحه وب به جای بارگذاری کامل، تکه تکه بارگذاری می‌شود و بنابراین سریعتر بارگیری می‌شود. عملکرد سریع وب دارای مزایای متعددی از جمله سئو بهتر، نرخ تبدیل بالاتر و تجربه کاربری بهبود یافته‌تر است.
- بدون نیاز به محتوای غیر ضروری : فرض کنید یک صفحه چندین تصویر بارگیری می‌شود اما کاربر قبل از اسکرول کردن از صفحه خارج می‌شود. در چنین حالتی، پهنای باند مورد استفاده برای ارائه تصاویر و زمان صرف شده مرورگر برای درخواست و ارائه تصاویر اساساً هدر می‌رود. در مقابل، بارگذاری تنبل تضمین می کند که این تصاویر فقط در صورت لزوم بارگیری می شوند. این باعث صرفه جویی در زمان و قدرت پردازش می‌شود و ممکن است باعث صرفه جویی در هزینه صاحب وب سایت شود زیرا از پهنای باند کمتری استفاده می‌شود.
معایب بارگذاری تنبل (lazy load) چیست؟
- کاربران ممکن است منابع را سریعتر از حد انتظار درخواست کنند : به عنوان مثال، اگر کاربر به سرعت یک صفحه را به پایین پیمایش کند، ممکن است مجبور شود منتظر بارگذاری تصاویر بماند. این می‌تواند بر تجربه کاربر تأثیر منفی بگذارد.
- ارتباط اضافی با سرور : به جای درخواست همه محتوای صفحه به طور همزمان، ممکن است مرورگر مجبور شود چندین درخواست را برای محتوا به سرورهای وب سایت ارسال کند، زیرا کاربر با صفحه تعامل دارد. استفاده از یک Content Delivery Network (CDN) این اشکال احتمالی را به حداقل می‌رساند، زیرا تصاویر توسط CDN ذخیره می‌شوند و مرورگر مجبور نیست برای واکشی آنها درخواستی را تا آخر به سرور اصلی ارسال کند.
- کد اضافی برای پردازش مرورگر : اگر یک توسعه دهنده چندین خط جاوا اسکریپت را به یک صفحه وب اضافه کند تا به مرورگر بگوید چگونه منابع صفحه را بارگذاری کند، این به مقدار کدی که مرورگر باید بارگیری و پردازش کند اضافه می کند. اگر به طور ناکارآمد انجام شود، این زمان بارگیری و پردازش جزئی اضافی ممکن است بر زمان صرفه جویی شده توسط بارگذاری تنبل اضافه شود.
