/* ============================================
PERFORMANCE UTILITIES & OPTIMIZATIONS
Fast Loading, Smooth Rendering, Best Practices
============================================ */
/* ===== FONT OPTIMIZATION ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
/* Use system fonts as fallback (faster than external) */
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ===== IMAGES OPTIMIZATION ===== */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Lazy loaded images */
img[loading="lazy"] {
background: linear-gradient(90deg, #f3f4f6, #e5e7eb);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
/* ===== PERFORMANCE: CONTAIN & CONTAINMENT ===== */
.contain-layout {
contain: layout;
}
.contain-paint {
contain: paint;
}
.contain-strict {
contain: strict;
}
/* ===== PERFORMANCE: WILL-CHANGE ===== */
.will-animate {
will-change: transform, opacity;
}
.will-animate-scroll {
will-change: transform;
}
.will-animate-fade {
will-change: opacity;
}
/* ===== GPU ACCELERATION ===== */
.gpu-accelerate {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
/* ===== SMOOTH RENDERING ===== */
.smooth-scroll {
scroll-behavior: smooth;
}
/* ===== CRITICAL RENDERING PATH ===== */
/* Prioritize visibility of above-the-fold content */
.above-fold {
font-display: swap;
}
/* ===== DEBOUNCE SCROLL & RESIZE ===== */
.debounce-scroll {
pointer-events: none;
}
.debounce-scroll.active {
pointer-events: auto;
}
/* ===== LAZY LOAD PLACEHOLDERS ===== */
.lazy-placeholder {
background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
min-height: 200px;
}
/* ===== SMALLER BUNDLE SIZE TIPS ===== */
/* Use CSS for animations instead of JavaScript */
.efficient-animation {
animation: efficientMove 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes efficientMove {
from {
transform: translate(0, 0);
}
to {
transform: translate(0, -10px);
}
}
/* ===== NETWORK REQUEST OPTIMIZATION ===== */
/* Critical CSS - Load immediately */
.critical-css {
/* Already inline in HTML */
}
/* Non-critical CSS - Load asynchronously */
@media print {
.no-print {
display: none !important;
}
}
/* ===== BROWSER PAINTING OPTIMIZATION ===== */
/* Minimize repaints and reflows */
.minimal-paint {
transform: translateZ(0);
will-change: transform;
}
/* ===== PRELOAD & PREFETCH HINTS ===== */
/* Add to for best resources:
*/
/* ===== REDUCE MOTION FOR ACCESSIBILITY & PERFORMANCE ===== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ===== DARK MODE - NO PERFORMANCE HIT ===== */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
}
img {
opacity: 0.8;
}
}
/* ===== OPTIMIZED GRADIENTS ===== */
.gradient-optimized {
background: linear-gradient(135deg, #667eea, #764ba2);
/* Single gradient instead of multiple */
}
/* ===== FONT SIZE OPTIMIZATION ===== */
/* Use relative units (rem/em) for better scalability */
html {
font-size: 16px;
}
body {
font-size: 1rem;
line-height: 1.5;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
/* ===== OPTIMIZE FOR MOBILE ===== */
@media (max-width: 640px) {
* {
/* Remove expensive shadows on mobile */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
/* Reduce animation speed on mobile */
.animate-* {
animation-duration: 0.3s !important;
}
}
/* ===== OPTIMIZE TRANSITIONS ===== */
/* Use transform & opacity (GPU accelerated) instead of top/left */
.transition-optimized {
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
/* NOT OPTIMIZED - Causes reflows: */
/* transition: top 0.3s ease-out, left 0.3s ease-out; */
/* ===== CACHE OPTIMIZATION ===== */
/* Set cache headers for static assets:
Cache-Control: public, max-age=31536000 (1 year for versioned files)
Cache-Control: public, max-age=3600 (1 hour for HTML)
*/
/* ===== RESOURCE HINTS ===== */
/* Use in HTML head:
*/
/* ===== NETWORK FIRST STRATEGY ===== */
/* For PWA: Try network first, fallback to cache */
/* ===== LAZY BACKGROUND IMAGES ===== */
.lazy-bg {
background-image: linear-gradient(to right, #f3f4f6, #e5e7eb);
animation: shimmer 1.5s infinite;
}
.lazy-bg.loaded {
animation: none;
}
/* ===== CODE SPLITTING HINTS ===== */
/* Webpack/Bundler will handle this automatically with:
@webpackPrefetch
@webpackPreload
*/
/* ===== PERFORMANCE METRICS ===== */
/* Metrics to monitor:
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Cumulative Layout Shift (CLS)
- First Input Delay (FID)
- Time to Interactive (TTI)
*/
/* ===== FRAMEWORK OPTIMIZATION ===== */
/* If using React/Vue:
- Code splitting via dynamic imports
- Tree shaking unused code
- Minification & compression
- Image optimization (WebP format)
*/
/* ===== BEST PRACTICES ===== */
/* 1. Minimize CSS & remove unused styles
2. Combine multiple files into one
3. Use CSS Grid/Flexbox (more efficient than floats)
4. Inline critical CSS in HTML head
5. Load non-critical CSS asynchronously
6. Use CSS variables for theming instead of JS
7. Avoid @import in CSS (blocks rendering)
8. Use CSS containment for complex layouts
9. Optimize images (JPEG, PNG, WebP formats)
10. Use media queries for responsive images
*/
/* ===== COMPRESSION UTILITIES ===== */
.compress-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.compress-text-multi {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ===== FAST LOADING WITH CRITICAL RENDERING ===== */
/* Load critical resources first:
1. HTML
2. Critical CSS (inline in head)
3. Fonts (with font-display: swap)
4. Above-fold images (with lazy loading for below-fold)
5. JavaScript (defer non-critical scripts)
*/
/* ===== PERFORMANCE CHECKLIST ===== */
/*
☐ Minimize and compress CSS
☐ Remove unused CSS (PurgeCSS)
☐ Inline critical CSS
☐ Use CSS Grid/Flexbox
☐ Optimize images (multiple formats)
☐ Lazy load images & iframes
☐ Use system fonts or variable fonts
☐ Minimize HTTP requests
☐ Use CDN for static assets
☐ Enable GZIP compression
☐ Set proper cache headers
☐ Minimize JavaScript
☐ Defer non-critical JS
☐ Use service workers for offline
☐ Monitor Core Web Vitals
☐ Test on slow networks
☐ Use Lighthouse audits
☐ Optimize for mobile
☐ Use WebP for images
☐ Implement progressive enhancement
*/
/* ===== FAST 3G OPTIMIZATION ===== */
@media (max-width: 430px) {
/* Further reduce complexity on slow networks */
.hide-on-slow {
display: none;
}
.simplify-animation {
animation: none;
transition: none;
}
}
/* ===== PRINT OPTIMIZATION ===== */
@media print {
/* Hide non-essential elements */
nav, footer, .no-print {
display: none !important;
}
/* Use black text for printing */
* {
color: black !important;
background: white !important;
box-shadow: none !important;
}
}
/* ===== VIEWPORT CONFIGURATION ===== */
/* Ensure in HTML head:
*/
/* ===== RESPONSIVE IMAGE SRCSET ===== */
/* Use in HTML:
*/
/* ===== RESOURCE BUDGET ===== */
/*
Target budget (Fast 3G):
- Total: < 170KB
- CSS: < 30KB
- JavaScript: < 100KB
- Images: < 40KB
- Fonts: < 10KB
*/