Synthetic Testing vs Real User Monitoring (RUM)
Evaluating website response speed requires distinguishing between Lab Data (synthetic tests executed under fixed network and CPU constraints) and Field Data (real telemetry collected from diverse actual users browsing across various devices and cellular connections).
While lab tools like Google Lighthouse and GTmetrix are invaluable for debugging regressions during local development, Google Search and AdSense ranking algorithms prioritize field data collected by the Chrome User Experience Report (CrUX).
Automating Synthetic Performance Audits with Puppeteer
The following Node.js script launches a headless browser, navigates to a target URL, and extracts navigation timing metrics from the browser Performance API:
const puppeteer = require('puppeteer');
async function measureNavigationTimings(targetUrl) {
const browser = await puppeteer.launch({ headless: 'new' });
const page = await browser.newPage();
// Throttle network to simulate fast 4G connection
const client = await page.target().createCDPSession();
await client.send('Network.emulateNetworkConditions', {
offline: false,
downloadThroughput: 4 * 1024 * 1024 / 8, // 4 Mbps
uploadThroughput: 3 * 1024 * 1024 / 8, // 3 Mbps
latency: 20 // 20ms RTT
});
const start = Date.now();
await page.goto(targetUrl, { waitUntil: 'networkidle0' });
const loadDuration = Date.now() - start;
// Extract Navigation Timing API metrics
const timing = await page.evaluate(() => {
const nav = performance.getEntriesByType('navigation')[0];
return {
ttfb: Math.round(nav.responseStart - nav.requestStart),
domInteractive: Math.round(nav.domInteractive - nav.startTime),
loadComplete: Math.round(nav.loadEventEnd - nav.startTime)
};
});
console.log('Performance Metrics for ' + targetUrl + ':');
console.log(' TTFB: ' + timing.ttfb + 'ms');
console.log(' DOM Interactive: ' + timing.domInteractive + 'ms');
console.log(' Total Load: ' + loadDuration + 'ms');
await browser.close();
}
measureNavigationTimings('https://dattasable.com');