بارگذاری هوشمند تصویر؛ loading=lazy، fetchpriority و decoding در عمل

تصویرها معمولاً سنگین‌ترین بخش یک صفحه‌اند. بدون هیچ کتابخانه‌ای، چند ویژگی HTML می‌تواند هم سرعت بارگذاری و هم پایداری چیدمان را بهتر کند.

۱. lazy برای زیر صفحه

<img src="/img/card.webp" alt="..."
     width="800" height="450"
     loading="lazy" decoding="async">

loading="lazy" مرورگر را وادار می‌کند تصویرهای خارج از دید را دیرتر بارگذاری کند. decoding="async" هم اجازه می‌دهد رمزگشایی تصویر کار اصلی صفحه را مسدود نکند.

۲. تصویر اصلی را lazy نکنید

<img src="/img/hero.webp" alt="..."
     width="1600" height="900"
     fetchpriority="high">

تصویر بزرگ بالای صفحه (LCP) نباید lazy باشد؛ بهتر است با fetchpriority="high" به مرورگر بگویید زودتر دانلودش کند.

۳. ابعاد را مشخص کنید

• width و height (یا aspect-ratio در CSS) فضا را از قبل رزرو می‌کنند و از پرش چیدمان (CLS) جلوگیری می‌کنند.
• برای کاور خبرها یک نسبت ثابت مثل ۱۶:۹ انتخاب کنید و همهٔ تصویرها را با همان نسبت برش بزنید.
• از قالب‌های سبک مثل WebP یا AVIF و اندازهٔ مناسب با srcset استفاده کنید.

img.cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}