در یکی از پروژه‌های فروشگاهی که سال گذشته روی آن کار می‌کردم، میانگین LCP (Largest Contentful Paint) سایت ۴.۸ ثانیه بود و نرخ تبدیل موبایل در حال کاهش. مدیر پروژه، افزونۀ کش نصب کرده بود اما نمی‌دانست گلوگاه واقعی کجاست. وقتی با WebPageTest و Chrome DevTools پروفایل Performance را بررسی کردم، سه مشکل ریشه‌ای پیدا شد: نبود Image Optimization، اسکریپت‌های مسدودکنندۀ بزرگ، و CSS بلااستفاده. بعد از اجرای هفت بهینه‌سازی و پایش مداوم با SpeedCurve، LCP به ۱.۹ ثانیه رسید و نرخ تبدیل موبایل ۲۳ درصد بهبود یافت. این تجربه نشان می‌دهد که ابزارهای بهینه‌سازی Performance، صرفاً ابزار اندازه‌گیری نیستند؛ آنها ابزار تصمیم‌گیری و پایش هستند. در این مقاله، بر اساس تجربه‌های مهندسی، این ابزارها را بررسی می‌کنم.

طبق گزارش Google، هر ۱۰۰ میلی‌ثانیه تأخیر اضافی در زمان پاسخ، ۱ درصد کاهش در نرخ تبدیل به همراه دارد. طبق گزارش Akamai، ۵۳ درصد از کاربران موبایل، سایتی که بیش از ۳ ثانیه طول می‌کشد را رها می‌کنند. طبق گزارش HTTP Archive، میانگین زمان بارگذاری سایت‌های موبایل در ۲۰۲۶ حدود ۲.۵ ثانیه است، اما این عدد برای سایت‌های بهینه حدود ۱.۲ ثانیه است. این آمارها نشان می‌دهد که بهینه‌سازی Performance یک سرمایه‌گذاری استراتژیک است. اگر با Core Web Vitals آشنا نیستید، پیشنهاد می‌کنم ابتدا Core Web Vitals چیست و افزایش سرعت وردپرس را مطالعه کنید.

چرا ابزارهای Performance ضروری هستند؟

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

در یکی از پروژه‌ها، تیم سه هفته روی بهینه‌سازی تصاویر کار کرد و LCP را از ۴.۲ به ۳.۸ کاهش داد. اما بعد از پروفایل دقیق، فهمیدیم گلوگاه واقعی، TTFB (Time to First Byte) سرور است، نه تصاویر. این تجربه نشان می‌دهد که اندازه‌گیری قبل از بهینه‌سازی، تفاوت بین ۳ هفته و ۳ روز را تعیین می‌کند.

اگر با ابزارهای کلی توسعه آشنا نیستید، ابزارهای توسعه وب چیست و افزونه‌های ضروری مرورگر را مطالعه کنید.

Performance، یک Feature است، نه یک Luxury. اگر کاربر تجربه کند داشته باشد، همه Featureها بی‌ارزش می‌شوند. اندازه‌گیری، پایه هر تصمیم Performance است.

Lab Data و Field Data

قبل از معرفی ابزارها، باید تفاوت Lab Data و Field Data را بشناسیم. این تفاوت، در تصمیم‌گیری صحیح حیاتی است.

ویژگیLab DataField Data
منبعمحیط کنترل‌شدهکاربران واقعی
ابزارLighthouse، WebPageTestCrUX، RUM
مزیتقابل تکرار، Debuggableواقعی، Representative
عیبشبیه‌سازی، نه واقعیتحجم داده، Delayed
کاربردشناسایی گلوگاهتصمیم رتبه‌بندی

Lab Data (داده آزمایشگاهی): در محیط کنترل‌شده و با شرایط مشخص (CPU، شبکه، Cache) جمع‌آوری می‌شود. این داده‌ها قابل تکرار هستند اما همیشه نماینده تجربه واقعی کاربران نیستند. ابزارهای Lab: Lighthouse، WebPageTest، Chrome DevTools.

Field Data (داده میدانی): از کاربران واقعی و در شرایط واقعی جمع‌آوری می‌شود. این داده‌ها نماینده تجربه واقعی هستند اما حجم داده و زمان بیشتری نیاز دارند. ابزارهای Field: CrUX، RUM، SpeedCurve.

