پروژه‌ای را به یاد می‌آورم که در آن LCP موبایل ۵.۸ ثانیه بود و در گزارش PageSpeed، تصویر بنر به‌عنوان بزرگ‌ترین متهم مشخص شده بود. مشکل از سرور نبود، از قالب نبود، از افزونه‌ها هم نبود؛ خود تصویر بود. سال‌ها بعد، در پروژه‌های بهینه‌سازی CWV، فهمیدم که تصاویر، نقش مهمی در تمام سه معیار دارند: LCP، CLS و INP. کسی که این لایه را جدی بگیرد، بخش بزرگی از مشکلات CWV را قبل از اینکه ریشه بگیرند حل می‌کند. در این نوشته، همان چیزی را که در پروژه‌های واقعی یاد گرفته‌ام باز می‌کنم. اگر با مفهوم پایه‌ی فشرده‌سازی تصویر آشنایید، ادامه‌ی این مقاله به لایه‌ی عملیاتی همان موضوع می‌پردازد.

چرا تصاویر این‌قدر بر CWV اثر می‌گذارند؟

تصاویر، بزرگ‌ترین بخش حجم یک صفحه‌ی وب هستند. در پروژه‌هایی که سنجش انجام داده‌ام، تصاویر معمولاً بین ۵۰ تا ۷۰ درصد بایت‌های صفحه‌ی اول را تشکیل می‌دهند. اگر این بخش بهینه نشود، بیشترین اثر را روی سرعت صفحه و روی Core Web Vitals می‌گذارد. علاوه بر این، تصاویر، بیشترین اثر را در دو معیار دارند: LCP که بزرگ‌ترین عنصر دیدی را می‌سنجد و CLS که جابه‌جایی‌های چیدمان را می‌سنجد.

سه دلیل اصلی برای این اثر وجود دارد. اول، تصاویر بزرگ‌ترین بایت‌های صفحه را تشکیل می‌دهند و همین بر زمان بارگذاری اثر مستقیم دارد. دوم، تصاویر بدون ابعاد تعریف‌شده، باعث پرش چیدمان می‌شوند و CLS را بدتر می‌کنند. سوم، تصاویر اصلی صفحه، معمولاً LCP candidate هستند و کیفیت بهینه‌سازی‌شان بر این معیار اثر مستقیم دارد. مسیر کلی این موضوع را در Core Web Vitals چیست باز کرده‌ام و در سئوی تصویر چیست هم به لایه‌ی مکمل پرداخته‌ام.

تصاویر، بزرگ‌ترین و مظلوم‌ترین بخش بهینه‌سازی سرعت هستند؛ چون همه از اهمیتشان می‌دانند اما اکثر پروژه‌ها به‌درستی به آن‌ها نمی‌پردازند.

تأثیر تصاویر سنگین بر LCP

LCP (Largest Contentful Paint) بزرگ‌ترین عنصر دیدی در صفحه را می‌سنجد. در اکثر صفحات وب، این عنصر یک تصویر است: بنر بالای صفحه، تصویر شاخص نوشته، یا تصویر محصول. به همین دلیل، تصاویر سنگین، بیشترین اثر را روی LCP دارند. اگر تصویر LCP سنگین باشد، LCP به‌طور مستقیم بدتر می‌شود.

سه لایه‌ی اثر تصویر سنگین بر LCP:

  • حجم فایل: تصویر چند مگابایتی، نیازمند دانلود بیشتر است و همین، زمان LCP را افزایش می‌دهد.
  • نبود srcset: بدون نسخه‌های مختلف، موبایل همان فایل دسکتاپ را دانلود می‌کند.
  • lazy-load اشتباه: اعمال lazy روی تصویر اصلی، دانلود را به تأخیر می‌اندازد و LCP را بدتر می‌کند.

مسیر کامل این لایه را در LCP چیست و چگونه آن را بهینه کنیم باز کرده‌ام و در تصاویر ریسپانسیو چیست هم به بخش مکمل پرداخته‌ام.

تأثیر تصاویر سنگین بر CLS

