در یک ویدیوی جدید از Google، توسعه دهنده، Alan Kent، شش نکته برای بهینه سازی تصاویر برای وب سایت های تجارت الکترونیک به اشتراک می گذارد.
در حالی که این ویدیو به طور خاص برای سایت های تجارت الکترونیکی طراحی شده است، توصیه ها برای هر وب سایتی که تعداد زیادی تصویر ارائه می دهد قابل استفاده است.
با بیش از 14 دقیقه، ویدیوی Google برای هضم بسیار مفید است، اگر مشغول کار بر روی وب سایت هستید.
در اینجا یک ترکیب خوش طعم تر است که می توانید در کمتر از پنج دقیقه مصرف کنید.
اینها نکات گوگل برای بارگذاری سریعتر و کارآمدتر تصاویر هستند.
1. حذف تغییر چیدمان تجمعی تصویر (CLS)
CLS به مواردی اشاره دارد که در آن محتوا در صفحه به صورت بصری حرکت می‌کند یا در حین بارگذاری از یک مکان به مکان دیگر منتقل می‌شود.
در حالی که این مشکل منحصراً توسط تصاویر ایجاد نمی شود، اما در صورت استفاده نادرست می توانند به مشکل کمک کنند.
در بیشتر موارد، CLS با جستجوی حرکت در صفحه در حین بارگذاری آسان است، اما ابزارهای مختلفی برای اندازه گیری آن وجود دارد.
برای اطلاعات بیشتر در مورد CLS، نحوه اندازه گیری آن، و نحوه رفع آن، راهنمای جامع ما را ببینید:
2. اندازه تصاویر خود را به درستی تنظیم کنید
عرض و ارتفاع مناسب را برای تصاویر خود انتخاب کنید، زیرا دانلود فایل های بزرگتر زمان بیشتری می برد.
اندازه گیری صحیح تصاویر به دلیل طیف وسیعی از اندازه و وضوح صفحه نمایش که از سایت شما بازدید می کند، می تواند پیچیده باشد.
اگر مرورگر به تنهایی تصویر را برش دهد، اندازه دانلود بیشتر از حد مورد نیاز خواهد بود، که فقط چیزها را پایین می آورد.
یک راه آسان برای تشخیص تصاویر با اندازه نادرست استفاده از تصاویر با اندازه مناسب بخش فرصت ها در گزارش PageSpeed Insights.
هنگامی که تصاویر بزرگتر از حد لازم را شناسایی کردید، می توانید با راه حل هایی مانند تصاویر واکنش گرا مشکل را برطرف کنید.
3. از بهترین فرمت فایل تصویری استفاده کنید
به فرمت فایل تصاویر خود فکر کنید، مانند اینکه آیا از فایل های PNG، JPEG یا webP استفاده کنید.
فرمت فایل بر اندازه فایل تأثیر می گذارد، بنابراین انتخاب مناسب نیاز به بررسی دقیق دارد.
برای هر قالب جوانب مثبت و منفی وجود دارد. به عنوان مثال، JPEG و webP تمایل دارند اندازه فایل کمتری داشته باشند، اگرچه اندازه کوچکتر به قیمت کیفیت تصویر به دست می آید.
با این حال، کاهش کیفیت تصویر ممکن است توسط خریداران قابل توجه نباشد و مزیت سرعت می تواند قابل توجه باشد.
برای تشخیص اینکه آیا سایت شما می‌تواند از استفاده از فرمت تصویر متفاوت سود ببرد، به بخش نگاه کنید ارائه تصاویر در قالب های نسل بعدی بخش گزارش PageSpeed Insights. این گزارش تصاویری را فهرست می کند که می توانند به فرمت فایل کارآمدتری تبدیل شوند.
4. تصاویر را به طور مناسب فشرده کنید
از فاکتور کیفیت مناسب برای تصاویر خود استفاده کنید تا با حفظ کیفیت تصویر دلخواه، آنها را به طور موثر رمزگذاری کنید.
در کدگذاری تصاویر به طور موثر بخش گزارش PageSpeed Insights می تواند برای شناسایی تصاویری که کاندیدهای خوبی برای بهینه سازی فشرده سازی هستند استفاده شود. این گزارش همچنین کاهش بالقوه اندازه فایل را نشان می دهد.
برای یافتن فاکتور کیفیتی که از آن راضی هستید، از ابزار تبدیل تصویر انتخابی خود بر روی چندین تصویر با استفاده از مقادیر مختلف کیفیت استفاده کنید و قبل و بعد را با هم مقایسه کنید.
گوگل سایت Squoosh.app را به عنوان روشی آسان برای مقایسه تصاویر با و بدون فشرده سازی توصیه می کند.
5. ذخیره تصاویر در مرورگر
به مرورگر بگویید که چه مدت می تواند تصاویر را به صورت ایمن ذخیره کند.
هنگامی که تصویری را برمی‌گردانید، می‌توانید سرصفحه پاسخ HTTP را با راهنمایی ذخیره‌سازی ذخیره کنید، مانند مدت زمانی که مرورگر توصیه می‌کند یک تصویر را در حافظه پنهان نگه دارد.
مجدداً، می‌توانید از گزارش PageSpeed Insights برای تشخیص اینکه آیا هدرهای حافظه پنهان پاسخ HTTP به درستی در سایت شما تنظیم شده‌اند یا خیر، استفاده کنید.
در دارایی های ایستا را با سیاست کش کارآمد ارائه می دهد بخش تصاویری را که ممکن است از بهبود حافظه پنهان بهره مند شوند را شناسایی می کند.
برای رفع مشکلات سایت خود، ببینید آیا تنظیمات پلتفرم یا سرور وب دارید که می‌توانید برای تنظیم طول عمر حافظه پنهان برای تصاویر در سایت خود تغییر دهید.
اگر تصاویر را مرتباً تغییر نمی‌دهید، می‌توانید طول عمر کش طولانی را تعیین کنید.
6. دانلودهای تصویر خود را به درستی ترتیب دهید
به‌عنوان یک نکته پیشرفته‌تر، Google توصیه می‌کند ترتیبی که منابع صفحه وب دانلود می‌شوند به درستی ترتیب داده شوند.
ترتیب دانلود زیر توصیه می شود:
- تصاویر قهرمان در بالای صفحه
- تصاویر دیگر در بالای صفحه
- تصاویر درست زیر تاشو
بقیه تصاویر در یک صفحه وب ممکن است با تنبلی بارگذاری شوند.
برای تشخیص اینکه سایت شما تصاویر را به طور موثر بارگیری می کند، می توانید به گزارش PageSpeed Insights مراجعه کنید. در به تعویق انداختن تصاویر خارج از صفحه در بخش گزارش، فهرستی از تصاویری را مشاهده می کنید که می توانند پس از سایر تصاویر بارگذاری شوند.
برای جزئیات بیشتر در مورد هر یک از نکات بالا، ویدیوی کامل گوگل را در زیر ببینید:
تصویر ویژه: Tada Images/Shutterstock