بارگذاری تصاویر به سبک Lazy Load یک از روش هایی است که باعث میشود سرعت لود سایت شما به شدت بالا برود.

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

چرا بارگذاری تصاویر به سبک Lazy Load ؟

مطالعه انجام شده توسط Strangeloop نشان داده که تاخیر 1 ثانیه در زمان بارگذاری صفحه میتواند باعث کاهش 7 درصدی در نرخ تبدیل بازدید کننده به مشتری شود،11 درصد بازده صفحات کمتر و در رضایت مشتری 16 درصد کاهش پیدا میکند.

 

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

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

راه اندازی Lazy Load برای تصاویر در وردپرس

اولین کاری که باید انجام دهید این است که پلاگین BJ Lazy Load را نصب و فعال کنید، این پلاگین را از لینک زیر میتوانید دانلود کنید و یا از بخش افزونه ها در مخزن وردپرس جستجو کنید

صفحه افزونه

پس از فعال شدن، از بخش پیشخوان وردپرس و تنظیمات روی گزینه BJ Lazy Load کلیک کنید

 

شما می توانید lazy load را به محتوا، ابزارک ،تصاویر شاخص، gravatars و فریم ها اعمال کنید، شما همچنین می توانید یک تصویر سفارشی را به عنوان یک تصویر نگه دارنده مورد استفاده قرار دهید، همانطور که مشاهده میکنید تنها کافیست تیک هر گزینه را بزنید

فراموش نکنید که دکمه Save Change را در انتها کلیک کنید تا تنظیمات ذخیره شوند

اکنون میتوانید از وبسایت خود دیدن و lazy loading برای تصاویر را در عمل مشاهده کنید.

خب به پایان این آموزش رسیدیم.

امیدوارم استفاده کافی برده باشید

موفق باشید.

منبع : تاپ وردپرس