بهینه‌سازی سرعت سایت برای موبایل

در یکی از پروژه‌های فروشگاهی که سال گذشته روی آن کار می‌کردم، سایت در دسکتاپ LCP ۱.۸ ثانیه داشت و همه راضی بودند. اما وقتی روی یک گوشی میان‌رده اندروید با اینترنت ۴G تست کردیم، LCP به ۵.۲ ثانیه رسید. مشکل این بود که تیم تمام تست‌ها را در Chrome دسکتاپ انجام داده بود و شرایط موبایل واقعی را شبیه‌سازی نکرده بود. بهینه‌سازی سرعت موبایل، نه‌فقط یک نسخه کوچک‌شده از بهینه‌سازی دسکتاپ است، بلکه یک حوزه تخصصی است که شرایط منحصر به فرد شبکه، CPU و رفتار کاربر را در نظر می‌گیرد. در این مقاله، بر اساس تجربه‌های مهندسی، بهینه‌سازی سرعت موبایل را بررسی می‌کنم.

طبق گزارش Statista، بیش از ۶۰ درصد از ترافیک وب در ۲۰۲۶ از دستگاه‌های موبایل می‌آید و این عدد در برخی از کشورها به ۷۵ درصد می‌رسد. طبق گزارش Google، هر ۱۰۰ میلی‌ثانیه تأخیر اضافی در موبایل، ۱.۲ درصد کاهش نرخ تبدیل به همراه دارد. طبق گزارش Akamai، ۵۳ درصد از کاربران موبایل، سایتی که بیش از ۳ ثانیه طول می‌کشد را رها می‌کنند. در ۲۰۲۶، با Mobile-First Indexing گوگل، سرعت موبایل به یک سیگنال رتبه‌بندی تبدیل شده است. اگر با مفاهیم پایه‌ای سرعت آشنا نیستید، ابتدا بهینه‌سازی سرعت سایت چیست و Core Web Vitals چیست را مطالعه کنید.

چرا موبایل متفاوت است؟

بهینه‌سازی موبایل با دسکتاپ چهار تفاوت بنیادین دارد که درک آن‌ها برای هر تصمیم بهینه‌سازی حیاتی است.

سه نتیجه عملی این تفاوت‌ها: اول، JavaScript موبایل ۴-۶ برابر کندتر اجرا می‌شود. دوم، تصاویر بزرگ موبایل، LCP را به شدت خراب می‌کنند. سوم، هر درخواست اضافی شبکه، در موبایل گران‌تر است.

طبق گزارش Google، LCP در موبایل به طور میانگین ۳.۱ ثانیه است، در حالی که در دسکتاپ ۲.۵ ثانیه است. این ۰.۶ ثانیه تفاوت، در تجربه کاربری و نرخ تبدیل اثر مستقیم دارد. اگر با طراحی ریسپانسیو آشنا نیستید، طراحی ریسپانسیو چیست و وب استانداردها در طراحی ریسپانسیو را مطالعه کنید.

موبایل، دسکتاپ کوچک نیست. تفاوت‌ها در شبکه، CPU و Battery، موبایل را به یک Platform جداگانه تبدیل می‌کند. بهینه‌سازی موبایل، نه ساده‌سازی، بلکه تخصصی‌سازی است.

Core Web Vitals در موبایل

Core Web Vitals سه معیار اصلی تجربه کاربری است که در موبایل، آستانه‌های متفاوتی دارند. جدول زیر، آستانه‌های ۲۰۲۶ را نشان می‌دهد.

نکات مهم: اول، Google از داده‌های میدانی موبایل برای رتبه‌بندی استفاده می‌کند. دوم، INP در موبایل به دلیل CPU محدود، چالش‌برانگیزتر است. سوم، CLS در موبایل به دلیل استفاده از انگشت، آزاردهنده‌تر است. چهارم، LCP در موبایل به دلیل شبکه کند، به شدت متأثر از TTFB است. پنجم، استفاده از CrUX برای پایش ضروری است. اگر با CWV آشنا نیستید، ابزارهای سنجش CWV را مطالعه کنید.

شبکه‌های موبایل و محدودیت‌ها

شبکه موبایل با دسکتاپ، تفاوت‌های بنیادین دارد. سه عامل اصلی: Bandwidth، Latency و Stability.

Bandwidth: 3G حدود ۱-۲ Mbps، 4G حدود ۵-۲۰ Mbps، 5G حدود ۵۰-۲۰۰ Mbps. تفاوت Bandwidth، بر زمان دانلود فایل‌ها اثر مستقیم دارد.

Latency: این پارامتر مهم‌تر از Bandwidth است. 3G حدود ۲۰۰-۳۰۰ms، 4G حدود ۵۰-۱۰۰ms، 5G حدود ۱۰-۳۰ms. Latency بالا، Round-trip را کند می‌کند.

