لود تنبل تصاویر در وردپرس؛ بدون افزونه و با افزونه

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

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

لود تنبل تصاویر در وردپرس چیه و چطور کار می‌کنه؟

لود تنبل یا Lazy Loading یعنی دریافت بعضی تصاویر تا وقتی که کاربر به محل نمایش اون‌ها نزدیک بشه عقب می‌افته. برای مثال، اگه یک مقاله ۲۰ تصویر داشته باشه ولی کاربر در شروع فقط بخش بالای صفحه رو ببینه، مرورگر لازم نیست همون اول همه ۲۰ تصویر رو دریافت کنه.

لود تنبل چه فرقی با بارگذاری عادی تصاویر داره؟

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

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

این قابلیت چطور حجم بارگذاری اولیه صفحه رو کمتر می‌کنه؟

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

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

آیا برای لود تنبل تصاویر به افزونه نیاز دارید؟

در بیشتر سایت‌های به‌روز، جواب کوتاه «نه» هست. وردپرس از نسخه ۵.۵ به بعد از قابلیت بومی مرورگر برای لود تنبل تصاویر پشتیبانی می‌کنه و منطق این قابلیت در نسخه‌های بعدی هم تغییر کرده. یعنی برای تصاویر معمولی نوشته‌ها و برگه‌ها، احتمال زیادی هست که همین حالا لود تنبل روی سایتتون اجرا بشه. جزئیات این روش رو می‌تونید در راهنمای Native Lazy Loading در وردپرس و مطلب ویژگی‌های وردپرس ۵.۵ هم بخونید.

لود تنبل داخلی وردپرس از نسخه ۵.۵ به بعد

وردپرس می‌تونه برای تصاویر مناسب ویژگی استاندارد loading="lazy" رو در خروجی HTML قرار بده. HTML همون ساختاریه که مرورگر برای ساختن صفحه می‌خونه. مرورگرهای پشتیبان این ویژگی، زمان دریافت تصویر رو با توجه به شرایط صفحه و فاصله اون از محدوده دید مدیریت می‌کنن.

برای استفاده از این قابلیت معمولاً لازم نیست گزینه خاصی رو در پیشخوان روشن کنید. وردپرس هم ویژگی loading="lazy" رو بدون توجه به جای تصویر به همه عکس‌ها اضافه نمی‌کنه و تصمیم نهایی می‌تونه به جای تصویر، قالب و افزونه‌ها بستگی داشته باشه. مهم‌تر از همه، وردپرس، قالب و افزونه‌هاتون رو به‌روز نگه دارید.

چه وقت‌هایی قابلیت داخلی وردپرس کافیه؟

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

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

چه وقت‌هایی استفاده از افزونه به کارتون میاد؟

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

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

قبل از فعال‌کردن لود تنبل چه نکاتی رو بررسی کنید؟

قبل از تغییر تنظیمات از سایتتون نسخه پشتیبان بگیرید

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

تغییرات رو اول روی سایت آزمایشی امتحان کنید

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

افزونه‌های کش و بهینه‌سازی فعلی رو بررسی کنید

وارد پیشخوان وردپرس بشید و از بخش «افزونه‌ها ← افزونه‌های نصب‌شده» فهرست افزونه‌های فعال رو ببینید. بعد تنظیمات افزونه‌های کش، فشرده‌سازی تصویر و بهینه‌سازی سرعت رو باز کنید و دنبال گزینه‌هایی مثل Lazy Load، بارگذاری تنبل یا Media Optimization بگردید.

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

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

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

وردپرس چطور ویژگی loading=”lazy” رو به تصاویر اضافه می‌کنه؟

وقتی وردپرس کد تصویر رو تولید می‌کنه، می‌تونه ویژگی loading="lazy" رو داخل تگ <img> بذاره. تگ <img> همون بخش از کد صفحه هست که نشانی و مشخصات تصویر رو به مرورگر می‌ده. مرورگر با دیدن این ویژگی، ممکنه دریافت تصویر خارج از محدوده دید رو عقب بندازه.

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

