Real-world usage patterns and performance tracking demonstrations
This page already includes the performance optimizer! Check the <head> section to see how it's implemented.
<!DOCTYPE html>
<html>
<head>
<!-- Load FIRST for maximum benefit -->
<script src="javascript/performance-optimizer.js" data-track-metrics="true"></script>
<!-- Your other resources -->
<link rel="stylesheet" href="styles/grid.css">
<script src="https://kit.fontawesome.com/your-kit.js"></script>
</head>Click the button below to see the actual performance metrics from loading this page:
function showMetrics() {
const metrics = RSL.PerformanceOptimizer.getMetrics();
if (!metrics.pageLoadTime) {
alert('Metrics not yet available. Wait for page to fully load.');
return;
}
// Display formatted metrics
console.log('Page Load Time:', metrics.pageLoadTime.toFixed(2) + 'ms');
console.log('First Contentful Paint:', (metrics.fcp || 'N/A'));
console.log('DOM Interactive:', metrics.domInteractive.toFixed(2) + 'ms');
}Configure the optimizer for your specific needs:
<!-- Enable console logging for development -->
<script
src="javascript/performance-optimizer.js"
data-track-metrics="true"
data-log-to-console="true">
</script>
<!-- Add custom preconnect domains -->
<script
src="javascript/performance-optimizer.js"
data-preconnect="https://cdn.example.com,https://api.example.com">
</script>
<!-- Disable lazy loading if needed -->
<script
src="javascript/performance-optimizer.js"
data-enable-lazy-loading="false">
</script>Send metrics to your analytics service:
// Wait for page to fully load
window.addEventListener('load', function() {
setTimeout(function() {
const metrics = RSL.PerformanceOptimizer.getMetrics();
// Send to your analytics service
fetch('/api/analytics/performance', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
page: window.location.pathname,
metrics: {
pageLoadTime: metrics.pageLoadTime,
fcp: metrics.fcp,
domInteractive: metrics.domInteractive,
ttfb: metrics.ttfb
},
timestamp: new Date().toISOString()
})
});
}, 100);
});Compare performance with and without the optimizer:
// Randomly assign users to control or test group
const testGroup = Math.random() < 0.5 ? 'control' : 'optimized';
// Only load optimizer for test group
if (testGroup === 'optimized') {
const script = document.createElement('script');
script.src = 'javascript/performance-optimizer.js';
script.setAttribute('data-track-metrics', 'true');
document.head.insertBefore(script, document.head.firstChild);
}
// Track results
window.addEventListener('load', function() {
setTimeout(function() {
const perfData = performance.getEntriesByType('navigation')[0];
const loadTime = perfData.loadEventEnd - perfData.fetchStart;
// Log to analytics
console.log('Group:', testGroup);
console.log('Load Time:', loadTime.toFixed(2) + 'ms');
// Send to analytics service
// ...
}, 100);
});