روشهای بهینهسازی پیشرفته تصاویر نسل جدید (WebP و AVIF) برای پرفورمنس ۱۰۰
تصاویر معمولاً بیشترین حجم پهنای باند لود صفحات وب را به خود اختصاص میدهند. بهینهسازی نکردن تصاویر یکی از شایعترین دلایل سرعت پایین سایت در لایتهاوس (Lighthouse) است.
استفاده از فرمتهای نسل جدید: WebP و AVIF
فرمتهای قدیمی مانند PNG و JPEG دیگر برای وب مناسب نیستند. فرمت WebP تا ۳۰٪ و فرمت AVIF تا ۵۰٪ حجم کمتری نسبت به JPEG در کیفیت مشابه دارند و سرعت لود را به شدت بالا میبرند.
بارگذاری تنبل (Lazy Loading) و لود اولویتدار (Fetch Priority)
تکنیک بارگذاری تنبل به مرورگر میگوید که تصویر را تا زمانی که کاربر به آن اسکرول نکرده لود نکند. در وردپرس این کار با اتریبیوت loading="lazy" انجام میشود. اما برای اولین تصویر بالای صفحه (LCP) نباید از لود تنبل استفاده کرد؛ بلکه باید از fetchpriority="high" استفاده کنیم:
<!-- تصویر هیرو بالای صفحه با اولویت بالا -->
<img src="hero.webp" fetchpriority="high" alt="Hero Image">
<!-- تصاویر بدنه مقاله با لود تنبل -->
<img src="content.webp" loading="lazy" alt="Content Image">
فرمت AVIF فشردهسازی بسیار قویتری دارد، اما در حال حاضر پشتیبانی مرورگرهای قدیمیتر از WebP کاملتر است. پیشنهاد میشود از هر دو به عنوان پشتیبان هم استفاده کنید.
بله، متن جایگزین یا Alt تصاویر به موتورهای جستجو کمک میکند موضوع تصویر را بفهمند و همچنین در بخش جستجوی تصاویر گوگل رتبه کسب کنید.