چک لیست فشرده سازی تصاویر برای افزایش سرعت سایت

چرا تصاویر مهم‌ترین لایه سرعت هستند

در بیشتر صفحات وب، حجم تصاویر بخش بزرگی از کل حجم صفحه را تشکیل می‌دهد؛ گاهی بیشتر از نیمی از آنچه مرورگر باید دانلود کند. وقتی این حجم پایین بیاید، هم زمان بارگذاری کوتاه‌تر می‌شود و هم معیارهای Core Web Vitals گوگل بهتر می‌شوند. دو تا از این معیارها مستقیم به تصاویر گره خورده‌اند:

LCP (سرعت نمایش محتوای اصلی) هدفش زیر ۲.۵ ثانیه است و عامل اصلی خرابی آن معمولا تصاویر سنگین است، مخصوصا اگر تصویر اصلی بالای صفحه دیر لود شود. CLS (پایداری چیدمان) هدفش زیر ۰.۱ است و وقتی خراب می‌شود که تصاویر ابعاد مشخصی در HTML نداشته باشند و صفحه حین لود شدن تصویر جابه جا شود.

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

چک لیست فشرده سازی تصاویر

این موارد را به ترتیب روی تصاویر سایت خودتان اجرا کنید:

• تبدیل به فرمت WebP یا AVIF: این دو فرمت نسبت به JPG و PNG قدیمی، با کیفیت تقریبا یکسان، حجم فایل را به شکل محسوسی پایین می‌آورند. اگر سایت وردپرسی است، افزونه‌های تبدیل خودکار این کار را بدون دست زدن به فایل‌های اصلی انجام می‌دهند.
• فشرده سازی بدون افت کیفیت قابل مشاهده: فشرده سازی lossless حجم را کم می‌کند بدون هیچ افتی، و lossy در حد معقول (نه فشرده سازی افراطی) هم افت کیفیت محسوسی برای چشم ایجاد نمی‌کند اما حجم را باز هم پایین‌تر می‌برد. تعادل بین این دو را برای تصاویر محصول و بنر که کیفیت مهم است، با احتیاط بیشتری انتخاب کنید.
• تعیین ابعاد دقیق width و height در HTML: وقتی مرورگر از قبل می‌داند تصویر چه اندازه‌ای دارد، برای آن جا باز می‌کند و بقیه محتوا حین لود شدن تصویر جابه جا نمی‌شود. این یکی از ساده‌ترین راه‌ها برای درست کردن CLS است و اغلب فراموش می‌شود.
• آپلود ابعاد واقعی متناسب با محل نمایش: اگر تصویری قرار است در عرض ۴۰۰ پیکسل نمایش داده شود، آپلود یک فایل ۴۰۰۰ پیکسلی و کوچک کردنش با CSS فقط حجم اضافه دانلود می‌کند بدون هیچ فایده‌ای در کیفیت دیده شده. تصویر را در همان اندازه‌ای که واقعا نمایش داده می‌شود آماده کنید.
• تصاویر ریسپانسیو با srcset: موبایل و دسکتاپ نیاز به یک اندازه تصویر ندارند. با srcset، مرورگر بسته به عرض صفحه نمایش، نسخه کوچک‌تر یا بزرگ‌تر را انتخاب می‌کند و کاربر موبایل مجبور به دانلود نسخه دسکتاپ نیست.
• Lazy Load برای تصاویر پایین صفحه: تصاویری که کاربر تا اسکرول نکند نمی‌بیند، نباید همزمان با بار اول صفحه دانلود شوند. این کار زمان تا تعاملی شدن صفحه را کوتاه‌تر می‌کند.
• لود فوری تصویر اصلی و بالای صفحه: برعکس مورد قبل، تصویری که همان لحظه اول دیده می‌شود (معمولا همان چیزی که LCP را می‌سازد) نباید Lazy Load شود؛ باید فوری و با اولویت بالا لود شود، وگرنه خود Lazy Load باعث کند شدن LCP می‌شود.
• حذف متادیتای اضافه فایل: بسیاری از تصاویر، مخصوصا آن‌هایی که مستقیم از دوربین یا گوشی می‌آیند، اطلاعات اضافه‌ای مثل مختصات جغرافیایی و تنظیمات دوربین در خود فایل دارند که هیچ کاربردی برای سایت ندارد و فقط چند کیلوبایت اضافه اضافه می‌کند.

