پروژه‌ای را به یاد می‌آورم که مدیر سایت با اطمینان می‌گفت افزونه بهینه‌سازی تصویر را نصب کرده و همه‌چیز سر جای خودش است. اما وقتی اعداد PageSpeed را با هم مرور کردیم، سایت هنوز کند بود. مشکل این نبود که افزونه بد بود؛ مشکل این بود که افزونه نصب شده بود اما فرآیند بهینه‌سازی تصویر در وردپرس اجرا نشده بود. تصاویر قدیمی کتابخانه هرگز بهینه نشده بودند، WebP فعال نبود و تصویر شاخص صفحه اول بدون fetchpriority بار می‌شد. در این نوشته، به‌جای مقایسه ابزارها، فرآیندی را مرور می‌کنم که باید برای بهینه‌سازی تصاویر وردپرس طی شود. ترتیب گام‌ها مهم است؛ اگر جابه‌جا شوند، حتی بهترین افزونه هم اثر کامل نمی‌دهد. برای لایه مقدماتی مباحث تصویر، سئوی تصویر چیست و فشرده‌سازی تصاویر سایت را ببینید.

چرا نصب افزونه به‌تنهایی کافی نیست

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

  • کتابخانه قدیمی: افزونه به‌طور پیش‌فرض تصاویر قبلی را بهینه نمی‌کند. اگر سایت چند سال تصویر بدون بهینه‌سازی داشته، افزونه جدید فقط تصاویر تازه را پوشش می‌دهد.
  • عدم تبدیل WebP: بسیاری از افزونه‌ها فرمت مدرن را تولید می‌کنند اما فعال نیست مگر اینکه دستی فعال شود.
  • ابعاد نامناسب: بهینه‌سازی فشرده‌سازی، ابعاد را اصلاح نمی‌کند. تصویری که ۳۰۰۰ پیکسل عرض دارد اما در نمایشگاه ۸۰۰ پیکسل دیده می‌شود، با فشرده‌سازی هم بهینه نشده است.

در پروژه‌های واقعی، دیده‌ام که بیش از نیمی از سایت‌هایی که «افزونه بهینه‌سازی دارند» هنوز بهینه‌نشده‌اند چون فرآیند را کامل اجرا نکرده‌اند. اگر با مفاهیم پایه Core Web Vitals آشنا نیستید، Core Web Vitals چیست چارچوب خوبی می‌دهد.

افزونه بهینه‌سازی تصویر، کلید خانه است؛ اما فرآیند بهینه‌سازی، خودِ خانه است. کلید بدون خانه، کار نمی‌کند.

گام صفر: ثبت وضعیت پایه

پیش از هر تغییری، سه عدد پایه ثبت کنید:

  • حجم کل پوشه uploads: از File Manager هاست یا SSH قابل اندازه‌گیری است. برای سایت متوسط وردپرسی، حجم بالای ۵ گیگابایت معمولاً نشانه تصاویر بهینه‌نشده است.
  • تعداد تصاویر بالای ۵۰۰ کیلوبایت: با یک ابزار محلی یا از طریق افزونه، تعداد تصاویر سنگین را بشمارید.
  • LCP صفحه اصلی و صفحه محصول: با ابزارهایی که در بهترین ابزارهای تست سرعت آمده، این عدد را ثبت کنید.

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

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

پیکربندی افزونه، مهم‌ترین گام کیفیت است. پنج تنظیم کلیدی که در همه افزونه‌های معتبر وجود دارد:

  1. سطح فشرده‌سازی پیش‌فرض: برای اکثر تصاویر، سطح Normal یا Glossy. Aggressive برای تصاویر با حجم بالا و اهمیت کمتر کیفیت.
  2. حفظ تصویر اصلی: در شروع، نگه‌داشتن نسخه اصلی توصیه می‌شود تا امکان بازگردانی باشد. بعد از تأیید کیفیت، می‌توانید حذف کنید.
  3. تبدیل خودکار به WebP: روی همه تصاویر جدید فعال کنید. برای تصاویر خاص که WebP کیفیتشان را کم می‌کند (مثل لوگوهای حساس به شفافیت)، استثنا بگذارید. مسیر در بهترین فرمت تصویر وب.
  4. بهینه‌سازی هنگام آپلود: فعال کنید تا هر تصویر جدید پیش از ذخیره بهینه شود.
  5. محدودسازی اندازه: تعریف حد بالای ابعاد تصویر که هنگام آپلود خودکار کوچک شود. مسیر در بهینه‌سازی تصویر برای موبایل.

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