Stability: شبکه موبایل، ناپایدار است. قطع و وصل، تغییر شبکه (4G به 3G)، و افت کیفیت در حرکت، رایج است.

# شبیه‌سازی شبکه موبایل در DevTools
1. Chrome DevTools → Network
2. Throttling → Fast 3G / Slow 3G / Custom
3. Reload و مشاهده رفتار

نکات مهم در بهینه‌سازی شبکه: اول، کاهش تعداد درخواست‌ها. دوم، استفاده از HTTP/2 و HTTP/3. سوم، استفاده از CDN برای کاهش Latency. چهارم، استفاده از Preload برای منابع بحرانی. پنجم، پرهیز از زنجیره‌های Redirect. اگر با CDN آشنا نیستید، نقش CDN در سرعت را مطالعه کنید.

CPU محدود و پردازش JavaScript

CPU موبایل، ۴-۶ برابر کندتر از CPU دسکتاپ است. این تفاوت، بر پردازش JavaScript و رندر CSS اثر مستقیم دارد. طبق گزارش Google، JavaScript در موبایل میان‌رده، به طور میانگین ۶ برابر کندتر اجرا می‌شود.

سه استراتژی اصلی برای بهینه‌سازی CPU: اول، کاهش حجم JavaScript. دوم، تاخیر اجرای JavaScript. سوم، انتقال بار به Web Worker.

// کاهش حجم JavaScript
// 1. Tree Shaking
import { debounce } from "lodash";
// در مقابل
import _ from "lodash";

// 2. Code Splitting
const Chart = lazy(() => import("./Chart"));

// 3. Defer Scripts
<script src="app.js" defer></script>

نکات مهم در بهینه‌سازی CPU: اول، از Bundler با Tree Shaking استفاده کنید. دوم، از Code Splitting برای Lazy Loading. سوم، از defer و async برای اسکریپت‌ها. چهارم، از Web Worker برای پردازش‌های سنگین. پنجم، از Lighthouse و DevTools برای Profiling JavaScript. اگر با این حوزه آشنا نیستید، بهینه‌سازی JavaScript را مطالعه کنید.

بهینه‌سازی تصاویر برای موبایل

تصاویر، بزرگ‌ترین بخش پهنای باند در موبایل هستند. طبق گزارش HTTP Archive، تصاویر حدود ۵۰ درصد از حجم صفحه را تشکیل می‌دهند. پنج استراتژی اصلی برای بهینه‌سازی تصاویر:

اول، سایزبندی مناسب: از srcset و sizes برای ارائه نسخه‌های مختلف استفاده کنید.

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Hero">

دوم، فرمت مدرن: از WebP یا AVIF به جای JPEG و PNG استفاده کنید. طبق گزارش Google، WebP حدود ۲۵-۳۴ درصد کاهش حجم نسبت به JPEG دارد. اگر با فرمت‌ها آشنا نیستید، بهترین فرمت تصویر وب را مطالعه کنید.

سوم، فشرده‌سازی: از فشرده‌سازی Lossy با کیفیت ۷۵-۸۵ استفاده کنید. اگر با این حوزه آشنا نیستید، فشرده‌سازی تصاویر سایت را مطالعه کنید.

چهارم، Lazy Loading: برای تصاویر زیر خط دید از loading="lazy" استفاده کنید. اما تصویر LCP نباید lazy باشد.

پنجم، ابعاد اعلام‌شده: از width و height در تگ img استفاده کنید تا CLS بهبود یابد.

نکات مهم در بهینه‌سازی تصاویر: اول، از ابزارهای خودکار مثل Cloudinary یا ImageKit استفاده کنید. دوم، از CDN با Image Optimization استفاده کنید. سوم، تصویر LCP را بهینه کنید. چهارم، از Placeholder برای کاهش CLS. پنجم، اندازه‌های دقیق تعریف کنید. اگر با این حوزه آشنا نیستید، سئوی تصویر چیست را مطالعه کنید.

فونت‌ها و Typography

فونت‌ها یکی از بزرگ‌ترین عوامل کندی موبایل هستند. فونت فارسی به دلیل پیچیدگی، حجم بیشتری دارد. سه استراتژی اصلی:

اول، Subsetting: فقط کاراکترهای مورد نیاز را دانلود کنید.