CLS (Cumulative Layout Shift) جابه‌جایی‌های چیدمان در حین بارگذاری را می‌سنجد. تصاویر نقش مهمی در CLS دارند، اما به شکلی متفاوت از LCP. مسئله اینجا حجم نیست، بلکه ابعاد تعریف‌نشده است. اگر تصویر بدون width و height در تگ img ارائه شود، مرورگر نمی‌داند چه فضایی برای آن رزرو کند و همین باعث پرش چیدمان می‌شود. علاوه بر این، تصاویری که بعد از بارگذاری اولیه تزریق می‌شوند (مثل بنرهای تبلیغاتی) می‌توانند کل صفحه را جابه‌جا کنند.

سه لایه‌ی اثر تصویر بر CLS:

  • نبود ابعاد: تصویر بدون width و height، فضایی رزرو نمی‌کند و بعد از بارگذاری، صفحه را هل می‌دهد.
  • تزریق دیرهنگام: تصاویری که با JS تزریق می‌شوند، بعد از بارگذاری اولیه ظاهر می‌شوند و چیدمان را جابه‌جا می‌کنند.
  • نبود aspect-ratio: در حالت‌های خاص که ابعاد تصویر در CSS تعریف می‌شود، نبود aspect-ratio می‌تواند CLS ایجاد کند.

مسیر کامل این لایه را در CLS چیست و چگونه کاهش می‌یابد باز کرده‌ام و در بهینه‌سازی تصاویر برای موبایل هم به بخش مکمل پرداخته‌ام.

تأثیر تصاویر سنگین بر INP

INP (Interaction to Next Paint) پاسخ‌گویی سایت به تعاملات کاربر را می‌سنجد. تصاویر به‌طور مستقیم روی INP اثر ندارند، اما به‌طور غیرمستقیم می‌توانند اثر داشته باشند. اگر سایت شما تصاویر زیادی دارد که همزمان با تعاملات کاربر بارگذاری می‌شوند، این بارگذاری‌ها می‌توانند main thread را مسدود کنند و INP را بدتر کنند. همچنین، جاوااسکریپت‌هایی که برای مدیریت تصاویر استفاده می‌شوند (مثل اسلایدرهای تصویری، گالری‌های تصویری) می‌توانند INP را بدتر کنند.

سه لایه‌ی اثر تصویر بر INP:

  • همزمانی بارگذاری: بارگذاری چند تصویر بزرگ همزمان با تعامل کاربر.
  • JS مدیریت تصویر: اسلایدرها و گالری‌ها، main thread را مسدود می‌کنند.
  • تبدیل تصویر سمت کاربر: فشرده‌سازی یا تبدیل تصویر در مرورگر، main thread را سنگین می‌کند.

مسیر این لایه را در INP چیست و چه تاثیری بر تجربه کاربر دارد باز کرده‌ام و در LCP چیست و چگونه آن را بهینه کنیم هم به لایه‌ی مکمل پرداخته‌ام.

چگونه تصویر سنگین را شناسایی کنیم؟

شناسایی تصویر سنگین، اولین قدم بهینه‌سازی است. سه مسیر اصلی برای این شناسایی:

  1. PageSpeed Insights: در گزارش میدانی و آزمایشگاهی، بزرگ‌ترین فایل‌های صفحه فهرست می‌شوند.
  2. Chrome DevTools و پنل Network: با مرتب‌سازی بر اساس حجم، بزرگ‌ترین تصاویر مشخص می‌شوند.
  3. Lighthouse: در بخش Performance، گزارش دقیقی از تصاویر ارائه می‌دهد.

در پروژه‌ها، سه لایه‌ی تصویر را اولویت‌بندی می‌کنم:

  • تصویر LCP: بالاترین اولویت، چون بیشترین اثر را بر LCP دارد.
  • تصاویر پربازدید: تصاویری که در صفحات پربازدید نمایش داده می‌شوند.
  • تصاویر بزرگ: تصاویری که بالای ۵۰۰ کیلوبایت حجم دارند.

مسیر این شناسایی را در ابزارهای سنجش Core Web Vitals باز کرده‌ام و در بهترین افزونه‌های بهینه‌سازی تصویر هم به ابزارهای مکمل پرداخته‌ام.

راه‌حل‌های اختصاصی برای LCP

