آیا می‌دانستید **۵۳٪ کاربران موبایل** سایتی که بیش از ۳ ثانیه طول بکشد بارگذاری شود را ترک می‌کنند؟ سرعت سایت نه تنها برای رتبه سئو، بلکه برای فروش و نرخ تبدیل شما حیاتی است. در این راهنما، ۶ گام عملی برای بهینهسازی سرعت را با ابزارهای رایگان بررسی می‌کنیم.
گام ۱: تصاویر را بهینه کنید (بزرگ‌ترین برد)
تصاویر معمولاً ۶۰-۷۰٪ حجم کل یک صفحه وب را تشکیل می‌دهند. سه کار ساده اما موثر:
- تغییر اندازه: اگر تصویر شما ۴۰۰۰ پیکسل است اما در ۸۰۰ پیکسل نمایش داده می‌شود، حتماً ابعاد را کم کنید. از ابزار تغییر اندازه تصویر استفاده کنید.
- فشردهسازی: کیفیت را از ۱۰۰٪ به ۸۰٪ کاهش دهید. حجم نصف می‌شود اما کیفیت تفاوت محسوسی ندارد. با ابزار فشردهسازی این کار را انجام دهید.
- تبدیل فرمت: تصاویر JPG و PNG خود را به WebP تبدیل کنید. با ابزار تبدیل فرمت این کار ۳۰ ثانیه بیشتر طول نمی‌کشد.
گام ۲: کدهای CSS و JavaScript را کوچک کنید
فایل‌های CSS و JS می‌توانند به راحتی چند صد کیلوبایت شوند. برای کاهش حجم:
- فایل‌های CSS را با ابزارهای Minify کوچک کنید (حذف فاصله‌ها و کامنت‌ها).
- جاوااسکریپت غیرضروری را حذف یا با
deferبارگذاری کنید. - از ابزار JSON Minifier ما برای فایل‌های تنظیمات استفاده کنید.
گام ۳: Lazy Loading را فعال کنید
Lazy Loading به معنای "بارگذاری تصاویر و ویدیوها فقط زمانی که به آن‌ها نیاز است". در HTML مدرن، یک خط کد کافی است:
<img src="photo.jpg" loading="lazy" alt="...">این تکنیک ساده می‌تواند زمان بارگذاری اولیه صفحه را تا ۵۰٪ کاهش دهد.
گام ۴: فونت‌ها را سبک کنید
فونت‌های فارسی مانند وزیرمتن، اگر از نسخه کامل استفاده کنید، می‌توانند ۲۰۰ کیلوبایت یا بیشتر باشند. راه‌حل:
- از فونت woff2 استفاده کنید (۶۰٪ سبک‌تر از ttf).
- زیرمجموعه (subset) بسازید: فقط حروف و کاراکترهای موردنیاز را شامل شوید.
- از
<link rel="preload">برای فونت اصلی استفاده کنید.
گام ۵: از CDN استفاده کنید
اگر سایت شما بازدیدکنندگان از سراسر جهان دارد، استفاده از یک CDN (شبکه توزیع محتوا) ضروری است. این سرویس فایل‌های شما را در سرورهای نزدیک به کاربر کش می‌کند. برای پروژه‌های GitHub Pages (مثل همین سایت)، کش خود GitHub اصولاً خوب است، اما می‌توانید از Cloudflare رایگان هم استفاده کنید.
گام ۶: سئوی تصویر را جدی بگیرید
علاوه بر بهینهسازی فنی، برای هر تصویر باید متا تگ‌های مناسب داشته باشید. اگر سایت شما از CMS یا قالب استفاده می‌کند، می‌توانید با ابزار تولید متا تگ ما تگ‌های استاندارد بسازید.
چگونه پیشرفت را بسنجیم؟
برای اندازه‌گیری سرعت سایت از این ابزارهای استاندارد استفاده کنید:
- PageSpeed Insights (Google): تحلیل جامع با پیشنهادات.
- WebPageTest: تحلیل جزئی از سراسر جهان.
- GTmetrix: تحلیل سرعت با گزارش‌های گرافیکی.
جمع‌بندی
بهینهسازی سرعت یک فرآیند مداوم است، نه یک کار یک‌باره. با شروع از بزرگ‌ترین برد (تصاویر) و پیشرفت به سمت جزئیات کوچک‌تر (فونت، JS)، می‌توانید سرعت سایت خود را تا ۷۰٪ بهبود دهید. مهم‌تر از همه، همیشه بعد از هر تغییر، با PageSpeed Insights اندازه‌گیری کنید.