Web Performance Basics

/* Base styles for all devices */
.card {
padding: 1rem;
margin-bottom: 1rem;
background-color: #fff;
border: 1px solid #ddd;
}

/* Enhanced styles for devices with hover capability */
@media (hover: hover) {
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
}

/* Enhanced styles for larger screens with more capabilities */
@media (min-width: 768px) and (min-resolution: 2dppx) {
.card {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
}

// Detect network conditions and capabilities
function getExperienceLevel() {
// Start with the assumption of a constrained experience
let level = 'lite';

// Check for device memory
if (navigator.deviceMemory > 4) {
  level = 'medium';
}

// Check for network conditions
if (navigator.connection) {
  const connection = navigator.connection;
  
  // Low data mode
  if (connection.saveData) {
    return 'lite'; // Override with lite experience
  }
  
  // Fast connection
  if (connection.effectiveType === '4g' && !connection.saveData) {
    level = level === 'medium' ? 'full' : 'medium';
  }
}

return level;
}

// Adjust the experience based on capabilities
function loadAppropriateExperience() {
const experienceLevel = getExperienceLevel();

switch (experienceLevel) {
  case 'lite':
    // Load minimal assets
    loadLiteAssets();
    break;
  case 'medium':
    // Load standard assets
    loadMediumAssets();
    break;
  case 'full':
    // Load enhanced assets
    loadFullAssets();
    break;
}
}

// Example implementations
function loadLiteAssets() {
// Load low-resolution images
document.querySelectorAll('[data-src-lite]').forEach(img => {
  img.src = img.getAttribute('data-src-lite');
});

// Load essential scripts only
import('./essential.js');
}

function loadMediumAssets() {
// Load standard resolution images
document.querySelectorAll('[data-src-medium]').forEach(img => {
  img.src = img.getAttribute('data-src-medium');
});

// Load standard features
import('./essential.js').then(() => import('./standard.js'));
}

function loadFullAssets() {
// Load high-resolution images
document.querySelectorAll('[data-src-full]').forEach(img => {
  img.src = img.getAttribute('data-src-full');
});

// Load all features
import('./essential.js')
  .then(() => import('./standard.js'))
  .then(() => import('./enhanced.js'));
}

// Register a service worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('ServiceWorker registered:', registration.scope);
    })
    .catch(error => {
      console.error('ServiceWorker registration failed:', error);
    });
});
}

// In sw.js (Service Worker file)
const CACHE_NAME = 'v1-cache';
const URLS_TO_CACHE = [
'/',
'/index.html',
'/styles/main.css',
'/scripts/main.js',
'/offline.html',
'/images/logo.svg'
];

// Install event - cache critical assets
self.addEventListener('install', event => {
event.waitUntil(
  caches.open(CACHE_NAME)
    .then(cache => {
      return cache.addAll(URLS_TO_CACHE);
    })
);
});

// Fetch event - serve from cache or network
self.addEventListener('fetch', event => {
event.respondWith(
  caches.match(event.request)
    .then(response => {
      // Cache hit - return the response from cache
      if (response) {
        return response;
      }
      
      // No cache match - fetch from network
      return fetch(event.request)
        .then(response => {
          // Check if we received a valid response
          if (!response || response.status !== 200 || response.type !== 'basic') {
            return response;
          }
          
          // Clone the response as it can only be used once
          const responseToCache = response.clone();
          
          // Open the cache and store the response
          caches.open(CACHE_NAME)
            .then(cache => {
              cache.put(event.request, responseToCache);
            });
          
          return response;
        })
        .catch(() => {
          // Network failed - serve offline page for HTML requests
          if (event.request.mode === 'navigate') {
            return caches.match('/offline.html');
          }
        });
    })
);
});

/* CSS for touch-friendly targets */
.button {
min-width: 44px;
min-height: 44px;
padding: 12px 16px;
/* Visual padding can be smaller than the actual touch target */
}

/* CSS for instant touch feedback */
.button {
transition: background-color 0.1s;
}

.button:active {
background-color: #e0e0e0;
/* Fast transition for active state */
}

/* JavaScript for smoother scrolling */
// Use passive listeners for scroll events
document.addEventListener('scroll', function() {
// Scroll handling code
}, { passive: true });