در یک ویدیوی جدید از Google، وکیل توسعه‌دهنده آلن کنت، شش نکته را برای بهینه‌سازی تصاویر برای وب‌سایت‌های تجارت الکترونیک به اشتراک می‌گذارد.
در حالی که هدف این ویدیو به طور خاص سایت‌های تجارت الکترونیک است، این توصیه برای هر وب‌سایتی که تعداد زیادی تصویر ارائه می‌کند قابل اجرا است.
اگر مشغول کار بر روی وب‌سایت‌ها هستید، ویدیوی Google با زمان بیش از ۱۴ دقیقه قابل هضم است.
در اینجا یک خلاصه خوشمزه‌تر وجود دارد که می‌توانید در کمتر از پنج دقیقه مصرف کنید.
اینها نکات Google برای بارگیری سریعتر و کارآمدتر تصاویر هستند.
۱. تغییر چیدمان تجمعی تصویر (CLS)
را حذف کنید
CLS به مواردی اشاره دارد که در آن محتوا در صفحه به صورت بصری حرکت می‌کند یا در حین بارگیری از یک مکان به مکان دیگر منتقل می‌شود.
اگرچه این مشکل منحصراً توسط تصاویر ایجاد نمی‌شود، اما در صورت استفاده نادرست، می‌توانند به مشکل کمک کنند.
در اکثر موارد، CLS با جستجوی حرکت در صفحه در حین بارگیری آسان است، اما چندین ابزار برای اندازه‌گیری آن وجود دارد.
برای اطلاعات بیشتر در مورد CLS، نحوه اندازه‌گیری آن، و نحوه رفع آن، به راهنمای جامع ما مراجعه کنید:
- نگاه کنید به: تغییر چیدمان تجمعی – مروری بر فاکتور رتبه بندی گوگل ۲۰۲۱
۲. تصاویر خود را به درستی اندازه بگیرید
عرض و ارتفاع مناسب را برای تصاویر خود انتخاب کنید، زیرا دانلود فایل های بزرگتر زمان بیشتری می برد.
به دلیل گستره اندازه‌های صفحه نمایش و وضوح تصویری که از سایت شما بازدید می‌کنند، اندازه‌گیری صحیح تصاویر می‌تواند پیچیده باشد.
اگر مرورگر به خودی خود تصویر را برش دهد، اندازه دانلود بیشتر از حد مورد نیاز است، که فقط موارد را پایین می‌آورد.
یک راه آسان برای تشخیص تصاویر با اندازه نادرست، استفاده از بخش تصاویر با اندازه مناسب در زیر فرصت‌ها در گزارش PageSpeed Insights است.
وقتی تصاویر بزرگتر از حد لازم را شناسایی کردید، می‌توانید با راه‌حل‌هایی مانند تصاویر واکنش‌گرا مشکل را برطرف کنید.
۳. از بهترین فرمت فایل تصویری
استفاده کنید
به فرمت فایل تصاویر خود فکر کنید، مانند اینکه آیا از فایل های PNG، JPEG یا webP استفاده کنید.
فرمت فایل بر اندازه فایل تأثیر می‌گذارد، بنابراین انتخاب مناسب نیاز به بررسی دقیق دارد.
مزایا و معایبی برای هر قالب وجود دارد. به عنوان مثال، JPEG و webP معمولاً اندازه فایل‌های کمتری دارند، اگرچه اندازه کوچک‌تر به قیمت کاهش کیفیت تصویر به دست می‌آید.
با این حال، کاهش کیفیت تصویر ممکن است توسط خریداران قابل توجه نباشد و مزیت سرعت می تواند قابل توجه باشد.
برای تشخیص اینکه آیا سایت شما می‌تواند از استفاده از قالب‌های تصویر متفاوت سود ببرد، به بخش ارائه تصاویر در قالب‌های نسل بعدی در گزارش PageSpeed Insights نگاه کنید. این گزارش تصاویری را فهرست می‌کند که می‌توانند به فرمت فایل کارآمدتری تبدیل شوند.
۴. فشرده سازی تصاویر به طور مناسب
از فاکتور کیفیت مناسب برای تصاویر خود استفاده کنید تا با حفظ کیفیت تصویر دلخواه، آنها را به طور موثر رمزگذاری کنید.
بخش Encode Images Efficiently در گزارش PageSpeed Insights می‌تواند برای شناسایی تصاویری که کاندیدهای خوبی برای بهینه‌سازی فشرده‌سازی هستند استفاده شود. این گزارش همچنین میزان صرفه جویی در اندازه فایل را نشان می دهد.
برای یافتن فاکتور کیفیتی که از آن راضی هستید، از ابزار تبدیل تصویر انتخابی خود در چندین تصویر با استفاده از مقادیر مختلف کیفیت استفاده کنید و قبل و بعد را با هم مقایسه کنید.
Google سایت Squoosh.app را به عنوان روشی آسان برای مقایسه تصاویر با و بدون فشرده سازی توصیه می کند.
۵. تصاویر کش در مرورگر
به مرورگر بگویید که چه مدت می تواند تصاویر را به صورت ایمن در حافظه پنهان نگه دارد.
هنگامی که تصویری را برمی‌گردانید، می‌توانید سرصفحه پاسخ HTTP را با راهنمایی ذخیره‌سازی ذخیره کنید، مانند مدت زمانی که مرورگر توصیه می‌کند یک تصویر را در حافظه پنهان نگه دارد.
دوباره، می‌توانید از گزارش PageSpeed Insights برای تشخیص اینکه آیا هدرهای حافظه پنهان پاسخ HTTP به درستی در سایت شما تنظیم شده‌اند یا خیر، استفاده کنید.
بخش سرویس دارایی‌های ایستا با خط‌مشی حافظه پنهان کارآمد تصاویری را که ممکن است از بهبودهای حافظه پنهان بهره مند شوند، شناسایی می‌کند.
برای رفع مشکلات سایت خود، ببینید آیا تنظیمات پلتفرم یا سرور وب دارید که می‌توانید برای تنظیم طول عمر حافظه پنهان برای تصاویر در سایت خود تغییر دهید.
اگر تصاویر را مرتباً تغییر نمی‌دهید، می‌توانید طول عمر کش طولانی تعیین کنید.
۶. دانلودهای تصویر خود را به درستی ترتیب دهید
به‌عنوان یک نکته پیشرفته‌تر، Google توصیه می‌کند ترتیبی که منابع صفحه وب دانلود می‌شوند به‌طور صحیح ترتیب داده شوند.
ترتیب دانلود زیر توصیه می شود:
- تصاویر قهرمان در بالای صفحه
- سایر تصاویر بالای تاشو
- تصاویر درست در زیر تاشو
بقیه تصاویر در یک صفحه وب ممکن است با تنبلی بارگیری شوند.
برای تشخیص اینکه سایت شما تصاویر را به طور موثر بارگیری می کند، می توانید به گزارش PageSpeed Insights مراجعه کنید. در بخش تعویق تصاویر خارج از صفحه گزارش، فهرستی از تصاویری را می‌بینید که می‌توانند پس از تصاویر دیگر بارگیری شوند.
برای جزئیات بیشتر در مورد هر یک از نکات بالا، ویدیوی کامل Google را در زیر ببینید:
تصویر ویژه: Tada Images/Shutterstock