@font-face {
  font-family: "Vazir";
  src: url("vazir-subset.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0600-06FF;
}

دوم، font-display: از font-display: swap برای نمایش سریع متن با فونت Fallback استفاده کنید.

سوم، Preload: فونت‌های بحرانی را Preload کنید.

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

نکات مهم در بهینه‌سازی فونت‌ها: اول، فقط وزن‌های مورد نیاز را لود کنید. دوم، از WOFF2 استفاده کنید (کم‌ترین حجم). سوم، فونت فارسی را Subset کنید. چهارم، از Local Storage استفاده کنید. پنجم، از Fallback فونت مشابه استفاده کنید. اگر با این حوزه آشنا نیستید، تایپوگرافی فارسی را مطالعه کنید.

CSS و JavaScript در موبایل

CSS و JavaScript، دو عامل اصلی کندی موبایل هستند. پنج استراتژی بهینه‌سازی:

اول، Critical CSS: CSS بحرانی را Inline کنید و بقیه را با تاخیر بارگذاری کنید.

<style>
  /* Critical CSS */
  .hero { color: red; }
</style>
<link rel="preload" href="main.css" as="style" onload="this.rel="stylesheet"">

دوم، Minification: از Minify برای CSS و JS استفاده کنید.

سوم، Code Splitting: JavaScript را به Chunkهای کوچک‌تر تقسیم کنید.

چهارم، Tree Shaking: از Bundler با Tree Shaking استفاده کنید.

پنجم، Defer/Async: از defer برای اسکریپت‌های حیاتی و async برای اسکریپت‌های غیرحیاتی استفاده کنید.

نکات مهم در بهینه‌سازی CSS/JS: اول، از ابزارهای Bundler مدرن (Vite، Webpack) استفاده کنید. دوم، از Code Splitting برای Lazy Loading. سوم، از PurgeCSS برای حذف CSS استفاده‌نشده. چهارم، از Defer برای اسکریپت‌های غیرحیاتی. پنجم، JavaScript را از مسیر بحرانی رندر خارج کنید. اگر با این حوزه آشنا نیستید، بهینه‌سازی CSS و بهینه‌سازی JavaScript را مطالعه کنید.

بهینه‌سازی موبایل در وردپرس

در سایت‌های وردپرسی، چند تکنیک خاص می‌توانند سرعت موبایل را به شدت بهبود دهند:

اول، انتخاب قالب سبک: قالب باید سبک، ریسپانسیو و موبایل-محور باشد. اگر با این حوزه آشنا نیستید، قالب سبک وردپرس و قالب‌های مناسب سئو را مطالعه کنید.

دوم، افزونه کش مناسب: برای موبایل، کش جداگانه با Cache Mobile فعال کنید. اگر با این حوزه آشنا نیستید، بهترین افزونه‌های کش وردپرس را مطالعه کنید.

سوم، بهینه‌سازی تصاویر خودکار: از افزونه‌های بهینه‌سازی تصویر استفاده کنید. اگر با این حوزه آشنا نیستید، بهترین افزونه‌های بهینه‌سازی تصویر را مطالعه کنید.

چهارم، Lazy Loading: در وردپرس ۵.۵+ به صورت پیش‌فرض فعال است. اما تصویر LCP را از Lazy Loading مستثنی کنید.

پنجم، کاهش افزونه‌های سنگین: هر افزونه، سرباری دارد. اگر با این حوزه آشنا نیستید، تأثیر افزونه‌ها بر سرعت و افزونه‌های ضروری وردپرس را مطالعه کنید.

ششم، CDN: از CDN برای ارائه منابع به کاربران جغرافیایی مختلف استفاده کنید.

تست و پایش موبایل

تست و پایش موبایل، بخش جدانشدنی استراتژی بهینه‌سازی است. پنج ابزار اصلی:

نکات مهم در تست موبایل: اول، از CPU Throttling (4x یا 6x) استفاده کنید. دوم، از Network Throttling (Slow 4G) استفاده کنید. سوم، از Device واقعی برای تست نهایی. چهارم، از CrUX برای داده‌های میدانی. پنجم، تست در ساعات مختلف روز. اگر با ابزارهای تست آشنا نیستید، ابزارهای تست سرعت و ابزارهای تست ریسپانسیو را مطالعه کنید.

یکپارچگی با CI/CD

یکپارچگی تست موبایل با CI/CD، بخش جدانشدنی استراتژی بهینه‌سازی مدرن است. با این یکپارچگی، در هر PR سرعت موبایل سنجیده می‌شود و از رگرسیون جلوگیری می‌شود.

# نمونه Lighthouse CI با Mobile Preset
name: Mobile Performance
on: [pull_request]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: treosh/lighthouse-ci-action@v9
        with:
          urls: |
            https://example.com
          preset: mobile
          uploadArtifacts: true

نکات مهم در CI/CD: اول، از Mobile Preset در Lighthouse استفاده کنید. دوم، از Budget Performance برای موبایل تعریف کنید. سوم، در صورت رگرسیون، Build را Fail کنید. چهارم، از Artifact برای نگه‌داری Report استفاده کنید. پنجم، فقط در PR اجرا کنید تا زمان CI/CD کاهش یابد. اگر با CI/CD آشنا نیستید، مقایسه ابزارهای CI/CD و گیت در وردپرس را مطالعه کنید.

پرسش‌های پرتکرار

چرا سرعت موبایل مهم‌تر از دسکتاپ است؟ سه دلیل: اول، ۶۰ درصد ترافیک از موبایل می‌آید. دوم، Mobile-First Indexing گوگل، نسخه موبایل را به عنوان نسخه اصلی در نظر می‌گیرد. سوم، کاربران موبایل صبر کمتری دارند و سریع‌تر سایت را رها می‌کنند.

چگونه LCP را در موبایل بهبود دهم؟ پنج رویکرد: اول، بهینه‌سازی تصویر LCP (WebP، ابعاد درست). دوم، Non-lazy روی LCP. سوم، از CDN برای کاهش TTFB. چهارم، Critical CSS. پنجم، Preload برای منابع بحرانی.

آیا Lazy Loading همیشه مفید است؟ خیر. Lazy Loading برای تصاویر زیر خط دید مفید است، اما روی تصویر LCP مضر است. تصویر LCP باید eager باشد.

چگونه INP را در موبایل بهبود دهم؟ سه رویکرد: اول، کاهش حجم JavaScript. دوم، از Web Worker برای پردازش سنگین. سوم، Defer کردن اسکریپت‌های غیرحیاتی. اگر با این حوزه آشنا نیستید، INP چیست را مطالعه کنید.

چگونه CLS را در موبایل بهبود دهم؟ سه رویکرد: اول، استفاده از width و height در تگ img. دوم، Reserve Space برای تبلیغات و کامپوننت‌های دینامیک. سوم، font-display: swap برای فونت‌ها. اگر با این حوزه آشنا نیستید، CLS چیست را مطالعه کنید.

آیا CDN برای سایت‌های ایرانی مفید است؟ بله، اگر CDN دارای POP در ایران یا نزدیک ایران باشد. CDN می‌تواند Latency را به شدت کاهش دهد. برای سایت‌های با مخاطب ایران، از CDN با POP داخلی استفاده کنید. اگر با CDN آشنا نیستید، نقش CDN در سرعت را مطالعه کنید.

چگونه سرعت موبایل را در CI/CD پیاده کنم؟ از Lighthouse CI با Mobile Preset استفاده کنید. در هر PR اجرا کنید و از Budget Performance برای جلوگیری از رگرسیون بهره بگیرید. اگر با این حوزه آشنا نیستید، مقایسه ابزارهای CI/CD را مطالعه کنید.

آنچه باید با خود ببرید

بهینه‌سازی سرعت موبایل، یک حوزه تخصصی است که شرایط منحصر به فرد شبکه، CPU و Battery را در نظر می‌گیرد. پنج دسته اصلی: تصاویر، فونت‌ها، CSS/JS، شبکه و CPU.

هفت اصل کلیدی که در این مقاله بررسی شد:

1. موبایل با دسکتاپ تفاوت‌های بنیادین در شبکه، CPU و Battery دارد.
2. Core Web Vitals در موبایل، بر اساس داده‌های میدانی سنجیده می‌شود.
3. شبکه موبایل، Latency بالاتری دارد که بر Round-trip اثر می‌گذارد.
4. CPU محدود موبایل، پردازش JavaScript را ۴-۶ برابر کند می‌کند.
5. تصاویر، بزرگ‌ترین بخش پهنای باند موبایل هستند.
6. فونت‌ها، یکی از عوامل کندی موبایل هستند که اغلب نادیده گرفته می‌شود.
7. CI/CD با Mobile Preset، از رگرسیون سرعت جلوگیری می‌کند.

قدم عملی امروز: یک تست سرعت موبایل واقعی انجام دهید. اول، سایت خود را در PageSpeed Insights با Mobile Mode تست کنید. دوم، در Chrome DevTools با CPU Throttling 4x و Slow 4G تست کنید. سوم، روی یک گوشی واقعی با اینترنت ۴G تست کنید. این سه تست، تصویر جامعی از وضعیت سرعت موبایل سایت شما ارائه می‌دهد. اگر می‌خواهید در حوزه‌های مرتبط عمیق‌تر شوید، ابزارهای تست سرعت و افزایش سرعت وردپرس را مطالعه کنید.

اگر تجربه‌ای در بهینه‌سازی سرعت موبایل داشتید — به‌خصوص اگر با چالشی مثل LCP یا INP روبرو شده‌اید — در دیدگاه‌ها بنویسید. این تجربه‌ها برای خواننده‌های بعدی از هر مقاله تئوریک ارزشمندتر است. 📱