Performance for Mobile Devices

1<!DOCTYPE html>
2<html>
3<head>
4    <!-- Inline critical CSS -->
5    <style>
6        /* Critical above-the-fold styles */
7        body { margin: 0; font-family: system-ui; }
8        .header { background: #fff; height: 60px; }
9        .hero { min-height: 100vh; background: linear-gradient(135deg, #667eea, #764ba2); }
10        .hero h1 { font-size: clamp(2rem, 6vw, 4rem); color: white; text-align: center; }
11        .btn-primary { padding: 12px 24px; background: #ff6b6b; color: white; border: none; border-radius: 6px; }
12    </style>
13    
14    <!-- Preload non-critical CSS -->
15    <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
16    <noscript><link rel="stylesheet" href="styles.css"></noscript>
17</head>

1/* Critical CSS - inline in head */
2.critical-content {
3    /* Only styles needed for above-fold content */
4    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui;
5    line-height: 1.6;
6    color: #333;
7}
8
9/* Non-critical CSS - loaded asynchronously */
10@media screen and (min-width: 768px) {
11    .enhanced-styles {
12        /* Desktop enhancements loaded after critical content */
13        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
14        transition: all 0.3s ease;
15    }
16}
17
18/* Print styles - lowest priority */
19@media print {
20    .no-print { display: none; }
21}

1/* Base mobile styles - highest priority */
2:root {
3    --font-size-base: 16px;
4    --color-primary: #667eea;
5    --space-unit: 1rem;
6    --transition-speed: 0.2s; /* Faster on mobile */
7}
8
9/* Essential mobile layout */
10.container {
11    width: 100%;
12    padding: 0 var(--space-unit);
13    max-width: 100vw; /* Prevent horizontal scroll */
14}
15
16.grid {
17    display: grid;
18    gap: var(--space-unit);
19    /* Single column on mobile - no complex calculations */
20}
21
22/* Progressive enhancement for larger screens */
23@media (min-width: 768px) {
24    .grid {
25        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
26        gap: calc(var(--space-unit) * 2);
27    }
28}

1/* Avoid expensive properties on mobile */
2.performance-optimized {
3    /* Use transform instead of changing position */
4    transform: translateX(0);
5    transition: transform var(--transition-speed) ease;
6    
7    /* Prefer opacity over visibility */
8    opacity: 1;
9    
10    /* Use will-change sparingly */
11    will-change: auto;
12}
13
14.performance-optimized:hover {
15    transform: translateX(5px); /* Hardware accelerated */
16}
17
18/* Efficient animations */
19@keyframes fadeIn {
20    from { opacity: 0; transform: translateY(20px); }
21    to { opacity: 1; transform: translateY(0); }
22}
23
24.animate-on-scroll {
25    animation: fadeIn 0.3s ease-out; /* Short duration */
26}
27
28/* Reduce motion on mobile when requested */
29@media (prefers-reduced-motion: reduce) {
30    * {
31        animation-duration: 0.01ms !important;
32        transition-duration: 0.01ms !important;
33    }
34}

1/* Utility-first approach for smaller bundles */
2.text-center { text-align: center; }
3.mt-4 { margin-top: 1rem; }
4.p-4 { padding: 1rem; }
5.bg-primary { background-color: var(--color-primary); }
6
7/* Combine similar selectors */
8.btn,
9.button,
10.form-button {
11    display: inline-flex;
12    align-items: center;
13    padding: 0.75rem 1.5rem;
14    border: none;
15    border-radius: 0.5rem;
16    cursor: pointer;
17    transition: all 0.2s ease;
18}
19
20/* Use CSS custom properties for theming */
21.theme-dark {
22    --color-bg: #1a1a1a;
23    --color-text: #ffffff;
24    --color-border: #333333;
25}

1// Network-aware resource loading
2function loadOptimalAssets() {
3    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
4    
5    if (connection) {
6        const { effectiveType, downlink, rtt } = connection;
7        
8        // Adapt loading strategy based on connection
9        if (effectiveType === 'slow-2g' || effectiveType === '2g') {
10            loadMinimalCSS();
11            disableNonEssentialAnimations();
12        } else if (effectiveType === '3g') {
13            loadProgressiveCSS();
14            enableEssentialAnimations();
15        } else {
16            loadFullCSS();
17            enableAllFeatures();
18        }
19        
20        console.log(`Connection: ${effectiveType}, Speed: ${downlink}Mbps, Latency: ${rtt}ms`);
21    }
22}
23
24function loadMinimalCSS() {
25    // Load only critical styles for slow connections
26    const criticalCSS = document.createElement('style');
27    criticalCSS.textContent = `
28        body { font-family: system-ui; margin: 0; }
29        .container { padding: 16px; max-width: 100%; }
30        .btn { padding: 12px 16px; background: #007bff; color: white; border: none; }
31    `;
32    document.head.appendChild(criticalCSS);
33}

1// Real-time performance monitoring
2class MobilePerformanceMonitor {
3    constructor() {
4        this.metrics = {};
5        this.thresholds = {
6            fcp: 1800, // First Contentful Paint
7            lcp: 2500, // Largest Contentful Paint
8            cls: 0.1,  // Cumulative Layout Shift
9            fid: 100   // First Input Delay
10        };
11    }
12    
13    measureCoreWebVitals() {
14        // Measure First Contentful Paint
15        new PerformanceObserver((list) => {
16            const entries = list.getEntries();
17            entries.forEach(entry => {
18                if (entry.name === 'first-contentful-paint') {
19                    this.metrics.fcp = entry.startTime;
20                    this.optimizeIfNeeded('fcp', entry.startTime);
21                }
22            });
23        }).observe({ entryTypes: ['paint'] });
24        
25        // Measure Largest Contentful Paint
26        new PerformanceObserver((list) => {
27            const entries = list.getEntries();
28            const lastEntry = entries[entries.length - 1];
29            this.metrics.lcp = lastEntry.startTime;
30            this.optimizeIfNeeded('lcp', lastEntry.startTime);
31        }).observe({ entryTypes: ['largest-contentful-paint'] });
32        
33        // Measure Cumulative Layout Shift
34        new PerformanceObserver((list) => {
35            let clsValue = 0;
36            entries.forEach(entry => {
37                if (!entry.hadRecentInput) {
38                    clsValue += entry.value;
39                }
40            });
41            this.metrics.cls = clsValue;
42            this.optimizeIfNeeded('cls', clsValue);
43        }).observe({ entryTypes: ['layout-shift'] });
44    }
45    
46    optimizeIfNeeded(metric, value) {
47        if (value > this.thresholds[metric]) {
48            console.warn(`Performance issue detected: ${metric} = ${value}`);
49            this.applyOptimizations(metric);
50        }
51    }
52    
53    applyOptimizations(metric) {
54        switch(metric) {
55            case 'fcp':
56                // Reduce CSS complexity
57                this.simplifyStyling();
58                break;
59            case 'lcp':
60                // Optimize largest content element
61                this.optimizeLargestContent();
62                break;
63            case 'cls':
64                // Fix layout shifts
65                this.stabilizeLayout();
66                break;
67        }
68    }
69    
70    simplifyStyling() {
71        // Remove non-essential styles
72        document.querySelectorAll('[class*="animation"]').forEach(el => {
73            el.style.animation = 'none';
74        });
75    }
76    
77    optimizeLargestContent() {
78        // Lazy load non-critical images
79        document.querySelectorAll('img').forEach(img => {
80            if (!img.getAttribute('loading')) {
81                img.setAttribute('loading', 'lazy');
82            }
83        });
84    }
85    
86    stabilizeLayout() {
87        // Add explicit dimensions to prevent layout shifts
88        document.querySelectorAll('img, video').forEach(media => {
89            if (!media.style.aspectRatio) {
90                const width = media.getAttribute('width');
91                const height = media.getAttribute('height');
92                if (width && height) {
93                    media.style.aspectRatio = `${width} / ${height}`;
94                }
95            }
96        });
97    }
98}

1/* Battery-aware optimizations */
2@media (max-resolution: 150dpi) {
3    .high-res-only { display: none; }
4}
5
6/* Memory-constrained device optimizations */
7@media (pointer: coarse) and (max-width: 768px) {
8    .complex-animation { animation: none; }
9    .gpu-intensive { filter: none; }
10    .transform-3d { transform: none; }
11}
12
13/* Reduce complexity on older devices */
14@supports not (display: grid) {
15    .modern-layout {
16        display: flex;
17        flex-wrap: wrap;
18    }
19}