از کجا بفهمیم تصاویر سایت مشکل دارند

ساده‌ترین راه، تست PageSpeed Insights یا ابزارهای مشابه است؛ اگر در بخش فرصت‌ها مواردی مثل «Serve images in next-gen formats»، «Properly size images» یا «Efficiently encode images» دیدید، همان جایی است که این چک لیست باید اجرا شود. اگر LCP صفحه بالای ۲.۵ ثانیه است و تصویر اصلی صفحه، عامل آن گزارش شده، باز هم نشانه همین است.

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

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

روش دستی در مقابل خودکار

دو مسیر کلی برای اجرای این چک لیست وجود دارد. مسیر اول، ابزارهای آنلاین یا نرم افزار دسکتاپ فشرده سازی تصویر است که قبل از آپلود، هر فایل را دستی پردازش می‌کنید. این روش برای سایت‌های کوچک با تعداد تصویر محدود قابل مدیریت است، اما برای سایتی با صدها یا هزاران تصویر عملی نیست و هر بار محتوای جدید اضافه می‌شود باید دوباره تکرار شود.

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

چه کاری نمی‌کنیم

صادقانه بگوییم فشرده سازی تصاویر همه چیز را حل نمی‌کند. اگر سرور کند است یا نسخه PHP قدیمی است، تصاویر سبک هم کمک چندانی نمی‌کنند. اگر دیتابیس سایت متورم و کوئری‌ها کند هستند، آن مشکل جای دیگری است. اگر کد CSS و JavaScript سایت حجیم و بدون فشرده سازی است، همچنان رندر صفحه کند می‌ماند. تصاویر یک لایه از چند لایه سرعت هستند؛ مهم‌ترین لایه در اغلب سایت‌ها، اما نه تنها لایه. اگر بعد از اجرای این چک لیست هنوز سایت کند است، احتمالا مشکل جای دیگری است و باید کل زیرساخت بررسی شود، نه فقط تصاویر.

همچنین این کار مستقیم روی سئوی سایت هم اثر می‌گذارد، چون Core Web Vitals بخشی از رتبه بندی گوگل است؛ اگر هدف نهایی رتبه بهتر در گوگل است، بهینه سازی تصاویر را در کنار سئو سایت ببینید، نه جدا از آن.

پرسش‌های متداول

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

در حالت lossless نه، هیچ افتی نیست. در حالت lossy در حد معقول هم افت کیفیت برای چشم انسان معمولا محسوس نیست، در حالی که حجم فایل به شکل قابل توجهی کم می‌شود. مشکل زمانی پیش می‌آید که فشرده سازی افراطی و بی دقت انجام شود.

WebP بهتر است یا AVIF؟

هر دو نسبت به JPG و PNG قدیمی حجم کمتری دارند. AVIF معمولا حجم کمتری هم نسبت به WebP می‌دهد، ولی پشتیبانی مرورگرها از WebP گسترده‌تر و قدیمی‌تر است. راهکار امن، آماده کردن هر دو فرمت و اجازه دادن به مرورگر برای انتخاب بهترین گزینه موجود است.

Lazy Load روی همه تصاویر لازم است؟

نه. تصویری که همان لحظه اول بارگذاری صفحه دیده می‌شود، مخصوصا اگر همان تصویری باشد که LCP را می‌سازد، نباید Lazy Load شود چون این کار خودش تاخیر ایجاد می‌کند. Lazy Load فقط برای تصاویری منطقی است که کاربر باید اسکرول کند تا ببیندشان.

اگر خودم وقت اجرای این چک لیست را ندارم چه کنم؟

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