کاهش حجم تصاویر وردپرس بدون افت کیفیت
۳ دقیقه مطالعهبروزرسانی:
در بیشتر سایت‌های وردپرسی، تصویرهای سنگین اصلی‌ترین دلیل کندی‌اند. خبر خوب این است که با چند عادت ساده می‌شود حجم را چند برابر کم کرد، بدون اینکه ظاهر سایت عوض شود.
اول مشکل را پیدا کنید
صفحه‌ی خودتان را در واکاوی سایت بسنجید و به بخش «تصاویر بهینه‌نشده» نگاه کنید: فهرست تصویرهایی که می‌توانند کوچک‌تر یا در اندازه‌ی مناسب‌تر باشند و میزان صرفه‌جویی هر کدام را نشان می‌دهد. با همین فهرست، بزرگ‌ترین‌ها را اول اصلاح کنید.
قبل از بارگذاری در وردپرس
بهترین و ارزان‌ترین جا برای بهینه‌سازی، پیش از بارگذاری است:
- اندازه: عرض تصویر را به اندازه‌ی نیاز (برای محتوای مقاله معمولاً ۱۲۰۰ تا ۱۶۰۰ پیکسل کافی است) برسانید. وردپرس خودش تصویرهای بزرگ‌تر از ۲۵۶۰ پیکسل را کوچک می‌کند، اما نسخه‌ی بسیار بزرگ دیگر لازم نیست.
- فرمت و کیفیت: با ابزار تصویر به WebP تبدیل و کیفیت ۷۵ تا ۸۵ را امتحان کنید.
- نام فایل: توصیفی و انگلیسی یا بدون فاصله (
wordpress-speed-test.webp)، نهIMG_2043.webp. - متن جایگزین: در کتابخانه‌ی رسانه «متن جایگزین» را پر کنید.
فرمت‌های جدید در وردپرس
وردپرس از نسخه‌ی ۵٫۸ بارگذاری WebP و از نسخه‌ی ۶٫۵ بارگذاری AVIF را پشتیبانی می‌کند. اگر تصویر WebP را مستقیم بارگذاری کنید، وردپرس هم نسخه‌های کوچک‌تر (thumbnail و medium) را از آن می‌سازد. جزئیات فرمت‌ها در راهنمای WebP و AVIF است.
افزونه‌های بهینه‌سازی
اگر تصویرهای زیادی دارید و نمی‌خواهید دستی کار کنید، افزونه‌هایی مثل ShortPixel، Imagify، Smush یا EWWW تصویرهای کتابخانه را خودکار فشرده و به WebP تبدیل می‌کنند. چند نکته:
- فقط یک افزونه‌ی بهینه‌سازی تصویر داشته باشید؛ چند افزونه با هم تداخل می‌کنند.
- پیش از فشرده‌سازی انبوه، از سایت نسخه‌ی پشتیبان بگیرید.
- حالت «بدون افت کیفیت» (lossless) امن‌تر و حالت «با افت» (lossy) حجم کمتر می‌دهد؛ برای عکس، lossy با کیفیت بالا معمولاً کافی است.
بارگذاری تنبل (lazy loading)
وردپرس به‌طور پیش‌فرض به تصویرها loading="lazy" می‌دهد تا تصویرهای پایین صفحه دیرتر بارگذاری شوند، که خوب است. اما تصویر اول صفحه که معمولاً LCP است نباید lazy باشد. نسخه‌های جدید وردپرس برای تصویر اول محتوا تلاش می‌کنند این کار را بکنند، ولی در قالب‌ها و صفحه‌سازها ممکن است درست نباشد؛ در گزارش واکاوی بررسی کنید.
اندازه‌ی نمایش و CLS
اگر قالب شما width و height را برای تصویر نمی‌نویسد، محتوا هنگام آمدن تصویر جابه‌جا می‌شود (CLS). وردپرس معمولاً این دو را اضافه می‌کند؛ اگر در صفحه‌ی خودتان نیست، قالب یا صفحه‌ساز را بررسی کنید.
چک‌لیست سریع
- عرض تصویرها از نیاز بیشتر نباشد
- فرمت WebP با کیفیت ۷۵ تا ۸۵
- تصویر اول صفحه lazy نباشد
- متن جایگزین برای تصویرهای معنادار
- فقط یک افزونه‌ی بهینه‌سازی
- بعد از تغییر، دوباره با واکاوی بسنجید
با ابزار امتحان کنید
سؤالات متداول
فشرده‌سازی تصویرهای قدیمی کتابخانه‌ام ایمن است؟
اگر از افزونه استفاده می‌کنید، حالت پشتیبان‌گیری از اصل تصویر را فعال کنید و قبلش از کل سایت نسخه‌ی پشتیبان بگیرید.
چرا بعد از تبدیل به WebP هنوز سایت کند است؟
تصویر فقط یکی از دلیل‌های کندی است. واکاوی سایت را اجرا کنید و ببینید TTFB، جاوااسکریپت یا فونت هم مشکل دارند یا نه.