گام دوم: بهینه‌سازی کتابخانه موجود

پس از پیکربندی، نوبت به بهینه‌سازی تصاویر موجود کتابخانه است. سه نکته عملی:

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

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

گام سوم: تبدیل به فرمت‌های مدرن

WebP امروز استاندارد است و صرفه‌جویی ۲۵ تا ۳۵ درصد حجم نسبت به JPEG می‌دهد. AVIF فشرده‌سازی بهتری دارد اما پشتیبانی مرورگرها هنوز کامل نیست. فرآیند پیشنهادی:

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

مسیر کامل انتخاب فرمت در WebP در برابر JPEG آمده است. یک تذکر: اگر سایت شما از تصاویر PNG با شفافیت گسترده استفاده می‌کند، WebP می‌تواند کیفیت شفافیت را کم کند. برای این دسته، استثنا بگذارید.

گام چهارم: ابعاد و srcset

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

  • تعریف ابعاد نمایش در هر ناحیه: برای هر جای سایت (هدر، آرشیو، نوشته، گالری) ابعاد مناسب را تعیین کنید. وردپرس به‌طور پیش‌فرض سه اندازه می‌سازد اما معمولاً کافی نیست.
  • فعال بودن srcset: در وردپرس مدرن به‌طور پیش‌فرض فعال است، اما قالب‌های قدیمی ممکن است آن را نادیده بگیرند. مسیر در تصاویر ریسپانسیو چیست.
  • توقف آپلود ابعاد بزرگ: اگر تصاویر آپلودی بزرگ‌تر از نمایش نهایی هستند، دو راه: آموزش کاربران تیم برای آپلود ابعاد درست، یا افزودن محدودیت در افزونه.

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

گام پنجم: تصویر شاخص و LCP

تصویر شاخص (Featured Image) در بسیاری از سایت‌ها همان LCP است. سه اقدام کلیدی:

  • Lazy-load را روی تصویر شاخص غیرفعال کنید: اگر تصویر LCP خودش lazy باشد، زمان نمایش دو برابر می‌شود. تصویر شاخص باید loading="eager" و fetchpriority="high" باشد.
  • ابعاد LCP را کوچک‌تر کنید: اگر تصویر شاخص بزرگ است، همان LCP سایت را عقب می‌اندازد. در بسیاری از قالب‌ها، عرض مناسب بین ۱۲۰۰ تا ۱۴۰۰ پیکسل کافی است.
  • از AVIF یا WebP برای تصویر شاخص استفاده کنید: صرفه‌جویی در بایت LCP مستقیم روی سرعت اثر می‌گذارد.

مسیر دقیق پیاده‌سازی در LCP چیست و چگونه بهینه کنیم آمده است. تجربه‌ام این است که تنها تغییر eager روی تصویر شاخص، در چند پروژه، LCP را ۲۰ تا ۳۰ درصد بهبود داده.

گام ششم: یکپارچگی با کش و CDN

پس از بهینه‌سازی، لایه تحویل تصویر هم باید تنظیم شود. سه اقدام:

  • تنظیم افزونه کش برای تصاویر: انقضای طولانی برای تصاویر، کوتاه‌تر برای HTML. مسیر در افزونه‌های کش وردپرس.
  • یکپارچگی با CDN: اگر افزونه شما با CDN یکپارچه نیست، تنظیم دستی قواعد کش در CDN ضروری است. مسیر در نقش CDN در سرعت سایت و راه‌اندازی CDN.
  • نسخه‌بندی تصاویر: در پیکربندی کش، از query-string برای نسخه‌بندی استفاده کنید تا وقتی تصویری عوض شد، نسخه قدیمی در کش نماند.

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

گام هفتم: پایش و بازبینی دوره‌ای

بهینه‌سازی تصویر، پروژه یک‌باره نیست. سه بازبینی ضروری:

  • ماهانه: بررسی حجم پوشه uploads و تغییر آن نسبت به ماه قبل.
  • فصلی: اجرای مجدد بهینه‌سازی برای تصاویر جدیدی که در سه ماه گذشته اضافه شده‌اند و شاید در گام اول از قلم افتاده‌اند.
  • پس از هر تغییر قالب یا افزونه: تأیید اینکه تنظیمات بهینه‌سازی تصویر سالم مانده‌اند.

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

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

اشتباهات رایج در فرآیند

