تصاویر باکیفیت برای معرفی محصول، آموزش و فروشگاه اینترنتی ضروری‌اند، اما اگر بدون فشرده‌سازی و راهبرد بارگذاری مناسب استفاده شوند، سرعت صفحه را پایین می‌آورند. در این آموزش، یک روش عملی برای بهینه‌سازی تصاویر وردپرس یاد می‌گیریم: انتخاب فرمت مناسب، تعیین اندازهٔ واقعی، فعال‌کردن Lazy Loading برای تصاویر خارج از صفحه و کنترل پرش چیدمان یا CLS.
Lazy Loading بارگذاری تصاویر غیرضروری را تا نزدیک‌شدن کاربر به آن‌ها عقب می‌اندازد و با تعیین ابعاد تصویر به کاهش CLS کمک می‌کند.
چرا تصاویر وردپرس روی سرعت اثر می‌گذارند؟
در پروژه‌های واقعی، بهینه‌سازی تصاویر وردپرس از سریع‌ترین راه‌های بهبود تجربهٔ کاربر است.
مرورگر معمولاً هنگام ساخت صفحه، منابعی را که در HTML می‌بیند درخواست می‌کند. در صفحه‌هایی که چندین تصویر گالری، مقاله یا محصول دارند، همهٔ این درخواست‌ها هم‌زمان روی شبکه و پردازنده فشار می‌آورند؛ حتی اگر کاربر هیچ‌وقت به بخش پایین صفحه نرسد. راهنمای MDN، Lazy Loading را روشی برای به‌تعویق‌انداختن منابع غیرضروری تا زمان نزدیک‌شدن به viewport معرفی می‌کند. این کار مسیر رندر اولیه را کوتاه‌تر می‌کند، اما باید برای تصویرهای مهم بالای صفحه استثنا قائل شد.
گام اول: تصویر را پیش از آپلود آماده کنید
ابتدا تصویر را با ابعاد واقعی محل نمایش خروجی بگیرید. قرار دادن یک تصویر ۳۰۰۰ پیکسلی در باکسی که نهایتاً ۸۰۰ پیکسل عرض دارد، فقط حجم اضافی ایجاد می‌کند. برای عکس‌ها معمولاً WebP یا AVIF انتخاب مناسبی است و برای تصاویر گرافیکی ساده باید خروجی و کیفیت را با نمونهٔ واقعی مقایسه کرد. نام فایل توصیفی، متن جایگزین دقیق و فشرده‌سازی بدون افت محسوس را هم در همین مرحله تنظیم کنید.
در وردپرس، از آپلود چند نسخهٔ بزرگ و بدون استفاده خودداری کنید. اگر قالب یا افزونه نسخه‌های مختلف thumbnail می‌سازد، اندازه‌های فعال را بررسی کنید تا رسانهٔ غیرضروری تولید نشود. هدف فقط کوچک‌کردن فایل نیست؛ هدف این است که مرورگر اندازه و محتوای مناسب را در زمان مناسب دریافت کند. این بخش پایهٔ بهینه‌سازی تصاویر وردپرس است.
گام دوم: Lazy Loading را فقط برای محتوای غیرضروری فعال کنید
برای تصویرهایی که پایین‌تر از بخش قابل‌مشاهده قرار دارند، ویژگی loading="lazy" باعث می‌شود مرورگر دانلود را تا نزدیک‌شدن کاربر به آن تصویر عقب بیندازد. در وردپرس جدید، بارگذاری تنبل بسیاری از تصاویر به‌صورت پیش‌فرض مدیریت می‌شود؛ بااین‌حال، در قالب‌های سفارشی باید HTML نهایی و رفتار افزونه‌های بهینه‌سازی را بررسی کنید.
تصویر اصلی، لوگوی بالای صفحه یا تصویری که در اولین viewport دیده می‌شود، معمولاً نباید Lazy باشد. برای این موارد، بارگذاری eager یا preload کنترل‌شده می‌تواند مناسب‌تر باشد. preload افراطی نتیجهٔ معکوس دارد، چون منابع غیرضروری را به ابتدای صف شبکه می‌آورد.
گام سوم: از پرش چیدمان و CLS جلوگیری کنید
Lazy Loading بدون ابعاد مشخص ممکن است هنگام رسیدن تصویر، متن صفحه را جابه‌جا کند. برای هر تصویر width و height درست یا نسبت تصویر در CSS تعریف کنید تا مرورگر از ابتدا فضای لازم را رزرو کند. راهنمای MDN نیز تأکید می‌کند که تصویر Lazy باید ابعاد مشخص داشته باشد؛ در غیر این صورت، فضای اولیهٔ تصویر صفر در نظر گرفته می‌شود و CLS افزایش می‌یابد.
نمونهٔ سادهٔ HTML:
“`html <img src=”product.webp” width=”۸۰۰″ height=”۶۰۰″ loading=”lazy” decoding=”async” alt=”نمای محصول در فروشگاه اینترنتی”> “`
برای تصویر اصلی بالای صفحه، همین ساختار را با loading="eager" یا بدون Lazy استفاده کنید. متن جایگزین باید تصویر را برای کاربر توضیح دهد، نه اینکه مجموعه‌ای از کلمات کلیدی مصنوعی باشد. در بهینه‌سازی تصاویر وردپرس، دسترسی‌پذیری را فدای سرعت نکنید.
گام چهارم: نتیجه را با ابزار واقعی بررسی کنید
پس از تغییرات، یک صفحهٔ واقعی را در حالت موبایل و دسکتاپ با Lighthouse یا PageSpeed Insights بررسی کنید. حجم تصویرهای اولیه، تعداد درخواست‌های شبکه، LCP و CLS را قبل و بعد مقایسه کنید. در DevTools، تب Network را باز کنید و ببینید تصویرهای پایین صفحه قبل از اسکرول بی‌دلیل دانلود نمی‌شوند. اگر تصویر بالای صفحه دیر نمایش داده شد، preload یا فرمت آن را بازبینی کنید؛ اگر چیدمان می‌پرد، ابعاد یا نسبت تصویر ناقص است.
چک‌لیست نهایی بهینه‌سازی تصاویر وردپرس
بهینه‌سازی تصاویر وردپرس یک گزینهٔ منفرد در افزونه نیست؛ ترکیبی از رسانهٔ سبک، HTML درست، بارگذاری زمان‌بندی‌شده و اندازه‌گذاری دقیق است. با همین روند می‌توان سرعت اولیه را بهتر کرد و هم‌زمان تجربهٔ کاربر و دسترسی‌پذیری را حفظ کرد. اگر تصاویر وردپرس را با این چک‌لیست بررسی کنید، نتیجه قابل‌اندازه‌گیری خواهد بود.
برای بررسی سایر نکات فنی سایت، راهنمای خدمات و آموزش‌های تکتاز را هم ببینید.
منبع اصلی: راهنمای Lazy Loading در MDN