چطور فعال‌بودن لود تنبل رو بررسی کنید؟

1. یکی از مقاله‌های پرتصویر سایتتون رو در یک پنجره ناشناس مرورگر باز کنید.
2. روی یکی از تصاویر پایین صفحه راست‌کلیک کنید و گزینه Inspect یا «بررسی» رو بزنید.
3. در کد انتخاب‌شده دنبال ویژگی‌هایی مثل loading="lazy" بگردید.
4. اگه این ویژگی رو ندیدید، نتیجه نگیرید که لود تنبل خاموشه؛ بعضی قالب‌ها و افزونه‌ها از JavaScript، ویژگی‌های داده یا روش‌های دیگه استفاده می‌کنن.
5. صفحه رو از اول باز کنید و رفتار تصاویر رو موقع اسکرول روی موبایل و دسکتاپ ببینید.

دیدن loading="lazy" فقط نشون می‌ده این ویژگی در کد تصویر هست و به‌تنهایی درست‌بودن عملکرد رو ثابت نمی‌کنه. برای بررسی دقیق‌تر باید زمان درخواست تصاویر رو در بخش Network مرورگر هم ببینید.

لود تنبل داخلی وردپرس چه محدودیت‌هایی داره؟

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

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

روش دوم: لود تنبل با افزونه

اگه قابلیت داخلی نیازتون رو پوشش نمی‌ده، می‌تونید افزونه رایگان Lazy Load by WP Rocket رو بررسی کنید. این افزونه برای عقب‌انداختن بارگذاری تصاویر، iframeها و بعضی ویدئوهای تعبیه‌شده ساخته شده.

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

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

چه قابلیت‌هایی ممکنه به افزونه نیاز داشته باشن؟

• لود تنبل ویدئوها و iframeها: دریافت محتوای سنگین تعبیه‌شده تا زمان مناسب عقب می‌افته. برای جزئیات بیشتر می‌تونید راهنمای لود تنبل ویدئو در وردپرس رو بخونید.
• لود تنبل بعضی تصاویر پس‌زمینه: بعضی افزونه‌ها می‌تونن تصویرهایی رو پوشش بدن که قالب از راه CSS نمایش می‌ده.
• نمایش تصویر پیش‌نمایش برای ویدئوهای YouTube: به‌جای بارگذاری کامل پخش‌کننده YouTube در شروع، یک تصویر پیش‌نمایش دیده می‌شه و پخش‌کننده بعد از کلیک کاربر بارگذاری می‌شه.

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

چطور افزونه مناسب رو انتخاب کنید؟

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

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

چطور افزونه رو نصب و تنظیم کنید؟

1. اول از سایتتون نسخه پشتیبان بگیرید.
2. در پیشخوان وردپرس به «افزونه‌ها ← افزودن افزونه تازه» برید.
3. نام دقیق افزونه انتخابی رو جست‌وجو کنید و سازنده اون رو با صفحه رسمی تطبیق بدید.
4. دکمه نصب افزونه رو بزنید و بعد اون رو فعال کنید. نوشته روی دکمه‌ها ممکنه با توجه به ترجمه پیشخوان شما کمی فرق داشته باشه.
5. صفحه تنظیمات افزونه رو باز کنید و فقط قابلیت‌های موردنیازتون رو روشن کنید.
6. اگه گزینه استثنا داره، تصویر اصلی بالای صفحه و تصاویر مهمی رو که از شروع دیده می‌شن از لود تنبل خارج کنید.
7. کش سایت، افزونه کش و CDN رو پاک کنید. CDN شبکه‌ای از سرورهاست که فایل‌های سایت رو از محل نزدیک‌تر به کاربر تحویل می‌ده.

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

چطور مطمئن بشید افزونه درست کار می‌کنه؟

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

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

کدوم تصاویر نباید به‌صورت تنبل لود بشن؟

تصویر اصلی بالای صفحه و معیار LCP

