Performance Optimizer

Quick Start (30 Seconds)

1 Include the Script

Add to the top of your <head> section for maximum benefit:

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

    <!-- Rest of your CSS and JS files -->
    <link rel="stylesheet" href="styles/grid.css">
</head>

2 That's It!

The script automatically optimizes your page. No configuration required.

Expected Results:

200-500ms faster First Contentful Paint (FCP)
300-800ms faster Largest Contentful Paint (LCP)
40-60% reduction in initial page weight (via lazy loading)
100-300ms faster external resource loading (CDNs)

What It Does

1. Resource Preconnection

Establishes early connections to external CDNs (FontAwesome, Google Fonts) before resources are requested.

Impact: Saves 100-300ms on external resource loading

2. Critical Resource Preloading

Tells the browser to prioritize loading grid.css, modern-theme.css , and layout.js.

Impact: Improves First Contentful Paint by 200-400ms

3. Native Lazy Loading

Automatically adds loading="lazy" to images and iframes not in the viewport.

Impact: Reduces initial page weight by 40-60%

4. Font Optimization

Adds font-display: swap to prevent invisible text while fonts load.

Impact: Eliminates FOIT (Flash of Invisible Text)

5. Performance Metrics Tracking

Collects detailed performance data using the Navigation Timing API.

Metrics tracked: DNS, TCP, TTFB, DOM Interactive, Page Load Time, First Contentful Paint

Configuration (Optional)

Configure via data attributes on the script tag:

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

Configuration Options

Attribute	Type	Default	Description
`data-preconnect`	String	FontAwesome, Google Fonts	Comma-separated list of domains to preconnect
`data-track-metrics`	Boolean	true	Enable/disable performance tracking
`data-log-to-console`	Boolean	false	Automatically log metrics to console on page load
`data-enable-lazy-loading`	Boolean	true	Enable native lazy loading for images/iframes

JavaScript API

Get Performance Metrics

// Wait for page load
window.addEventListener('load', function() {
    setTimeout(function() {
        const metrics = RSL.PerformanceOptimizer.getMetrics();
        console.log('Page Load Time:', metrics.pageLoadTime + 'ms');
        console.log('First Contentful Paint:', metrics.fcp + 'ms');
    }, 100);
});

Log Metrics to Console

// Manually log metrics after page load
RSL.PerformanceOptimizer.logMetrics();

API Reference

Method	Returns	Description
`getMetrics()`	Object	Returns performance metrics object with timing data
`logMetrics()`	void	Logs formatted metrics to browser console
`isEnabled()`	Boolean	Check if optimizer is running (always true)
`getConfig()`	Object	Returns current configuration settings

Metrics Object

The metrics object returned by getMetrics() contains:

Property	Type	Description
`pageLoadTime`	Number	Total time from fetch start to load complete (ms)
`fcp`	Number	First Contentful Paint - when first content renders (ms)
`dns`	Number	DNS lookup time (ms)
`tcp`	Number	TCP connection time (ms)
`ttfb`	Number	Time to First Byte - server response time (ms)
`download`	Number	Resource download time (ms)
`domInteractive`	Number	When DOM is interactive (ms)
`domComplete`	Number	When DOM is fully loaded (ms)
`domContentLoaded`	Number	DOMContentLoaded event duration (ms)

Measuring Performance Improvements

Method 1: Chrome DevTools Lighthouse

Open your page in Chrome
Open DevTools (Cmd+Option+I or F12)
Go to "Lighthouse" tab
Click "Analyze page load"
Compare before/after scores for:
- Performance score
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Total Blocking Time

Method 2: Network Tab

Open DevTools Network tab
Reload page with cache disabled (Cmd+Shift+R)
Check the waterfall chart
Look for earlier start times on critical resources
Verify external resources (FontAwesome) load faster

Method 3: Built-in Metrics API

Use the optimizer's built-in tracking:

// In browser console after page loads:
RSL.PerformanceOptimizer.logMetrics();

// Output:
// Page Load Time: 1234.56ms
// DOM Interactive: 567.89ms
// First Contentful Paint: 345.67ms
// ...

Best Practices

Pro Tip: Place the script as the FIRST script in your <head> for maximum benefit. Resource hints work best when added before any resources are requested.

When to Use

Large sites with many components and images
Content-heavy pages with long-scroll layouts
External resource-heavy sites using CDNs
Template galleries with many preview images
Production sites where every millisecond counts

When NOT to Use

Simple single-component demo pages
Development environments (adds minimal overhead)
Pages with no external resources or images

Important: The optimizer works best on large, complex pages. On simple pages with 1-2 components, the improvement may be negligible (10-50ms).

Browser Support

Supports all modern browsers:

Chrome 85+
Firefox 80+
Safari 14+
Edge 85+

Graceful degradation: Older browsers ignore unsupported features without errors.