شش اشتباه که در پروژه‌های واقعی دیده‌ام:

  1. نصب افزونه بدون پیکربندی: پیش‌فرض‌های افزونه معمولاً محافظه‌کارانه‌اند و اثر کامل نمی‌دهند.
  2. نادیده گرفتن کتابخانه موجود: همان اشتباه شایع. بهینه‌سازی فقط تصاویر جدید، سایت را سریع نمی‌کند.
  3. فعال نکردن WebP: بی‌توجهی به فرمت مدرن، صرفه‌جویی حجم را از دست می‌دهد.
  4. تکیه بر فشرده‌سازی بدون اصلاح ابعاد: ابعاد بزرگ، تأثیر فشرده‌سازی را خنثی می‌کند.
  5. Lazy-load روی تصویر LCP: یکی از رایج‌ترین خطاهای پیکربندی. مسیر تشخیص در بهینه‌سازی LCP.
  6. نصب دو افزونه بهینه‌سازی هم‌زمان: تصویر دو بار فشرده می‌شود، کیفیت افت می‌کند و اثر افزونه‌ها منفی می‌شود.

مسیر اشتباهات عمومی در اشتباهات رایج در بهینه‌سازی تصویر.

پرسش‌های پرتکرار درباره بهینه‌سازی تصاویر وردپرس

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

چقدر طول می‌کشد تا بهینه‌سازی نتیجه بدهد؟ بهینه‌سازی خود افزونه، سریع انجام می‌شود. اثر آن روی سرعت (بهبود LCP) معمولاً در بازه‌های بعدی تست PageSpeed دیده می‌شود. باید از کش سایت هم مطمئن باشید چون نسخه قدیمی تصویر می‌تواند تا زمان انقضای کش باقی بماند.

آیا برای سایتی با تصاویر کم هم افزونه لازم است؟ اگر آپلود شما زیر ۱۰ تصویر در ماه است، فشرده‌سازی دستی با ابزارهای آنلاین کافی است. اما برای سایت با آپلود منظم، افزونه ضروری است. مسیر در بررسی افزونه‌های بهینه‌سازی تصویر.

چرا تصاویر بهینه‌شده هم در سرعت اثر نمی‌گذارد؟ سه دلیل شایع: تصاویر LCP هنوز lazy هستند، CDN نسخه قدیمی را از کش می‌دهد یا ابعاد تصویر اصلاح نشده. مسیر تشخیص در چرا بعضی قالب‌ها سایت را کند می‌کنند.

آیا بهینه‌سازی تصویر روی سرور فشار می‌آورد؟ بسته به روش. اگر افزونه از API ابری استفاده می‌کند، فشار سرور کم است اما هزینه دارد. اگر روی سرور خودتان فشرده می‌شود، فشار CPU و RAM بالا می‌رود. برای سایت‌های پربار روی هاست اشتراکی، API ابری انتخاب درستی است. مسیر در کاهش مصرف منابع هاست.

چگونه مطمئن شوم فرآیند درست اجرا شده؟ سه نشانه: حجم پوشه uploads کاهش محسوس داشته، همه تصاویر جدید WebP/AVIF دارند و LCP صفحه اول بهبود یافته. مسیر سنجش دقیق در Core Web Vitals چیست.

فرآیندی که با نصب افزونه تمام نمی‌شود

بهینه‌سازی تصاویر وردپرس با افزونه‌ها، یک فرآیند هفت‌گامی است که در آن پیکربندی درست، بهینه‌سازی کتابخانه موجود، تبدیل فرمت، اصلاح ابعاد، بهینه‌سازی LCP، یکپارچگی با کش و CDN، و پایش دوره‌ای هم‌زمان لازم‌اند. هیچ‌کدام به‌تنهایی کافی نیست و همه در کنار هم، اثر محسوس می‌سازند. اگر امروز فقط یک کار می‌کنید، فایل‌های پوشه uploads را باز کنید و ببینید چند تصویر بالای ۵۰۰ کیلوبایت دارید. همین یک عدد، نقطه شروع روشنی است، پیش از هر تصمیم درباره ابزار یا پیکربندی. اگر تجربه‌ای از فرآیند بهینه‌سازی تصویر یا نتیجه‌ای غیرمنتظره دارید، در دیدگاه بنویسید؛ همین روایت‌ها برای سایت‌های در حال بهینه‌سازی، نقشه راه عملی‌تری می‌سازند. 🖼️