LCP یا Largest Contentful Paint یعنی مدت‌زمانی که طول می‌کشه بزرگ‌ترین محتوای قابل‌دیدن صفحه نمایش داده بشه. در خیلی از صفحه‌ها، این محتوا همون تصویر شاخص، بنر یا تصویر بزرگ ابتدای صفحه هست.

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

لوگو و تصاویر مهمی که از اول دیده می‌شن

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

چطور تصاویر مهم رو از لود تنبل خارج کنید؟

اول تنظیمات افزونه یا قالب رو برای گزینه‌هایی مثل Exclude، Skip یا Lazy Load Exclusions بررسی کنید. این گزینه‌ها ممکنه اجازه بدن نشانی تصویر، نام کلاس CSS یا بخش مشخصی از صفحه رو استثنا کنید. کلاس CSS یک برچسب داخل کده که برای شناسایی و طراحی یک بخش به کار می‌ره.

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

چطور نتیجه لود تنبل رو اندازه بگیرید؟

آزمایش قبل و بعد با PageSpeed Insights

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

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

بررسی نسخه موبایل و دسکتاپ

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

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

کدوم معیارها رو با هم مقایسه کنید؟

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

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

مشکلات رایج لود تنبل تصاویر و راه‌حل اون‌ها

تصاویر نمایش داده نمی‌شن یا دیر ظاهر می‌شن

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

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

تصویر اصلی صفحه دیر لود می‌شه

کد تصویر اصلی و تنظیمات افزونه رو بررسی کنید. اگه تصویر داخل نمای اولیه ویژگی loading="lazy" داره یا افزونه اون رو به تعویق می‌اندازه، تصویر رو به فهرست استثناها اضافه کنید. بعد کش رو پاک کنید و LCP رو دوباره بسنجید.

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

افزونه با کش، قالب یا صفحه‌ساز تداخل داره

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

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

لود تنبل هم‌زمان از چند بخش فعال شده

ممکنه وردپرس، قالب، افزونه کش، افزونه تصویر و CDN همگی به شکلی روی بارگذاری تصاویر اثر بذارن. معمولاً بهتره فقط یک ابزار مسئول تنظیمات اضافه لود تنبل باشه و گزینه‌های مشابه در ابزارهای دیگه طبق راهنمای همون ابزارها تنظیم بشن.

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

لود تنبل به‌تنهایی برای افزایش سرعت کافیه؟

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

بهینه‌سازی کامل تصاویر و کش با افزونه رخش

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

• بهینه‌سازی و بارگذاری تصاویر
• تبدیل خودکار تصاویر به WebP و AVIF
• کنترل کیفیت فایل خروجی
• تبدیل تصاویر JPG، PNG، GIF و BMP
• حذف اطلاعات EXIF و IPTC؛ یعنی اطلاعات جانبی ذخیره‌شده داخل بعضی فایل‌های تصویری
• افزودن خودکار ابعاد تصاویر
• بارگذاری تنبل تصاویر
• بارگذاری تنبل آی‌فریم‌ها
• بارگذاری تنبل ویدئو با تصویر پیش‌نمایش

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

فشرده‌سازی و انتخاب اندازه مناسب تصاویر

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

استفاده از فرمت‌های تصویری جدید

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

کش، میزبانی مناسب و بهینه‌سازی فایل‌ها

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

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

جمع‌بندی

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

اگه ویدئو، iframe، تصویر پس‌زمینه یا بخش خاصی دارید که قابلیت داخلی پوشش نمی‌ده، افزونه‌ای رو انتخاب کنید که با نسخه فعلی وردپرس و ابزارهای سایتتون سازگاره و مرتب به‌روز می‌شه. تغییر رو اول روی سایت آزمایشی انجام بدید، تصویرهای مهم داخل نمای اولیه رو استثنا کنید و نتیجه رو قبل و بعد بسنجید. هدف فقط فعال‌کردن Lazy Load نیست؛ هدف اینه که صفحه واقعاً سریع‌تر و برای کاربر روان‌تر بشه.

سؤال‌های رایج

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.