نکات مهم در استفاده: اول، Lab Data برای Debugging و شناسایی گلوگاه. دوم، Field Data برای تصمیم‌گیری رتبه‌بندی و پایش بلندمدت. سوم، Google برای رتبه‌بندی، از Field Data استفاده می‌کند. چهارم، در تصمیم‌گیری، از هر دو استفاده کنید. پنجم، اختلاف بین Lab و Field، نشانه‌ای از تفاوت شرایط محیطی است.

Lighthouse و Lighthouse CI

Lighthouse ابزار اصلی Google برای اندازه‌گیری Performance است که به صورت Built-in در Chrome DevTools موجود است. این ابزار پنج دسته را می‌سنجد: Performance، Accessibility، Best Practices، SEO و PWA.

امکانات Lighthouse: اول، Performance Score با پنج معیار (FCP، LCP، TBT، CLS، SI). دوم، Opportunities برای شناسایی گلوگاه‌ها. سوم، Diagnostics برای بررسی عمیق. چهارم، Mobile و Desktop Mode. پنجم، Throttling قابل تنظیم. ششم، JSON Output.

# اجرای Lighthouse در CLI
npm install -g lighthouse
lighthouse https://example.com --output=html --output-path=report.html

# با Throttling مشخص
lighthouse https://example.com --preset=desktop

# با فیلتر Category
lighthouse https://example.com --only-categories=performance

Lighthouse CI یکی از قدرتمندترین ابزارهای Lighthouse است که در CI/CD قابل استفاده است. با Lighthouse CI، می‌توانید در هر PR Performance را بسنجید و از رگرسیون جلوگیری کنید.

# نمونه GitHub Action
name: Lighthouse CI
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
            https://example.com/products
          uploadArtifacts: true
          temporaryPublicStorage: true

نکات مهم در Lighthouse: اول، از Throttling برای شبیه‌سازی موبایل میان‌رده استفاده کنید. دوم، در سه اجرا، میانه را ملاک بگیرید. سوم، از Lighthouse CI برای Automation استفاده کنید. چهارم، Score را با داده‌های دیگر ترکیب کنید. پنجم، به Category‌های مختلف (نه فقط Performance) توجه کنید. اگر با ابزارهای تست سرعت آشنا نیستید، بهترین ابزارهای تست سرعت و ابزارهای سنجش Core Web Vitals را مطالعه کنید.

WebPageTest

WebPageTest یکی از قدرتمندترین ابزارهای Performance Testing است که امکانات پیشرفته‌ای نسبت به Lighthouse دارد. این ابزار، توسط Catchpoint پشتیبانی می‌شود و در وب و به صورت Open-Source قابل نصب است.

امکانات WebPageTest: اول، تست از موقعیت‌های جغرافیایی مختلف. دوم، تست در دستگاه‌های واقعی. سوم، Waterfall View تفصیلی. چهارم، Filmstrip View. پنجم، Comparison View برای مقایسه دو نسخه. ششم، Custom Scripts برای سناریوهای پیچیده. هفتم، API برای Automation.

# نمونه Custom Script
navigate https://example.com
waitForComplete
execAndWait document.querySelector(".buy-button").click()
waitForComplete
execAndWait window.scrollTo(0, document.body.scrollHeight)

Waterfall View یکی از مفیدترین بخش‌های WebPageTest است که ترتیب و زمان‌بندی همه درخواست‌های HTTP را نشان می‌دهد. این View به شما کمک می‌کند تا گلوگاه‌ها را شناسایی کنید:

0ms     1ms     2ms     3ms     ...
|-------|-------|-------|-------|
[DNS Lookup]
        [TCP Connect]
                [SSL Handshake]
                        [TTFB]
                             [Content Download]

نکات مهم در WebPageTest: اول، از Connection Profile برای شبیه‌سازی اینترنت کند استفاده کنید. دوم، از Location برای شبیه‌سازی کاربران جغرافیایی مختلف. سوم، از Repeat View برای مشاهده رفتار Cache. چهارم، از API برای Automation در CI/CD. پنجم، از Filmstrip View برای مشاهده تجربه بصری کاربر استفاده کنید.

