/* Performance Optimizations for Cross-Browser and Mobile */
/* Based on Web Performance Best Practices */
/* Critical CSS Inlining Preparation */
/* These styles should be inlined in the for fastest rendering */
/* Above-the-fold critical styles */
.critical-styles {
/* Base font loading optimization */
font-display: swap; /* Fallback font while loading */
font-loading: swap;
}
/* Font Loading Optimization */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
font-display: swap; /* Improves loading performance */
src: local('Roboto Mono Regular'), local('RobotoMono-Regular'),
url('https://fonts.gstatic.com/s/robotomono/v13/L0x5DF4xlVMF-BfR8bXMIjhFq3-cXbKDO1w.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Roboto Mono Bold'), local('RobotoMono-Bold'),
url('https://fonts.gstatic.com/s/robotomono/v13/L0x2DF4xlVMF-BfR8bXMIjhIq3-caXcI.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Image Loading Optimizations */
img {
/* Lazy loading for better performance */
loading: lazy;
/* Prevent layout shift */
height: auto;
/* Better image scaling with vendor prefixes */
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
/* Critical images that should load immediately */
.hero-image,
.logo img,
.above-fold img {
loading: eager;
}
/* WebP Image Support with Fallbacks */
.modern-image {
background-image: url('image.webp');
}
/* Fallback for browsers that don't support WebP */
.no-webp .modern-image {
background-image: url('image.jpg');
}
/* Performance-optimized animations */
.optimized-animation {
/* Use transform and opacity for better performance */
will-change: transform, opacity;
/* Hardware acceleration */
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
/* Optimized transitions */
.project-card,
.cta-button,
.feature-card {
/* Limit properties that trigger repaints */
will-change: transform, opacity;
/* Use GPU acceleration */
transform: translateZ(0);
}
/* Reduce layout thrashing */
.no-layout-thrash {
contain: layout style paint;
}
/* Resource Hints for Better Loading */
/* These should be added to the HTML head:
*/
/* CSS Containment for Performance */
.contained-element {
contain: layout style paint;
}
/* Optimize expensive properties */
.performance-optimized {
/* Avoid expensive filters when possible */
filter: none;
/* Minimize box-shadow usage */
box-shadow: none;
/* Use transform instead of changing layout properties */
transform: translate3d(0, 0, 0);
}
/* Critical loading performance */
.loading-optimized {
/* Prevent invisible text during font load */
font-display: swap;
/* Critical rendering path optimization */
contain: style layout;
/* Minimize reflows */
will-change: auto;
}
/* Network Performance - Minimize CSS size */
/* Use shorter property names where possible */
.compact {
margin: 0;
padding: 0;
border: 0;
}
/* Optimize for mobile networks */
@media (max-width: 768px) {
/* Reduce complexity on mobile */
.complex-animation {
animation: none;
}
.expensive-effects {
box-shadow: none;
filter: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Simpler gradients for mobile */
.mobile-optimized-gradient {
background: var(--primary-bg);
}
}
/* Optimize scroll performance */
.smooth-scroll {
/* Use scroll-behavior for supported browsers */
scroll-behavior: smooth;
/* Contain scroll painting */
contain: paint;
}
/* iOS-specific scroll optimization (legacy support) */
@supports (-webkit-overflow-scrolling: touch) {
.smooth-scroll {
-webkit-overflow-scrolling: touch;
}
}
/* Battery and CPU optimization */
@media (prefers-reduced-motion: reduce) {
/* Disable all animations for better battery life */
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Connection-aware optimizations */
@media (max-width: 480px) and (max-resolution: 150dpi) {
/* Low-end device optimizations */
.complex-layout {
display: block;
}
.expensive-visual {
background: var(--secondary-bg);
box-shadow: none;
border-radius: 4px;
}
}
/* JavaScript Performance Helpers */
.js-performance-optimized {
/* Hint to JS that these elements will change */
will-change: transform, opacity;
/* Isolate from other elements */
contain: layout;
}
/* Critical CSS for above-the-fold content */
.critical-header {
/* Essential header styles that should be inlined */
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 5%;
background: var(--secondary-bg, #121212);
color: var(--text-primary, #ffffff);
font-family: 'Roboto Mono', monospace;
}
.critical-navigation {
/* Essential navigation styles */
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.critical-navigation li {
margin-left: 2rem;
}
.critical-navigation a {
color: var(--text-primary, #ffffff);
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 2px;
text-transform: uppercase;
}
/* Loading states for better perceived performance */
.loading-skeleton {
background: linear-gradient(90deg,
var(--secondary-bg) 25%,
var(--button-bg) 50%,
var(--secondary-bg) 75%);
background-size: 200% 100%;
animation: loading-shimmer 2s infinite;
}
@keyframes loading-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* Optimized focus states */
.performance-focus:focus {
/* Use outline instead of box-shadow for better performance */
outline: 2px solid var(--space-blue);
outline-offset: 2px;
}
/* Memory-efficient star background */
.stars-optimized {
/* Use CSS generated content instead of large images */
background-image:
radial-gradient(2px 2px at 20px 30px, var(--star-color, #fff), transparent),
radial-gradient(2px 2px at 40px 70px, var(--star-color, #fff), transparent),
radial-gradient(1px 1px at 90px 40px, var(--star-color, #fff), transparent);
background-repeat: repeat;
background-size: 200px 100px;
}
/* Service Worker Cache Optimization */
.cache-optimized {
/* Styles that should be cached aggressively */
font-family: 'Roboto Mono', system-ui, monospace;
/* Fallback to system fonts if needed */
}
/* Intersection Observer Performance */
.lazy-load-target {
/* Prepare elements for intersection observer */
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.lazy-load-target.loaded {
opacity: 1;
transform: translateY(0);
}
/* Bundle size optimization */
.minimal-styles {
/* Use shorthand properties */
margin: 1rem 0;
padding: 1rem;
border: 1px solid var(--border-color);
background: var(--secondary-bg);
color: var(--text-primary);
font: 400 1rem/1.6 'Roboto Mono', monospace;
}
/* Critical path rendering optimization */
@media screen {
.screen-only {
display: block;
}
}
@media print {
.screen-only {
display: none;
}
}