بهینه‌سازی LCP تصویر، سه لایه دارد:

  1. فشرده‌سازی متعادل: تصویر اصلی صفحه نباید بیش از حد فشرده شود اما نباید در حجم بزرگ بماند. فشرده‌سازی متعادل، معمولاً حجم را ۵۰ تا ۷۰ درصد کاهش می‌دهد بدون افت محسوس کیفیت.
  2. انتخاب فرمت بهینه: WebP یا AVIF برای تصاویر فتوگرافیک، WebP بدون اتلاف برای گرافیک.
  3. srcset و sizes: ارائه‌ی نسخه‌های مختلف بر اساس ابعاد نمایش.
  4. Eager loading و fetchpriority: تصویر اصلی صفحه باید بدون lazy بارگذاری شود و در صورت امکان با fetchpriority="high" علامت‌گذاری شود.
<img src="hero.webp"
     fetchpriority="high"
     width="1200"
     height="600"
     alt="بنر اصلی">

مسیر کامل این ساختار را در LCP چیست و چگونه آن را بهینه کنیم باز کرده‌ام و در Core Web Vitals در وردپرس چگونه بهبود می‌یابد هم به لایه‌ی پیاده‌سازی پرداخته‌ام.

راه‌حل‌های اختصاصی برای CLS

بهینه‌سازی CLS تصویر، سه اصل دارد:

  1. تعریف ابعاد در تگ img: همیشه width و height تعریف شود.
  2. استفاده از aspect-ratio در CSS: برای تصاویر ریسپانسیو، از aspect-ratio استفاده شود.
  3. رزرو فضای بنرها: بنرهای دیرهنگام، باید فضای ثابت داشته باشند تا پرش ایجاد نکنند.
img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

مسیر کامل این ساختار را در CLS چیست و چگونه کاهش می‌یابد باز کرده‌ام و در چگونه Core Web Vitals را بهبود دهیم هم به لایه‌ی مکمل پرداخته‌ام.

تصویر بدون ابعاد، یک بمب CLS است. تصویر با ابعاد تعریف‌شده، فضای خود را رزرو می‌کند و اجازه نمی‌دهد چیدمان جابه‌جا شود.

راه‌حل‌های اختصاصی برای INP

بهینه‌سازی INP مرتبط با تصاویر، سه اصل دارد:

  1. تأخیر بارگذاری تصاویر غیرضروری: تصاویری که در دید اولیه نیستند، با lazy بارگذاری شوند.
  2. پرهیز از اسلایدرهای سنگین: اسلایدرهای تصویری، main thread را مسدود می‌کنند. ساده‌سازی یا حذف، گاهی انتخاب بهتری است.
  3. جدا کردن جاوااسکریپت غیرضروری: JS مدیریت تصاویر، در صورت امکان به خارج از main thread منتقل شود.

مسیر کامل این ساختار را در INP چیست و چه تاثیری بر تجربه کاربر دارد باز کرده‌ام.

اولویت‌بندی اقدامات

بهینه‌سازی تصویر برای CWV، پروژه‌ای است که نیاز به اولویت‌بندی دارد. در پروژه‌ها، ترتیب زیر را اجرا می‌کنم:

  1. شناسایی تصویر LCP هر صفحه‌ی کلیدی: ابتدا بزرگ‌ترین اثر مشخص شود.
  2. بازنویسی تصویر LCP: فشرده‌سازی متعادل، فرمت بهینه، srcset، eager loading، ابعاد تعریف‌شده.
  3. بازنویسی سایر تصاویر صفحات پرترافیک: لایه‌ی دوم، تصاویر پرتکرار صفحات پربازدید.
  4. پایش مستمر: جدول ماهانه LCP، CLS و INP.

مسیر کامل این اولویت‌بندی را در Core Web Vitals در وردپرس چگونه بهبود می‌یابد باز کرده‌ام و در ابزارهای سنجش Core Web Vitals هم به لایه‌ی سنجش پرداخته‌ام.

چگونه تأثیر تصاویر را بسنجیم؟

سنجش تأثیر تصاویر بر CWV، سه شاخص کلیدی دارد:

  1. LCP موبایل: این شاخص، بیشترین اثر را از تصاویر می‌گیرد.
  2. CLS موبایل: به‌خصوص در صفحاتی که تصاویر دیرهنگام دارند.
  3. حجم صفحه: کل بایت‌های صفحه‌ی اول، به تفکیک تصاویر و سایر منابع.

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

پرسش‌های پرتکرار درباره تصاویر سنگین و CWV

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

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

