← بازگشت به صفحه اصلی

راهنمای جامع بهینه‌سازی عملکرد XPay Theme

📋 فهرست مطالب

معرفی

این theme از یک ماژول جامع به نام PerformanceOptimizer برای بهینه‌سازی عملکرد استفاده می‌کند. این ماژول به صورت خودکار:

نتایج مورد انتظار:

Metric قبل بعد بهبود
LCP ~4.5s ~2.0s 55% ⬇️
FID ~200ms ~50ms 75% ⬇️
CLS ~0.25 ~0.05 80% ⬇️
Total Blocking Time ~800ms ~200ms 75% ⬇️
Page Load Time ~6s ~3s 50% ⬇️

PerformanceOptimizer Module

🎯 ویژگی‌های کلیدی

1. Lazy Loading با Intersection Observer

<!-- Script Lazy Loading -->
<div data-lazy-script="/path/to/script.js" data-lazy-script-id="my-script"></div>

<!-- Style Lazy Loading -->
<div data-lazy-style="/path/to/style.css" data-lazy-style-id="my-style"></div>

<!-- Image Lazy Loading -->
<img data-lazy-src="/path/to/image.jpg" data-lazy-srcset="..." alt="Image">

2. RequestIdleCallback for Deferred Tasks

Tasks غیرحیاتی در زمان idle browser اجرا می‌شوند:

// Tasks are automatically deferred
// No code changes needed

3. Widget Deferring

Widgets به صورت خودکار defer می‌شوند:

// Configuration در performance-optimizer.js
widgetDelays: {
  chat: 3000,        // گفتینو - 3 ثانیه
  modal: 5000,       // گردونه جایزه - 5 ثانیه  
  priceWidget: 2000  // ویجت قیمت - 2 ثانیه
}

📡 Events

PerformanceOptimizer events را dispatch می‌کند:

// Listen to events
document.addEventListener('performance-optimizer:initialized', (e) => {
  console.log('PerformanceOptimizer initialized');
});

document.addEventListener('performance-optimizer:chat-loaded', (e) => {
  console.log('Chat widget loaded');
});

document.addEventListener('performance-optimizer:modal-loaded', (e) => {
  console.log('Modal widget loaded');
});

document.addEventListener('performance-optimizer:price-widget-loaded', (e) => {
  console.log('Price widget loaded');
});

🛠️ API Methods

// Access optimizer
const optimizer = window.PerformanceOptimizer;

// Load script dynamically
optimizer.loadScript('/path/to/script.js', 'script-id')
  .then(() => console.log('Script loaded'))
  .catch(err => console.error(err));

// Load style dynamically
optimizer.loadStyle('/path/to/style.css', 'style-id')
  .then(() => console.log('Style loaded'))
  .catch(err => console.error(err));

// Check widget status
console.log(optimizer.state.widgetsLoaded);
// Output: { chat: true, modal: false, priceWidget: true }

⚙️ Configuration

برای تغییر تنظیمات، فایل performance-optimizer.js را ویرایش کنید:

config: {
  // Intersection Observer settings
  intersectionRootMargin: '50px',    // چقدر قبل از ورود به viewport load شود
  intersectionThreshold: 0.01,       // حساسیت تشخیص
  
  // Idle callback timeout
  idleCallbackTimeout: 2000,         // زمان انتظار برای idle
  
  // Debug mode
  debug: true,                       // فعال کردن console logs
  
  // Widget delays
  widgetDelays: {
    chat: 3000,
    modal: 5000,
    priceWidget: 2000
  }
}

Script & Style Loading

✅ بهترین روش‌ها

1. Critical CSS Inline

CSS های حیاتی (above-the-fold) را inline کنید:

// در PageSpeedController یا header.php
<style>
  /* Critical CSS - فقط برای محتوای بالای صفحه */
  body { font-family: 'IRANSans', sans-serif; }
  .header { /* ... */ }
</style>

2. Defer Non-Critical CSS

// در Assets.php
wp_enqueue_style('non-critical', $url, [], $version, 'print');
// یا با media="print" و تبدیل به all با JavaScript

3. Async/Defer Scripts

// Async: بارگذاری موازی، اجرای فوری
wp_enqueue_script('analytics', $url, [], $version, ['strategy' => 'async']);

