/* * Performance Optimizations for Quanta Platform * Target: Improve PageSpeed Insights Score from 67 to 90+ * Focus: Reduce CLS, Improve LCP, Add Security */ /* ============================================== 1. REDUCE CUMULATIVE LAYOUT SHIFT (CLS) ============================================== */ /* Reserve space for hero section to prevent shifts */ .hero-section { min-height: 500px; contain: layout style paint; } @media (max-width: 768px) { .hero-section { min-height: 400px; } } /* Reserve space for stats section */ .stats { min-height: 200px; contain: layout style paint; } /* Reserve space for course cards */ .course-card { min-height: 350px; contain: layout style paint; } /* Prevent image layout shifts */ img { max-width: 100%; height: auto; } img[width][height] { aspect-ratio: attr(width) / attr(height); } /* ============================================== 2. FONT LOADING OPTIMIZATION ============================================== */ /* Use system fonts while web fonts load */ body.fonts-loading { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; } /* Switch to web fonts when loaded */ body.fonts-loaded { font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; } /* ============================================== 3. IMPROVE LARGEST CONTENTFUL PAINT (LCP) ============================================== */ /* Prioritize above-the-fold content */ .hero-section { content-visibility: auto; } /* Lazy load below-the-fold sections */ .features-section, .courses-section, .testimonials-section, .footer { content-visibility: auto; contain-intrinsic-size: 0 500px; } /* ============================================== 4. REDUCE RENDER BLOCKING ============================================== */ /* Critical CSS is inlined in */ /* Non-critical CSS loaded with media="print" onload */ /* ============================================== 5. ACCESSIBILITY IMPROVEMENTS ============================================== */ /* Ensure sufficient color contrast */ .btn-primary { color: #ffffff; background: linear-gradient(135deg, #1387C8, #4FB5E6); /* Contrast ratio: 4.5:1 minimum */ } .btn-outline { color: #1387C8; border: 2px solid #1387C8; /* Contrast ratio: 4.5:1 minimum */ } /* Focus indicators for keyboard navigation */ a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 3px solid #4FB5E6; outline-offset: 2px; } /* Skip to main content link */ .skip-to-content { position: absolute; top: -40px; left: 0; background: #1387C8; color: white; padding: 8px; text-decoration: none; z-index: 100; } .skip-to-content:focus { top: 0; } /* ============================================== 6. ANIMATION PERFORMANCE ============================================== */ /* Use transform and opacity for animations (GPU accelerated) */ @media (prefers-reduced-motion: no-preference) { .fade-in-up { animation: fadeInUp 0.6s ease; will-change: transform, opacity; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } } /* Respect user preference for reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================== 7. MOBILE OPTIMIZATIONS ============================================== */ /* Improve tap targets */ .btn, a, button { min-height: 44px; min-width: 44px; } /* Prevent text size adjustment */ body { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } /* Smooth scrolling */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ============================================== 8. IMAGE OPTIMIZATION ============================================== */ /* Lazy load images below the fold */ img[loading="lazy"] { content-visibility: auto; } /* Aspect ratio boxes to prevent CLS */ .aspect-ratio-box { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ overflow: hidden; } .aspect-ratio-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* ============================================== 9. PRINT STYLES ============================================== */ @media print { /* Hide non-essential elements */ .navbar, .footer, .btn, .mobile-menu-toggle { display: none !important; } /* Optimize for printing */ body { font-size: 12pt; line-height: 1.5; color: #000; background: #fff; } /* Page breaks */ h1, h2, h3 { page-break-after: avoid; } img { max-width: 100% !important; } } /* ============================================== 10. DARK MODE SUPPORT ============================================== */ @media (prefers-color-scheme: dark) { /* Optional: Add dark mode styles if needed */ /* Currently not implemented per design requirements */ } /* ============================================== 11. LOADING STATES ============================================== */ /* Skeleton loading for better perceived performance */ .skeleton { background: linear-gradient( 90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75% ); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================== 12. CRITICAL PERFORMANCE HINTS ============================================== */ /* * Performance Checklist: * * ✅ Fonts: Preconnect to fonts.gstatic.com * ✅ Images: Use aspect-ratio to prevent CLS * ✅ Layout: Reserve space with min-height * ✅ Animation: Use transform/opacity only * ✅ Loading: Lazy load below-the-fold content * ✅ Accessibility: Sufficient contrast ratios * ✅ Mobile: Touch targets 44x44px minimum * ✅ Security: CSP, HSTS headers enabled * * Target Scores: * - Performance: 90+ (current: 67) * - Accessibility: 95+ (current: 93) * - Best Practices: 95+ (current: 81) * - SEO: 95+ (current: 91) */