RSL Performance Optimizer - Playground

Copy-paste examples for testing the Performance Optimizer

Note: This page has the Performance Optimizer enabled with data-log-to-console="true". Open your browser's developer console (F12) to see performance metrics automatically logged after page load.

Example 1: Basic Usage (Minimal Setup)

The simplest way to add performance optimization to your page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>

    <!-- Performance Optimizer - Load first -->
    <script src="javascript/performance-optimizer.js"></script>

    <!-- Your other scripts and styles -->
    <link rel="stylesheet" href="styles/grid.css">
</head>
<body>
    <h1>My Website</h1>
    <p>Content here...</p>
</body>
</html>

Example 2: Custom Configuration

Configure the optimizer with data attributes:

<script
    src="javascript/performance-optimizer.js"
    data-track-metrics="true"
    data-log-to-console="true"
    data-enable-lazy-loading="true"
    data-preconnect="https://kit.fontawesome.com,https://fonts.googleapis.com">
</script>

Example 3: View Performance Metrics

Access performance metrics via JavaScript API:

JavaScript Code:

function showMetrics() {
    const metrics = RSL.PerformanceOptimizer.getMetrics();

    if (!metrics.pageLoadTime) {
        alert('Metrics not yet available. Wait for page load.');
        return;
    }

    const output = document.getElementById('metrics-output');
    output.style.display = 'block';
    output.innerHTML = `
        <div class="metric-row">
            <span class="metric-label">Page Load Time:</span>
            <span class="metric-value">${metrics.pageLoadTime.toFixed(2)} ms</span>
        </div>
        <div class="metric-row">
            <span class="metric-label">DOM Interactive:</span>
            <span class="metric-value">${metrics.domInteractive.toFixed(2)} ms</span>
        </div>
        <div class="metric-row">
            <span class="metric-label">First Contentful Paint:</span>
            <span class="metric-value">${metrics.fcp ? metrics.fcp.toFixed(2) + ' ms' : 'N/A'}</span>
        </div>
        <div class="metric-row">
            <span class="metric-label">Time to First Byte:</span>
            <span class="metric-value">${metrics.ttfb.toFixed(2)} ms</span>
        </div>
        <div class="metric-row">
            <span class="metric-label">DNS Lookup:</span>
            <span class="metric-value">${metrics.dns.toFixed(2)} ms</span>
        </div>
    `;
}

function logToConsole() {
    RSL.PerformanceOptimizer.logMetrics();
    alert('Check your browser console (F12) for detailed metrics.');
}

Example 4: Check Current Configuration

Verify which optimizations are enabled:

JavaScript Code:

function showConfig() {
    const config = RSL.PerformanceOptimizer.getConfig();

    const output = document.getElementById('config-output');
    output.style.display = 'block';
    output.innerHTML = `
        <div class="metric-row">
            <span class="metric-label">Track Metrics:</span>
            <span class="metric-value">${config.trackMetrics}</span>
        </div>
        <div class="metric-row">
            <span class="metric-label">Lazy Loading:</span>
            <span class="metric-value">${config.enableLazyLoading}</span>
        </div>
        <div class="metric-row">
            <span class="metric-label">Log to Console:</span>
            <span class="metric-value">${config.logToConsole}</span>
        </div>
        <div class="metric-row">
            <span class="metric-label">Preconnect Domains:</span>
            <span class="metric-value">${config.preconnectDomains.join(', ')}</span>
        </div>
    `;
}

Example 5: Automatic Lazy Loading

Images below the fold automatically get loading="lazy" added:

<!-- Original HTML -->
<img src="image1.jpg" alt="Example 1">
<img src="image2.jpg" alt="Example 2">

<!-- Performance Optimizer automatically transforms to: -->
<img src="image1.jpg" alt="Example 1"> <!-- In viewport, no lazy loading -->
<img src="image2.jpg" alt="Example 2" loading="lazy"> <!-- Below fold, lazy loaded -->

Note: The Performance Optimizer automatically: