WebP و AVIF؛ سه برابر سبک‌تر با کیفیتی چشم‌نواز. این‌ها نکته‌هایی است که معمولاً پس از سال‌ها تجربه به دست می‌آید؛ اما ما فرجه‌ی سال‌ها صبر کردن را به شما نمی‌دهیم. در این مطلب، ده نکتهٔ طلایی دربارهٔ فرمت‌های تصویر نسل جدید را یکجا جمع کرده‌ایم تا مسیر را کوتاه‌تر و مطمئن‌تر طی کنید.
چرا «فرمت‌های تصویر نسل جدید» اهمیت دارد؟
تسلط بر «فرمت‌های تصویر نسل جدید» دیگر یک مزیت رقابتی نیست، شرط بقاست. کسب‌وکارهایی که آن را جدی گرفته‌اند، هزینهٔ جذب مشتری‌شان کمتر و نرخ بازگشت مشتری‌شان بیشتر شده است.
ده نکتهٔ طلایی
- تصاویر را به WebP یا AVIF تبدیل و به‌اندازهٔ واقعی نمایش بارگذاری کنید.
- بارگذاری تنبل (Lazy Load) را برای تصاویر پایین صفحه فعال کنید.
- کش مرورگر و کش سمت سرور را یکجا راه‌اندازی کنید؛ اثر دوگانه دارد.
- CSS و جاوااسکریپت را فشرده و هر چه غیرضروری است حذف کنید.
- فونت‌ها را محلی میزبانی و با display: swap بارگذاری کنید.
- تعداد درخواست‌ها را بشمارید؛ گاهی یک اسکریپت اضافه مخربی‌تر از صد تصویر است.
- تا جایی که می‌توانید از Preconnect و Preload برای منابع حیاتی استفاده کنید.
- زمان پاسخ اولیهٔ سرور (TTFB) را زیر ۶۰۰ میلی‌ثانیه نگه دارید.
- Lighthouse را در بررسی منظم هفتگی اجرا و گزارش آن را مقایسه کنید.
- اندازهٔ صفحه را زیر دو مگابایت نگه دارید؛ استاندارد طلایی موبایل.
مسیر اجرای درست
- هدف از فرمت‌های تصویر نسل جدید را تعریف کنید: دقیقاً چه نتیجه‌ای، برای چه کسی، تا چه زمانی می‌خواهید؟
- وضعیت فعلی را ممیزی کنید: چه دارید، چه کم دارید و نقطه‌ی آغاز واقعی‌تان کجاست؟
- اقدامها را بر اساس اثر و هزینه اولویت‌بندی کنید و از ساده‌ترین پراثر شروع کنید.
- اجرا را زمان‌بندی کنید و برای هر قدم یک مسئول مشخص تعیین کنید.
- نتیجه را با همان معیارهای مرحله‌ی اول بسنجید، از خطاها یاد بگیرید و چرخه را تکرار کنید.
جمع‌بندی
در این مسیر، تنها اشتباه واقعی، شروع نکردن است. حال که چارچوب «فرمت‌های تصویر نسل جدید» را می‌شناسید، امروز یکی از اقدام‌های همین مطلب را اجرا کنید و نتیجه‌اش را هفته‌ی آینده با ما در میان بگذارید. وب‌نگار هر هفته مطالب کاربردی بیشتری در «سرعت و عملکرد» منتشر می‌کند.