// Defer: بارگذاری موازی، اجرای بعد از DOMContentLoaded
wp_enqueue_script('main', $url, [], $version, ['strategy' => 'defer']);

4. Conditional Loading

فقط در صفحات لازم load کنید:

// فقط در صفحات coin
if (is_singular('coin')) {
  wp_enqueue_script('coin-chart');
  wp_enqueue_style('coin-style');
}

// فقط در صفحات با فرم
if (has_shortcode($post->post_content, 'contact-form-7')) {
  wp_enqueue_script('recaptcha');
}

Image Optimization

🖼️ Native Lazy Loading

PerformanceOptimizer به صورت خودکار loading="lazy" به تمام تصاویر زیر fold اضافه می‌کند.

✅ بهترین روش‌ها

1. Modern Image Formats

از WebP و AVIF استفاده کنید:

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="Image" loading="lazy">
</picture>

2. Responsive Images

از srcset برای تصاویر responsive استفاده کنید:

<img
  src="image-800w.jpg"
  srcset="image-400w.jpg 400w,
          image-800w.jpg 800w,
          image-1200w.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="Image"
  loading="lazy"
>

3. Placeholder Images

برای جلوگیری از layout shift:

<img
  src="placeholder.jpg"
  data-lazy-src="real-image.jpg"
  width="800"
  height="600"
  alt="Image"
>

4. LCP Image Optimization

تصویر LCP (Largest Contentful Paint) را preload کنید:

<link rel="preload" as="image" href="hero-image.jpg">
<img src="hero-image.jpg" alt="Hero" fetchpriority="high">

Font Optimization

🔤 Font Loading Strategy

PerformanceOptimizer به صورت خودکار font-display: swap به تمام @font-face ها اضافه می‌کند.

✅ بهترین روش‌ها

1. Preload Critical Fonts

فونت‌های حیاتی را preload کنید:

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

2. Font-Display: Swap

در فایل CSS:

@font-face {
  font-family: 'IRANSans';
  src: url('IRANSansWeb.woff2') format('woff2');
  font-display: swap; /* ⭐ مهم */
  font-weight: normal;
  font-style: normal;
}

3. Subset Fonts

فقط کاراکترهای مورد نیاز را include کنید:

