/* ==========================================================================
#PERFORMANCE OPTIMIZATIONS - ADSOLUCE
Optimisations pour améliorer les performances du site
========================================================================== */
/* Critical CSS - Styles essentiels chargés en priorité */
.header {
background: #1B4B53;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
padding: 15px 0;
}
.hero {
background: linear-gradient(135deg, #1B4B53 0%, #0D8287 100%);
color: white;
padding: 120px 0 80px;
margin-top: 70px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Lazy loading styles */
.lazy {
opacity: 0;
transition: opacity 0.3s;
}
.lazy.loaded {
opacity: 1;
}
/* Optimize images */
img {
max-width: 100%;
height: auto;
loading: lazy;
decoding: async;
}
/* Critical path optimization */
.above-fold {
contain: layout style paint;
}
/* Reduce layout shifts */
.aspect-ratio-16-9 {
aspect-ratio: 16 / 9;
}
.aspect-ratio-4-3 {
aspect-ratio: 4 / 3;
}
.aspect-ratio-1-1 {
aspect-ratio: 1 / 1;
}
/* GPU acceleration for animations */
.gpu-accelerated {
transform: translateZ(0);
will-change: transform;
}
/* Optimize fonts */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/inter-v12-latin-regular.woff2') format('woff2'),
url('/fonts/inter-v12-latin-regular.woff') format('woff');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/inter-v12-latin-700.woff2') format('woff2'),
url('/fonts/inter-v12-latin-700.woff') format('woff');
}
/* Minimize repaints */
.no-repaint {
contain: layout style paint;
content-visibility: auto;
}
/* Optimize third-party scripts */
.third-party-script {
loading: lazy;
}
/* ==========================================================================
#MEDIA QUERIES OPTIMISÉES
========================================================================== */
/* Préchargement conditionnel pour desktop */
@media (min-width: 1024px) {
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
}
/* Optimisations mobile */
@media (max-width: 1023px) {
.desktop-only {
display: none;
}
.mobile-only {
display: block;
}
/* Réduire la complexité des animations sur mobile */
* {
animation-duration: 0.3s !important;
}
}
/* ==========================================================================
#CRITICAL RESOURCE HINTS
========================================================================== */
/*
Ajouter dans le :
*/
/* ==========================================================================
#SERVICE WORKER CACHE STRATEGY
========================================================================== */
/*
Configuration recommandée pour le cache :
1. Cache First : CSS, JS, Images, Fonts
2. Network First : API calls, formulaires
3. Stale While Revalidate : Pages HTML
Fichiers à mettre en cache :
- /css/style.css
- /css/responsive.css
- /css/animations.css
- /js/main.js
- /fonts/*.woff2
- /images/logo.png
- /images/hero-bg.jpg
*/
/* ==========================================================================
#PERFORMANCE MONITORING
========================================================================== */
/*
Métriques Core Web Vitals à surveiller :
1. LCP (Largest Contentful Paint) : < 2.5s
2. FID (First Input Delay) : < 100ms
3. CLS (Cumulative Layout Shift) : < 0.1
Script de monitoring à ajouter :
*/