Preload & Lazyload
مقدمه
نداشتن تکنیک Preload & Lazyload چه مشکلی در سایت شما بوجود می آورد؟
که زمانی که کاربران در مرورگر خود ، آدرس وب سایتی را جستجو می‌کنند. ممکن است بارگذاری آن سایت کند پیش رود و موجب نارضایتی آنان شود.برای‌اینکه به موقع وب سایتتان بارگذاری شده و سرعت خوبی داشته باشد ، می‌توانید از یکی از متداول‌ترین تکنیک‌ها استفاده کنید. با ما در این مقاله همراه باشید تا مفهوم lazyload وpreload را به شما آموزش دهیم.
در‌صورتی که بارگذاری و نمایش وب سایت شما بیشتر از3 ثانیه طول بکشد ، در حالت کلی 53 درصد از بازدید‌کنندگان وب‌سایت‌ها ، پنجره‌ی مرورگر خود را بسته و وب سایت را رها می‌کنند. بنابراین شما باید توجه کنید که سرعت سایت خیلی مهم تر از گرافیک سایت هست . سرعت سایت شما ورودی سایت شما هست.
Lazy loading چیست؟
لود تنبل یا لود پله ای ( Lazy loading ) تاثیر بسیار مهمی در بهبود سرعت سایت دارد. این سیستم به گونه ای عمل می کند که صفحه ی شما را بصورت پله ای لود می کند.
فرض کنید شما در یک صفحه ۱۰۰ تا عکس دارید لود هم زمان این ۱۰۰ عکس فاجعه به وجود می آورد . برای درک بهترمثال هایی برایتان آماده کرده ایم.
درمثال زیر ۱۰ عکس اول را لود می کند و مابقی عکس ها حالت محو دارند و با پایین آوردن صفحه ۱۰ تای بعدی و ۱۰ تای بعدی و همین طور ادامه می یابد. با این امکان مشکل کندی سایت برطرف می شود. اپلیکیشن اینستاگرام هم از این امکان استفاده می کند که شما با پایین و بالا آوردن صفحه عکس ها لود می شود.
به قسمتی که در اولین نگاه پس از بارگذاری سایت ظاهر می‌شود (یعنی قسمتی که بالای خط تا است ) چشم انداز اولیه می‌گویند. برای درک بهتر می‌توانید “خطِ‌تا ” را پایینِ صفحه نمایشِ خود در نظر بگیرید که بقیه‌ی محتوای سایت بصورت اسکرول پایین‌تر از آن قرار می‌گیرد. پایین خطِ تا یا “fold the below “ همان قسمتی است که تنها بعد از اسکرول کردن نمایش داده می‌شود.
حالا به تصویر زیر توجه کنید این تصویر منابع لازم برای بارگذاری یک وب‌سایت فرضی را نشان می‌دهد. خط‌چینی که مشاهده می‌کنید نشان دهنده‌ی خطِ تا ( چشم‌انداز اولیه ) در وب سایت فرضی ماست.
همانطور که مشاهده می‌کنید تمامی منابع سعی دارند تا سریعا و بصورت همگام و همزمان بارگذاری شوند اما حقیقت این است که تنها نیازِ ما ، آن قسمتی است که بالای خط تا قرار دارد ( HTML ، CSS ، JavaScript و عکس‌اصلی ) به عبارت دیگر میتوان بارگذاری تمامی منابعی که زیر خط تا هستند را به تعویق انداخت تا منابع اولیه سریعتر بارگذاری شوند و در نتیجه کاربر سریعتر محتوای دیدنی را ببیند تا صبرش را از دست ندهد و به سرنوشت 53 درصدی ( آمار‌گوگل ) مبتلا نشویم.
preLoading چیست؟
برای اینکه یک بار عملیات کش شدن در سرور برای یک سایت اتفاق بیفتد ، نیاز است تا حداقل یک کاربر یک درخواست به‌سرور ارسال‌نماید. بنابراین زمانی که شما کش سایت را فعال می‌کنید ، تا زمانی که اولین بار سرور درخواستی را دریافت نکند ، عملیات کش صورت نمیگیرد. پیش بارگذاری با ارسال یک درخواست اولیه از طریق خود افزونه این‌مشکل را برطرف می‌نماید. بنابراین حتی اگر هیچ بازدیدی از صفحات سایت شما انجام نشود ، باز هم افزونه راکت نسخه کش شده صفحات سایت را برای وردپرس شما ایجاد‌می‌کند. این کار به بهینه‌سازی سرعت سایت‌های وردپرسی کمک بزرگی میکند.
مثل سایت های فروشگاهی کاربر از صفحه محصول بازدید میکند بعد اطلاعات را بررسی میکند. با محصول دیگر مقایسه میکند و به سبد خرید اضافه میکند.
شامل چه مواردی میباشد؟
نقشه سایت
نقشه سایت شما فایلی یا صفحه‌ای است که تمامی آدرس های موجود در یک سایت را شامل می‌شود. عموما با XML مشخص می‌شود.
لینک ها
باعث بهبود سرعت بارگذاری صفحات ، هنگامی که کاربر روی یک لینک قرار می‌گیرد خواهد‌شد. اگر‌کاربر بر روی یک لینک رفته و یا بر روی آن کلیک نماید ، اگر مدت زمان لود شدن آن لینک بیشتر از 100 ms باشد یک نسخه HTML از آن لینک در بک گراند سریعا بارگذاری می‌شود. در نتیجه زمانی که کاربر بخواهد وارد لینک جدید از آن صفحه گردد ، سریعا صفحه برای کاربر نمایش داده خواهد شد.
جدول مقایسه
نتیجه گیری
Lazy load و preload یکی از چندین تکنیک موجود برای افزایش سرعت وب سایت وردپرس شماست.
در واقع عوامل مختلفی از جمله فونت ها ، عکس ها و فایل ها بر روی سرعت سایت تاثیر دارد که میتوان با استفاده از این تکنیک ها سرعت سایت را بهبود داد. و با استفاده از افزونه ها این تکنیک ها را پیاده سازی کرد.
البته باید توجه داشت که این تکنیک ها را باید در مواقع درست بکاربرد چرا که در بعضی مواقع تاثیر عکس دارد و بر کارایی سایت تاثیر منفی میگذارد.
امیدوارم این مقاله بتواند به شما کمک کند و بتوانید نتایج خوبی در این زمینه بگیرید اگر دوستی دارید که این مقاله میتواند به او کمک کند این مقاله را با ایشان به اشتراک بگذارید و همین الان نظر خود را در پایین همین صفحه بخش نظرات برای ما بنویسید تا دیگران از تجربه شما استفاده کنند.
نام نویسنده : آویده مستعان