Chrome DevTools Performance Panel

Chrome DevTools Performance Panel یکی از قدرتمندترین ابزارهای Performance برای Debugging دقیق است. این ابزار، به شما امکان می‌دهد که فعالیت‌های CPU، Memory و Network را در زمان واقعی ببینید.

امکانات Performance Panel: اول، Record Timeline. دوم، Frames View برای شناسایی Long Tasks. سوم، Main Thread View برای دیدن JavaScript Execution. چهارم، Network View. پنجم، Memory Allocation. ششم، Screenshots در طول اجرا.

# شناسایی Long Tasks در Main Thread
1. Performance Panel را باز کنید
2. Record را کلیک کنید
3. صفحه را اسکرول یا کلیک کنید
4. Stop را کلیک کنید
5. به دنبال بلوک‌های نارنجی (Long Tasks) بگردید

نکات مهم در استفاده از Performance Panel: اول، از CPU Throttling (4x یا 6x) برای شبیه‌سازی موبایل میان‌رده استفاده کنید. دوم، از Record و Reload برای پروفایل Load. سوم، از Record و Interact برای پروفایل Interaction. چهارم، از Coverage برای شناسایی CSS/JS استفاده‌نشده. پنجم، از Layers برای شناسایی Layout Shifts. ششم، از Memory برای شناسایی Memory Leak.

یک تکنیک کاربردی برای شناسایی N+1 Problem (که در بهینه‌سازی عملکرد REST API به تفصیل بررسی شده):

// شمارش DOM Nodes
document.querySelectorAll("*").length

// شناسایی DOM Depth
// در Performance Panel، پایین‌ترین لایه را ببینید

// پایش Memory
performance.memory.usedJSHeapSize / 1024 / 1024

PageSpeed Insights و CrUX

PageSpeed Insights (PSI) ابزار رسمی Google برای سنجش Performance است که هر دو Lab Data و Field Data را ارائه می‌دهد. PSI از Lighthouse برای Lab Data و از CrUX (Chrome User Experience Report) برای Field Data استفاده می‌کند.

CrUX (Chrome User Experience Report) یک Dataset عمومی از تجربه کاربران واقعی Chrome است. این Dataset، اطلاعات Core Web Vitals (LCP، INP، CLS) را برای میلیون‌ها دامنه در سطح جهان ارائه می‌دهد. CrUX در ۲۸ روز گذشته Aggregate می‌شود.

# استفاده از CrUX API
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY" 
  -H "Content-Type: application/json" 
  -d "{
    "origin": "https://example.com",
    "metrics": ["largest_contentful_paint", "cumulative_layout_shift", "interaction_to_next_paint"]
  }"

نکات مهم در استفاده از PSI و CrUX: اول، PSI داده‌های میدانی را از CrUX می‌گیرد که ۲۸ روز گذشته است. دوم، در سایت‌های کم‌ترافیک، CrUX ممکن است داده نداشته باشد. سوم، از Search Console برای داده‌های بیشتر استفاده کنید. چهارم، از CrUX History API برای Trend بلندمدت استفاده کنید. پنجم، Google از Field Data برای رتبه‌بندی استفاده می‌کند، نه Lab Data.

Google از Field Data برای رتبه‌بندی استفاده می‌کند. اما شما برای Debugging، به Lab Data نیاز دارید. ترکیب هر دو، پایه هر تصمیم Performance است.

SpeedCurve و Calibre

SpeedCurve و Calibre دو ابزار تجاری برای پایش Performance هستند که امکاناتی فراتر از PSI و Lighthouse دارند. این ابزارها، مخصوص تیم‌هایی است که به پایش مداوم و تحلیل عمیق نیاز دارند.

SpeedCurve مزایای اصلی: اول، پایش مداوم Performance. دوم، Visualization عالی. سوم، Synthetic و RUM. چهارم، Competitive Benchmarking. پنجم، Design Review با Screenshot. ششم، یکپارچگی با CI/CD.

Calibre مزایای اصلی: اول، پایش Performance برای هر PR. دوم، Alert برای رگرسیون. سوم، Distribution Analysis. چهارم، یکپارچگی با GitHub. پنجم، API خوب.

