سایت شما روی دسکتاپ خودتان مثل برق و باد باز میشود. همه چیز عالیست. اما مشتری که با اینترنت همراه و گوشی موبایل وارد میشود، ۸ ثانیه به یک صفحه سفید خیره میماند و بعد منصرف میشود.
شما فکر میکنید مشکل از هاست است. یا از قالب. یا از اینترنت ضعیف مشتری.
اما حقیقت تلخ این است: در ۸۰٪ موارد، مقصر اصلی عکسهای سایت شما هستند. عکسهایی که با دوربین گوشی یا دوربین حرفهای گرفته شدهاند، مستقیم آپلود شدهاند، و هر کدام به اندازه یک فیلم کوتاه حجم دارند.
در این مطلب، این قاتل خاموش را زیر ذرهبین میبریم و راهحلهای ساده و عملی برای خلاصی از شر آن را بررسی میکنیم.
چرا عکس با حجم بالا قاتل خاموش است؟
یک عکس معمولی که با دوربین گوشی گرفته شده، بین ۳ تا ۸ مگابایت حجم دارد. حالا فرض کنید در صفحه اول سایت شما ۵ تا از این عکسها وجود دارد. یعنی مشتری باید حداقل ۲۰ مگابایت اطلاعات دانلود کند تا صفحه اول را ببیند.
حالا این را بگذارید کنار سرعت متوسط اینترنت موبایل در ایران (که در بسیاری مناطق بین ۱ تا ۳ مگابیت بر ثانیه است). نتیجه؟ صفحه شما بین ۱۵ تا ۳۰ ثانیه طول میکشد تا کامل باز شود.
تحقیقات گوگل نشان میدهد اگر بارگذاری صفحه بیشتر از ۳ ثانیه طول بکشد، ۵۳٪ کاربران موبایل صفحه را ترک میکنند. یعنی بیش از نیمی از مشتریان شما، حتی سایتتان را نمیبینند. آنها فقط یک صفحه سفید دیدهاند و رفتهاند.
سه اشتباه رایج در برخورد با عکسهای سایت
اشتباه اول: استفاده از عکس با ابعاد بزرگ و کوچک کردن آن با CSS
شما یک عکس ۴۰۰۰ پیکسلی را در جایگاهی قرار میدهید که فقط ۴۰۰ پیکسل عرض دارد. مرورگر مجبور است کل آن ۴۰۰۰ پیکسل را دانلود کند، بعد کوچکش کند. این یعنی هدر دادن ۹۰٪ پهنای باند مشتری.
اشتباه دوم: نفرین PNG برای عکسهای غیرشفاف
فرمت PNG برای لوگو و آیکون عالیست. اما برای عکس محصول یا بنر؟ فاجعه است. یک عکس با کیفیت در فرمت PNG میتواند ۵ برابر نسخه JPG یا WebP حجم داشته باشد.
اشتباه سوم: بیخیالی نسبت به فشردهسازی
حتی اگر ابعاد عکس درست باشد، باز هم اطلاعات اضافی (متادیتا، پروفایل رنگی، اطلاعات دوربین) در فایل وجود دارد که بدون افت محسوس کیفیت قابل حذف هستند. نرمافزارهای فشردهسازی این کار را برای شما انجام میدهند.
راهحل عملی: سه قدم تا رهایی
لازم نیست متخصص فتوشاپ باشید یا کدنویسی بلد باشید. سه قدم ساده کافیست:
قدم اول: تغییر ابعاد عکس قبل از آپلود
قبل از اینکه عکس را در وردپرس آپلود کنید، ببینید قرار است در چه عرضی نمایش داده شود.
- اگر عکس در عرض کامل صفحه است: حداکثر ۱۹۲۰ پیکسل عرض.
- اگر عکس در یک ستون کناری است: حداکثر ۸۰۰ پیکسل عرض.
- اگر عکس بندانگشتی محصول است: حداکثر ۴۰۰ پیکسل عرض.
ویندوز خودش ابزار ساده Paint را دارد. عکس را باز کنید، Resize را بزنید و عرض را تغییر دهید.
قدم دوم: فشردهسازی (Compression)
از ابزار آنلاین و رایگان TinyPNG.com استفاده کنید. عکس را در سایت آپلود کنید (حتی PNG)، نسخه فشرده را دانلود کنید. حجم عکس معمولاً ۷۰٪ کاهش مییابد بدون اینکه چشم انسان تفاوت را ببیند.
قدم سوم: استفاده از فرمت WebP (اگر ممکن است)
فرمت WebP توسط گوگل ابداع شده و حجم آن تا ۳۰٪ کمتر از JPG با همان کیفیت است. اگر از وردپرس استفاده میکنید، افزونههای رایگانی مثل WebP Express وجود دارند که خودکار عکسهای شما را به WebP تبدیل میکنند. (نکته: اگر نخواستید افزونه نصب کنید، همان TinyPNG برای JPG کافیست.)
یک تست سریع برای سایت خودتان
وارد سایت GTmetrix.com شوید. آدرس صفحه اول خود را بدهید.
بعد از چند ثانیه، گزارش را ببینید. به دنبال بخش “Avoid enormous network payloads” یا “Properly size images” بگردید.
اگر این بخشها قرمز یا نارنجی هستند، یعنی عکسهای شما قاتل سرعت سایتتان هستند.
خلاصه
سرعت سایت شما در موبایل، مستقیماً روی فروش و اعتبارتان تأثیر میگذارد.
قبل از اینکه سراغ خرید هاست گرانتر یا تغییر قالب بروید، یک نگاه به عکسهای سایتتان بیندازید.
شاید تنها چیزی که لازم دارید، یک دور فشردهسازی ساده باشد.
قاتل خاموش را بشناسید و از صفحه اول سایتتان بیرونش کنید. مشتریانتان با سرعت بیشتر، اعتماد بیشتری هم خواهند داشت.