آموزش افزونه Smush؛ کاهش حجم تصاویر و افزایش سرعت سایت وردپرسی
چرا بهینه‌سازی تصویر مهم است؟
تصویرهای بزرگ یکی از دلایل رایج کندی صفحات وردپرس هستند. فایل سنگین زمان بارگذاری را افزایش می‌دهد، مصرف اینترنت موبایل را بالا می‌برد و می‌تواند امتیاز شاخص‌های تجربه کاربر را کاهش دهد. Smush برای فشرده‌سازی، تغییر اندازه و مدیریت بارگذاری تصاویر استفاده می‌شود؛ اما جای انتخاب ابعاد درست و استفاده از فرمت مناسب را نمی‌گیرد.
نصب Smush
در پیشخوان وردپرس به «افزونه‌ها > افزودن» بروید و Smush را جست‌وجو کنید. افزونه رسمی را نصب و فعال کنید. پس از فعال‌سازی، داشبورد Smush وضعیت تصاویر و پیشنهادهای بهینه‌سازی را نشان می‌دهد. قبل از فشرده‌سازی انبوه از فایل‌های اصلی و پایگاه داده نسخه پشتیبان بگیرید، به‌خصوص اگر تصاویر منبع تنها نسخه موجود شما هستند.
تنظیمات فشرده‌سازی
در بخش Bulk Smush میتوانید تصاویر موجود را گروهی فشرده کنید. اگر گزینه حذف داده‌های اضافی یا متادیتا فعال است، بدانید که بخشی از اطلاعات دوربین از فایل حذف می‌شود؛ برای سایت تجاری معمولاً مشکلی ایجاد نمی‌کند، اما برای آرشیو عکاسی نسخه اصلی را نگه دارید.
برای تصاویر جدید، تنظیمات فشرده‌سازی خودکار را فعال کنید. حالت بدون افت محسوس کیفیت برای تصاویر حساس و حالت فشرده‌سازی بیشتر برای تصاویر وبلاگی مناسب است. بعد از تغییر، چند تصویر را در موبایل و دسکتاپ مقایسه کنید؛ هدف کاهش حجم بدون آسیب دیدن جزئیات مهم است.
تغییر اندازه و ابعاد مناسب
تصویر را پیش از آپلود در ابعاد نزدیک به محل نمایش آماده کنید. آپلود عکس ۴۰۰۰ پیکسلی برای یک کارت ۶۰۰ پیکسلی، حتی با فشرده‌سازی هم سربار ایجاد میکند. در تنظیمات Resize، حداکثر عرض منطقی برای محتوای سایت را انتخاب کنید و مراقب باشید لوگو یا تصاویر اصلی بیش از حد کوچک نشوند.
WebP و فرمت‌های جدید
WebP در بسیاری از سایت‌ها حجم کمتری از JPEG و PNG دارد. اگر Smush امکان ساخت نسخه WebP را در نصب شما فراهم میکند، آن را فعال و خروجی را با مرورگرهای رایج آزمایش کنید. تصویر اصلی را بلافاصله حذف نکنید؛ اول مطمئن شوید نسخه جایگزین به‌درستی در قالب، CDN و اشتراک‌گذاری‌ها نمایش داده می‌شود.
PNG برای تصاویر شفاف و گرافیک‌های ساده مناسب است و JPEG برای عکس‌های معمولی کاربرد دارد. تبدیل کورکورانه همه تصاویر به یک فرمت ممکن است کیفیت یا حجم را بدتر کند.
Lazy Load
بارگذاری تنبل باعث می‌شود تصاویر خارج از محدوده دید کاربر هنگام نیاز بارگیری شوند. این گزینه برای تصاویر پایین صفحه مفید است، اما تصویر اصلی بالای صفحه یا LCP را نباید بی‌دلیل lazy کنید؛ ممکن است بارگذاری مهم‌ترین عنصر صفحه به تأخیر بیفتد. بعد از فعال‌سازی، صفحه اصلی و چند مقاله را با موبایل بررسی کنید.
خطاهای رایج
فعال‌کردن هم‌زمان چند افزونه بهینه‌سازی تصویر، نگه‌داشتن چند نسخه تکراری، فشرده‌سازی دوباره فایل‌های قبلاً فشرده و حذف نسخه اصلی بدون پشتیبان از خطاهای متداول هستند. همچنین بهینه‌سازی تصویر به‌تنهایی سرعت سایت را تضمین نمی‌کند؛ فونت‌ها، جاوااسکریپت، کش، سرور و درخواست‌های شخص ثالث را هم بررسی کنید.
سنجش نتیجه
قبل و بعد از تغییرات، چند URL مهم را با ابزار سنجش سرعت بررسی کنید. حجم صفحه، اندازه تصویر اصلی، زمان نمایش محتوای اصلی و تجربه موبایل را مقایسه کنید. اگر حجم کم شده اما کیفیت تبدیل یا خوانایی تصویر افت کرده، تنظیمات را به حالت متعادل برگردانید.
جمع‌بندی
Smush با فشرده‌سازی، تغییر اندازه، WebP و lazy load می‌تواند وزن صفحات وردپرس را کمتر کند. بهترین نتیجه از ترکیب فرمت درست، ابعاد درست، فشرده‌سازی کنترل‌شده و بررسی واقعی در دستگاه‌های مختلف به دست می‌آید. همیشه نسخه اصلی فایل‌های مهم را نگه دارید و اثر تغییرات را با داده اندازه‌گیری کنید.