نکات مهم در استفاده از این ابزارها: اول، ابزارهای تجاری برای تیم‌های متوسط و بزرگ مناسب هستند. دوم، ROI این ابزارها از طریق جلوگیری از رگرسیون برمی‌گردد. سوم، در ترکیب با Lighthouse CI و PSI، پوشش جامعی فراهم می‌کنند. چهارم، هزینه ماهانه بین ۱۰ تا ۵۰۰ دلار متغیر است. پنجم، برای پروژه‌های کوچک، ابزارهای رایگان کافی است.

RUM و Real User Monitoring

RUM (Real User Monitoring) یک رویکرد است که تجربه واقعی کاربران را در شرایط واقعی می‌سنجد. برخلاف Synthetic Monitoring که در محیط کنترل‌شده اجرا می‌شود، RUM از کاربران واقعی داده جمع‌آوری می‌کند.

مزایای RUM: اول، داده‌های واقعی. دوم، Detect مسائل کاربران واقعی. سوم، Geographic Distribution. چهارم، Device Diversity. پنجم، امکان Segment کاربران.

ابزارهای RUM: New Relic Browser، Datadog RUM، SpeedCurve LUX، Google Analytics 4 (با Web Vitals). روش‌های جمع‌آوری: Web Vitals JavaScript Library، Performance Observer API، Beacon API.

// نمونه استفاده از Web Vitals Library
import { onLCP, onINP, onCLS } from "web-vitals";

onLCP(console.log);
onINP(console.log);
onCLS(console.log);

// ارسال به سرور
onLCP((metric) => {
  navigator.sendBeacon("/api/vitals", JSON.stringify(metric));
});

نکات مهم در استفاده از RUM: اول، از Web Vitals Library استفاده کنید. دوم، داده‌ها را به سرور ارسال کنید. سوم، از Beacon API برای ارسال مطمئن استفاده کنید. چهارم، از Segment برای تفکیک کاربران موبایل و دسکتاپ استفاده کنید. پنجم، از داده‌های RUM برای تصمیمات بلندمدت استفاده کنید. اگر به ابزارهای تحلیلی علاقه‌مندید، نقد و بررسی Google Analytics را مطالعه کنید.

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

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

# نمونه کامل Lighthouse CI در GitHub Actions
name: Performance
on: [pull_request]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run build
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli
          lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: lighthouse-reports
          path: .lighthouseci/

نکات مهم در CI/CD: اول، Lighthouse CI را در PR اجرا کنید، نه در Commit. دوم، از Budget Performance استفاده کنید. سوم، از Comparison View برای مقایسه با Main استفاده کنید. چهارم، در صورت رگرسیون، Build را Fail کنید. پنجم، از Artifact برای نگه‌داری Reports استفاده کنید.

مقایسه جامع ابزارها

ابزارنوعهزینهمناسب برای
LighthouseLabرایگانهمه
WebPageTestLabرایگان (Public)Debugging عمیق
Chrome DevToolsLabرایگانDebugging دقیق
PageSpeed InsightsLab + Fieldرایگانتحلیل سریع
CrUXFieldرایگانتصمیم رتبه‌بندی
SpeedCurveLab + Fieldپولیتیم‌های متوسط
CalibreLab + Fieldپولیتیم‌های فنی
New Relic BrowserField (RUM)پولیEnterprise

جریان کاری حرفه‌ای

جریان کاری Performance که در پروژه‌های خودم استفاده می‌کنم، چهار مرحله دارد:

مرحله اول، Baseline: قبل از هر بهینه‌سازی، وضعیت موجود را با Lighthouse، PSI و WebPageTest سنجید. این Baseline، معیار مقایسه بعدی است.

مرحله دوم، Debugging: با Chrome DevTools Performance Panel، گلوگاه‌های واقعی را شناسایی کنید. از Coverage برای CSS/JS استفاده‌نشده، از Memory برای Memory Leak، و از Network برای Request Chain استفاده کنید.

مرحله سوم، Optimization: بر اساس داده‌ها، بهینه‌سازی‌ها را اولویت‌بندی کنید. ترتیب من: اول تصاویر، دوم CSS/JS، سوم فونت‌ها، چهارم TTFB، پنجم DOM.

