Performance Budgets

Performance Budget Template

# performance-budget.yml
performance_budgets:
  page_load:
    target: 3000ms
    critical: 5000ms
    
  first_contentful_paint:
    target: 1800ms
    critical: 3000ms
    
  largest_contentful_paint:
    target: 2500ms
    critical: 4000ms
    
  cumulative_layout_shift:
    target: 0.1
    critical: 0.25
    
  time_to_interactive:
    target: 3500ms
    critical: 5000ms
    
  total_bundle_size:
    target: 500KB
    critical: 1MB
    
  total_image_size:
    target: 1MB
    critical: 2MB

Budget Categories

class PerformanceBudget
{
    public function getBudgets(): array
    {
        return [
            'timing' => [
                'page_load' => 3000,
                'ttfb' => 600,
                'dom_ready' => 1500,
                'load' => 3000,
            ],
            'size' => [
                'html' => 50,
                'css' => 100,
                'javascript' => 300,
                'images' => 1000,
                'fonts' => 100,
            ],
            'count' => [
                'http_requests' => 50,
                'js_files' => 10,
                'css_files' => 5,
                'image_files' => 30,
            ],
        ];
    }
}

Key Points

• Set realistic targets based on industry benchmarks
• Include both timing and size budgets
• Set critical thresholds for alerts
• Review and update budgets regularly

Core Web Vitals

// Measure LCP (Largest Contentful Paint)
const lcpObserver = new PerformanceObserver((entryList) => {
    const entries = entryList.getEntries();
    const lastEntry = entries[entries.length - 1];
    console.log('LCP:', lastEntry.startTime);
});
lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });

// Measure CLS (Cumulative Layout Shift)
let clsValue = 0;
const clsObserver = new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
        if (!entry.hadRecentInput) {
            clsValue += entry.value;
        }
    }
    console.log('CLS:', clsValue);
});
clsObserver.observe({ type: 'layout-shift', buffered: true });

// Measure FID (First Input Delay)
const fidObserver = new PerformanceObserver((entryList) => {
    const entries = entryList.getEntries();
    console.log('FID:', entries[0].processingStart - entries[0].startTime);
});
fidObserver.observe({ type: 'first-input', buffered: true });

Page Load Timing

// Server-side timing
use Magento\Framework\Profiler;

class PerformanceProfiler
{
    public function measurePageLoad(): array
    {
        Profiler::start('total_page_load');
        
        // ... page processing ...
        
        Profiler::stop('total_page_load');
        
        return [
            'total' => Profiler::fetch('total_page_load'),
            'database' => Profiler::fetch('db_queries'),
            'layout' => Profiler::fetch('layout_render'),
            'blocks' => Profiler::fetch('block_render'),
        ];
    }
}

Lighthouse Scores

# Run Lighthouse
google-chrome --headless --screenshot --window-size=1920,1080 \
    --disable-gpu --no-sandbox \
    https://magento.example.com

# Or use Lighthouse CI
npx lhci autorun

Key Points

• Use browser APIs for client-side metrics
• Server-side profiling for backend bottlenecks
• Lighthouse for comprehensive audits
• Track metrics over time

Key Metrics

// Performance tracking
class MetricsCollector
{
    public function collect(): array
    {
        return [
            // Timing metrics
            'ttfb' => $this->getTimeToFirstByte(),
            'fcp' => $this->getFirstContentfulPaint(),
            'lcp' => $this->getLargestContentfulPaint(),
            'fid' => $this->getFirstInputDelay(),
            'cls' => $this->getCumulativeLayoutShift(),
            
            // Size metrics
            'total_size' => $this->getTotalTransferSize(),
            'js_size' => $this->getJavaScriptSize(),
            'css_size' => $this->getCssSize(),
            'image_size' => $this->getImageSize(),
            
            // Count metrics
            'http_requests' => $this->getHttpRequestCount(),
            'js_files' => $this->getJavaScriptFileCount(),
        ];
    }
}

Monitoring Setup

// Log performance metrics
use Magento\Framework\Logger\Monolog;

class PerformanceLogger
{
    private $logger;

    public function __construct(Monolog $logger)
    {
        $this->logger = $logger;
    }

    public function logMetrics(array $metrics)
    {
        $this->logger->info('Performance metrics', $metrics);
        
        // Check against budgets
        if ($metrics['lcp'] > 2500) {
            $this->logger->warning('LCP exceeded budget', [
                'value' => $metrics['lcp'],
                'budget' => 2500,
            ]);
        }
    }
}

Key Points

• Core Web Vitals: LCP, FID, CLS
• Track both timing and size metrics
• Set up alerts for budget violations
• Monitor trends over time