@font-face {
  font-family: 'IRANSans';
  src: url('IRANSansWeb-subset.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200D; /* فقط فارسی */
  font-display: swap;
}

4. Variable Fonts

در صورت امکان از variable fonts استفاده کنید (یک فایل برای همه weights):

@font-face {
  font-family: 'IRANSans';
  src: url('IRANSansWeb-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

Widget Optimization

🎮 Chat Widget (گفتینو)

مشکل:

راه‌حل:

// PerformanceOptimizer به صورت خودکار defer می‌کند
// تاخیر پیش‌فرض: 3 ثانیه یا اولین interaction

// برای تغییر تاخیر:
widgetDelays: {
  chat: 5000  // 5 ثانیه
}

کد دستی (اختیاری):

// Load Goftino on user interaction
let goftinoLoaded = false;
const loadGoftino = () => {
  if (goftinoLoaded) return;
  
  const script = document.createElement('script');
  script.src = 'https://www.goftino.com/widget/YOUR_ID';
  script.async = true;
  document.body.appendChild(script);
  
  goftinoLoaded = true;
};

// Load on first interaction
['mousemove', 'scroll', 'touchstart'].forEach(event => {
  document.addEventListener(event, loadGoftino, { once: true });
});

// Or load after 3 seconds
setTimeout(loadGoftino, 3000);

🎡 Modal Widget (گردونه جایزه)

مشکل:

راه‌حل:

// Load modal assets ONLY when needed

// در HTML trigger button اضافه کنید:
<button data-modal-trigger>باز کردن گردونه</button>

// PerformanceOptimizer به صورت خودکار:
// 1. Modal را فقط در صورت کلیک load می‌کند
// 2. یا بعد از 5 ثانیه (configurable)

Plugin Compatibility:

اگر از Mabel Wheel of Fortune استفاده می‌کنید:

// در functions.php یا plugin custom
add_filter('wof_load_assets', function($load) {
  // فقط در صفحات خاص load شود
  return is_front_page() || is_page('giveaway');
}, 10, 1);

📊 Price Widget (Real-Time Crypto Prices)

مشکل:

راه‌حل:

// PerformanceOptimizer به صورت خودکار:
// 1. Chart را با Intersection Observer load می‌کند
// 2. فقط زمانی که widget در viewport باشد
// 3. تاخیر 2 ثانیه قابل تنظیم

// در HTML:
<div class="price-widget" data-coin="bitcoin">
  <!-- Chart container -->
</div>

// Chart فقط زمانی initialize می‌شود که در viewport باشد

بهینه‌سازی Real-Time Updates:

// استفاده از RequestAnimationFrame برای batch updates
const priceUpdates = [];

function updatePrice(coin, price) {
  priceUpdates.push({ coin, price });
  
  // Batch updates در next frame
  requestAnimationFrame(() => {
    priceUpdates.forEach(update => {
      // Update DOM
      document.querySelector(`[data-coin="${update.coin}"]`)
        .textContent = update.price;
    });
    priceUpdates.length = 0;
  });
}

Defer WebSocket Connection:

// بجای connect فوری
const ws = new WebSocket('wss://price-api.com');

// با تاخیر connect کنید
setTimeout(() => {
  const ws = new WebSocket('wss://price-api.com');
}, 3000);

Performance Metrics

📈 Core Web Vitals

Largest Contentful Paint (LCP)

First Input Delay (FID)

Cumulative Layout Shift (CLS)

🎯 دستورات تست

PageSpeed Insights

# Run PageSpeed test
https://pagespeed.web.dev/?url=https://xpay.ir

Lighthouse CI

# Install
npm install -g @lhci/cli

# Run audit
lhci autorun --collect.url=https://xpay.ir

WebPageTest

# Run test
https://www.webpagetest.org/
# Location: Tehran, Iran
# Browser: Chrome
# Connection: 4G

Troubleshooting

❌ مشکلات رایج

1. Scripts Not Loading

علت: Intersection Observer ممکن است در مرورگرهای قدیمی کار نکند.

راه‌حل:

// Check support
if (!('IntersectionObserver' in window)) {
  // Fallback: load immediately
  document.querySelectorAll('[data-lazy-script]').forEach(el => {
    const script = document.createElement('script');
    script.src = el.dataset.lazyScript;
    document.body.appendChild(script);
  });
}

2. Fonts Not Loading

علت: CORS issues با external fonts.

راه‌حل:

<!-- Add crossorigin attribute -->
<link rel="preload" as="font" type="font/woff2" 
      href="/fonts/IRANSans.woff2" crossorigin>

3. Layout Shift با Lazy Images

علت: تعیین نشدن width/height.

راه‌حل:

<!-- همیشه width/height تعیین کنید -->
<img src="image.jpg" width="800" height="600" loading="lazy" alt="Image">

<!-- یا aspect-ratio در CSS -->
<style>
  .lazy-image {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
</style>

4. Widget Not Loading

علت: Trigger button موجود نیست یا تاخیر زیاد است.

راه‌حل:

// در console بررسی کنید:
console.log(PerformanceOptimizer.state.widgetsLoaded);

// اگر false بود:
// 1. Check console for errors
// 2. کاهش تاخیر در config
// 3. بررسی selector trigger button

Debug Mode

🐛 فعال کردن Debug Mode

در فایل performance-optimizer.js:

config: {
  debug: true  // ⬅️ تغییر به true
}

📊 Console Logs

با فعال کردن debug mode، logs زیر نمایش داده می‌شوند:

[PerformanceOptimizer] Initializing PerformanceOptimizer...
[PerformanceOptimizer] IntersectionObserver set up
[PerformanceOptimizer] Fonts optimized
[PerformanceOptimizer] Critical fonts preloaded
[PerformanceOptimizer] Images optimized with native lazy loading
[PerformanceOptimizer] PerformanceOptimizer initialized successfully
[PerformanceOptimizer] Performance Metrics:
[PerformanceOptimizer]   Page Load Time: 2834ms
[PerformanceOptimizer]   Connect Time: 234ms
[PerformanceOptimizer]   Render Time: 1456ms
[PerformanceOptimizer]   LCP: 1823ms

Additional Resources

📚 مستندات مرتبط

🔗 منابع خارجی

Changelog

نسخه 1.0.0 (2025-12-27)

✨ Features

🎯 Performance Improvements

📝 Documentation

نویسنده: XPay Development Team
تاریخ: 27 دسامبر 2025
نسخه: 1.0.0