مرحله چهارم، Monitoring: بعد از Release، Performance را با RUM و SpeedCurve پایش کنید. از Lighthouse CI برای جلوگیری از رگرسیون استفاده کنید.

پرسش‌های پرتکرار درباره ابزارهای Performance

کدام ابزار بهترین است؟ هیچ ابزار واحدی بهترین نیست. برای Debugging: Chrome DevTools. برای Baseline: Lighthouse. برای عمق: WebPageTest. برای Field Data: CrUX و PSI. برای پایش: SpeedCurve. ترکیب این ابزارها، پوشش جامعی فراهم می‌کند.

آیا Lighthouse Score کافی است؟ خیر. Lighthouse Score بر اساس Lab Data است و Google برای رتبه‌بندی از Field Data استفاده می‌کند. تفاوت بین Score و تجربه واقعی می‌تواند زیاد باشد. از CrUX برای داده‌های میدانی استفاده کنید.

چگونه از رگرسیون Performance جلوگیری کنم؟ از Lighthouse CI در CI/CD استفاده کنید. با Budget Performance، محدودیت‌های مشخص تعریف کنید و در صورت تجاوز، Build را Fail کنید. از SpeedCurve یا Calibre برای پایش مداوم استفاده کنید.

آیا باید از RUM استفاده کنم؟ بله، اگر سایت شما ترافیک کافی دارد. RUM تجربه واقعی کاربران را نشان می‌دهد که Lab Data نمی‌تواند. از Web Vitals Library و GA4 برای شروع استفاده کنید.

چگونه TTFB را بهینه کنم؟ از WebPageTest یا Chrome DevTools Network Panel استفاده کنید. اگر TTFB بالا است، مسئله در سرور یا شبکه است. از CDN، Cache، و بهینه‌سازی دیتابیس استفاده کنید. اگر با این حوزه آشنا نیستید، تأثیر TTFB بر سرعت و تأثیر هاست بر سرعت را مطالعه کنید.

آیا ابزارهای Performance تجاری ارزش خرید دارند؟ برای تیم‌های متوسط و بزرگ، بله. ROI از طریق جلوگیری از رگرسیون، بهبود تجربه کاربری و افزایش نرخ تبدیل برمی‌گردد. برای پروژه‌های کوچک، ابزارهای رایگان کافی است.

چگونه Performance را در تیم نهادینه کنم؟ سه رویکرد: اول، Performance Budget تعریف کنید. دوم، از Lighthouse CI در PRها استفاده کنید. سوم، Performance را در Code Review جدی بگیرید. فرهنگ Performance، از بالا به پایین ساخته می‌شود.

فلسفه اندازه‌گیری

ابزارهای Performance، ضریب کیفیت توسعه‌دهنده هستند. انتخاب درست می‌تواند ساعت‌ها در روز صرفه‌جویی کند و از فاجعه در محیط تولید جلوگیری کند. پنج دسته اصلی ابزار: Lab، Field، RUM، Synthetic و CI/CD.

سه نکته کلیدی برای تیم‌های فنی: اول، از داده‌های میدانی برای تصمیمات بلندمدت و از Lab Data برای Debugging استفاده کنید. دوم، Performance را در CI/CD قرار دهید تا از رگرسیون جلوگیری کنید. سوم، Performance را به عنوان یک Feature ببینید، نه یک Luxury.

قدم عملی امروز: یک Baseline Performance برای سایت خود بسازید. اول، از Lighthouse برای Performance Score استفاده کنید. دوم، از CrUX یا PSI برای Field Data. سوم، از WebPageTest برای Waterfall Analysis. این سه گام، تصویر جامعی از وضعیت Performance سایت شما ارائه می‌دهد. اگر به حوزه‌های تخصصی علاقه‌مندید، بهینه‌سازی سرعت موبایل و ترندهای بهینه‌سازی موبایل را مطالعه کنید.

اگر تجربه‌ای در اندازه‌گیری یا بهینه‌سازی Performance داشتید — به‌خصوص اگر با یک گلوگاه پیچیده روبرو شده‌اید یا ابزار خاصی کشف کرده‌اید — در دیدگاه‌ها بنویسید. این تجربه‌ها برای خواننده‌های بعدی از هر مقاله تئوریک ارزشمندتر است. ⚡