performance-debugging

Performance Debugging with Safari DevTools MCP

Use this skill when investigating slow page loads, rendering issues, or optimizing Core Web Vitals in Safari.

Collect performance metrics

Use evaluate_script to capture key metrics from the browser:

Navigation Timing (TTFB, DOM load, full page load)

evaluate_script function="() => {
  const nav = performance.getEntriesByType('navigation')[0];
  if (!nav) return { error: 'No navigation entry found' };
  return {
    url: nav.name,
    redirectTime: Math.round(nav.redirectEnd - nav.redirectStart),
    dnsLookup: Math.round(nav.domainLookupEnd - nav.domainLookupStart),
    tcpConnect: Math.round(nav.connectEnd - nav.connectStart),
    ttfb: Math.round(nav.responseStart - nav.requestStart),
    responseTime: Math.round(nav.responseEnd - nav.responseStart),
    domInteractive: Math.round(nav.domInteractive),
    domContentLoaded: Math.round(nav.domContentLoadedEventEnd),
    fullLoad: Math.round(nav.loadEventEnd),
    transferSize: nav.transferSize,
    encodedBodySize: nav.encodedBodySize,
    decodedBodySize: nav.decodedBodySize
  };
}"

Core Web Vitals (LCP, CLS)

evaluate_script function="() => {
  const results = {};

  // LCP
  const lcpEntries = performance.getEntriesByType('largest-contentful-paint');
  if (lcpEntries.length > 0) {
    const lcp = lcpEntries[lcpEntries.length - 1];
    results.lcp = {
      value: Math.round(lcp.startTime),
      element: lcp.element?.tagName,
      url: lcp.url || null,
      rating: lcp.startTime <= 2500 ? 'good' : lcp.startTime <= 4000 ? 'needs-improvement' : 'poor'
    };
  }

  // CLS
  let clsValue = 0;
  for (const entry of performance.getEntriesByType('layout-shift')) {
    if (!entry.hadRecentInput) clsValue += entry.value;
  }
  results.cls = {
    value: Math.round(clsValue * 1000) / 1000,
    rating: clsValue <= 0.1 ? 'good' : clsValue <= 0.25 ? 'needs-improvement' : 'poor'
  };

  return results;
}"

Resource waterfall (slowest resources)