صبر کنید...
مرکز آموزش میلاد سرور

بهینه‌سازی تصاویر سایت برای سرعت و سئو

تصویر آموزشی بهینه‌سازی تصاویر سایت برای سرعت و سئو
راهنمای تصویری و مرحله‌به‌مرحله میلاد سرور

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

آخرین به‌روزرسانی: ۲۸ مهر ۱۴۰۵ · زمان مطالعه: حدود 3 دقیقه · سطح: کاربردی

در این آموزش چه یاد می‌گیرید؟
  • بهینه‌سازی تصاویر سایت برای سرعت و سئو
  • ابعاد واقعی تصاویر را بررسی کنید
  • تصویر LCP را preload یا eager نگه دارید

چرا این موضوع مهم است؟

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

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

پیش‌نیازها

  • دسترسی SSH با کاربر root یا کاربر دارای sudo
  • Ubuntu 22.04/24.04 یا Debian 12 (سازگاری با توزیع‌های مشابه)
  • نسخه پشتیبان از فایل‌ها و دیتابیس‌های مهم

راهنمای گام‌به‌گام

گام 1 — ابعاد واقعی تصاویر را بررسی کنید

ابعاد واقعی تصاویر را بررسی کنید. اگر روی چند سرور کار می‌کنید، این مورد را یک‌بار روی محیط تست اجرا و سپس روی تولید اعمال کنید.

گام 2 — فرمت مدرن WebP یا AVIF بسازید

فرمت مدرن WebP یا AVIF بسازید. مقدارهای نمونه را با اطلاعات واقعی سرور خود جایگزین کنید و از اجرای دستور با مقادیر پیش‌فرض پرهیز کنید.

گام 3 — برای هر تصویر alt توصیفی بنویسید

برای هر تصویر alt توصیفی بنویسید. برای اطمینان، نتیجه را از یک مسیر دوم (مرورگر، کلاینت یا ابزار مانیتورینگ) هم بررسی کنید.

گام 4 — عرض و ارتفاع را در HTML ست کنید

عرض و ارتفاع را در HTML ست کنید. این کار را در بازه کم‌ترافیک انجام دهید و در صورت نیاز کاربران را از قبل مطلع کنید.

گام 5 — تصاویر پایین صفحه را lazy کنید

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

گام 6 — تصویر LCP را preload یا eager نگه دارید

تصویر LCP را preload یا eager نگه دارید. پس از اجرا، وضعیت سرویس و لاگ‌ها را کنترل کنید؛ تغییر بدون بررسی می‌تواند خطای پنهان ایجاد کند.

نمودار مراحل بهینه‌سازی تصاویر سایت برای سرعت و سئو
شش گام اصلی این آموزش در یک نگاه

نمونه دستورها

نمونه دستورهای بهینه‌سازی تصاویر سایت برای سرعت و سئو
دستورهای پیشنهادی؛ مقادیر نمونه را با اطلاعات سرور خود جایگزین کنید.
cwebp -q 82 photo.jpg -o photo.webp
<img src="/img/photo.webp" width="800" height="500" loading="lazy" alt="توضیح تصویر">
# تصویر اصلی صفحه: fetchpriority="high"

نکات امنیتی و بهینه‌سازی

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

خطاهای رایج و راه‌حل

  • اگر تغییرات اعمال نشد، کش مرورگر/برنامه و نیاز به reload یا restart را بررسی کنید.
  • اگر مطمئن نیستید، تغییر را در محیط تست تکرار کنید و لاگ کامل را برای پشتیبانی بفرستید.
  • اگر تغییرات اعمال نشد، کش مرورگر/برنامه و نیاز به reload یا restart را بررسی کنید.
نکته طلایی: alt را با کلمات کلیدی انباشته نکنید؛ توضیح واقعی تصویر برای کاربر و موتور جستجو بهترین است.

سؤالات متداول

WebP پشتیبانی می‌شود؟

تقریباً همه مرورگرهای مدرن؛ برای سازگاری می‌توانید fallback JPG بدهید.

آیا lazy برای همه تصاویر خوب است؟

نه؛ تصویر اصلی بالای صفحه (LCP) باید eager و با اولویت بالا بارگذاری شود.

سرور مناسب نیازتان را انتخاب کنید

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

جمع‌بندی

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

این آموزش برای شما مفید بود؟نظر شما به بهتر شدن آموزش‌ها کمک می‌کند.
اشتراک‌گذاری:تلگرامواتساپX