چرا LCP من روی موبایل بدتر از دسکتاپ است؟

معمولاً به دلیل سه عامل: تفاوت سرعت شبکه، تفاوت قدرت پردازش، و بزرگ بودن بیش از حد تصویر اصلی صفحه برای موبایل. راه‌حل، استفاده از srcset برای ارائه‌ی نسخه‌ی موبایل با ابعاد مناسب و ترکیب با فرمت بهینه مثل WebP است.

آیا تبدیل همه‌ی تصاویر به WebP برای CWV کافی است؟

خیر. تبدیل فرمت یکی از لایه‌های بهینه‌سازی است. لایه‌های دیگر مثل فشرده‌سازی، ابعاد مناسب، srcset، eager loading و ابعاد تعریف‌شده هم مهم هستند. تبدیل فرمت بدون این لایه‌ها، اثر محدودی دارد.

چرا تصویر اصلی صفحه نباید lazy-load شود؟

چون lazy-load به مرورگر می‌گوید تصویر را فقط زمانی دانلود کن که در دید کاربر قرار بگیرد. برای تصویر اصلی که در ثانیه‌ی اول بارگذاری در دید کاربر است، این رویکرد باعث تأخیر در دانلود و بدتر شدن LCP می‌شود. تصویر اصلی باید با eager loading یا fetchpriority high بارگذاری شود.

آیا نبود ابعاد تصویر بر CLS اثر دارد؟

بله، و این یکی از دلایل اصلی CLS بالا در سایت‌هاست. تصویر بدون width و height، فضایی رزرو نمی‌کند و بعد از بارگذاری، چیدمان را جابه‌جا می‌کند. تعریف ابعاد (یا aspect-ratio) این مشکل را حل می‌کند.

آیا تصاویر می‌توانند بر INP اثر داشته باشند؟

به‌طور غیرمستقیم، بله. اگر تصاویر زیادی همزمان با تعامل کاربر بارگذاری شوند، main thread مسدود می‌شود و INP بدتر می‌شود. همچنین اسلایدرها و گالری‌های تصویری سنگین که با JS مدیریت می‌شوند، می‌توانند INP را بدتر کنند.

آیا ابزارهای بهینه‌سازی، جایگزین تصویربرداری درست نیستند؟

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

آنچه تصاویر سنگین را از یک تهدید به یک فرصت تبدیل می‌کند

اگر بخواهم سال‌ها کار با تصاویر و CWV را در یک نکته خلاصه کنم، این است: تفاوت میان سایتی که از تصاویر سنگین آسیب می‌بیند و سایتی که از این لایه بیشترین بهره را می‌برد، در «کدام تصویر» و «کدام هدف» است. تصاویر، بزرگ‌ترین بخش حجم صفحه هستند و همین یعنی بزرگ‌ترین فرصت بهینه‌سازی. کسی که این فرصت را جدی بگیرد، در هر لایه از CWV اثر محسوس می‌بیند.

سه حرکت عملی که تصاویر سنگین را به یک فرصت تبدیل می‌کند:

  1. شناسایی دقیق تصویر LCP هر صفحه و بازنویسی آن با فشرده‌سازی متعادل، فرمت بهینه، srcset و eager loading.
  2. تعریف ابعاد در تگ img یا استفاده از aspect-ratio در CSS برای همه‌ی تصاویر.
  3. پایش ماهانه‌ی LCP، CLS و INP در بازه‌های دوهفته‌ای، قبل و بعد از هر تغییر مهم.

آینده‌ی CWV، به‌سمت تمرکز بیشتر بر تجربه‌ی موبایل و شبکه‌های محدود حرکت می‌کند. مسیر این تحول را در ترندهای Core Web Vitals در 2026 باز کرده‌ام و در اشتباهات رایج در بهینه‌سازی Core Web Vitals هم به لایه‌ی مکمل پرداخته‌ام. اگر تجربه‌ی شما در مسیر بهینه‌سازی تصویر و CWV متفاوت بوده — مخصوصاً در بخش پروژه‌های فروشگاهی یا پربازدید — در دیدگاه‌ها بنویسید؛ تجربه‌ی واقعی شما برای خواننده‌ی بعدی این مقاله ارزشمندتر از هر توصیه‌ی کلی است. ⚡