Добавил оптимизацию загрузки картинок

This commit is contained in:
adlevin
2026-02-06 06:31:28 +03:00
parent 21361390d2
commit 56e4c1239b
7 changed files with 47 additions and 7 deletions

View File

@@ -438,12 +438,25 @@ a:hover {
height: 100%; height: 100%;
z-index: 1; z-index: 1;
flex-shrink: 0; flex-shrink: 0;
background-color: var(--primary-color);
overflow: hidden;
} }
.hero-image img { .hero-image img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
display: block;
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
} }
.hero-nav { .hero-nav {

BIN
assets/images/about.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
assets/images/hero-1.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
assets/images/hero-2.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
assets/images/hero-3.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

View File

@@ -38,6 +38,11 @@
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="assets/css/main.css?v=1.2"> <link rel="stylesheet" href="assets/css/main.css?v=1.2">
<!-- Preload hero slider images -->
<link rel="preload" as="image" href="assets/images/hero-1.jpg">
<link rel="preload" as="image" href="assets/images/hero-2.jpg">
<link rel="preload" as="image" href="assets/images/hero-3.jpg">
<!-- Fonts --> <!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -52,13 +57,13 @@
<nav class="navbar"> <nav class="navbar">
<div class="container"> <div class="container">
<div class="navbar-brand"> <div class="navbar-brand">
<img src="logo.svg" alt="ФИДЕМ" class="logo"> <img src="logo.svg" alt="ФИДЕМ" class="logo" loading="eager">
<div class="brand-info"> <div class="brand-info">
<span class="brand-text">ФИДЕМ</span> <span class="brand-text">ФИДЕМ</span>
<span class="brand-subtitle">медицинский центр</span> <span class="brand-subtitle">медицинский центр</span>
<div class="partner-info"> <div class="partner-info">
<span class="partner-text">Официальный партнер</span> <span class="partner-text">Официальный партнер</span>
<img src="assets/images/helix-logo.svg" alt="Helix" class="partner-logo"> <img src="assets/images/helix-logo.svg" alt="Helix" class="partner-logo" loading="eager">
<span class="partner-brand">HELIX</span> <span class="partner-brand">HELIX</span>
</div> </div>
</div> </div>
@@ -121,7 +126,10 @@
</div> </div>
</div> </div>
<div class="hero-image"> <div class="hero-image">
<img src="assets/images/hero-1.jpg" alt="Медицинский центр ФИДЕМ"> <picture>
<source srcset="assets/images/hero-1.webp" type="image/webp">
<img src="assets/images/hero-1.jpg" alt="Медицинский центр ФИДЕМ" loading="eager">
</picture>
</div> </div>
</div> </div>
@@ -139,7 +147,7 @@
</div> </div>
</div> </div>
<div class="hero-image"> <div class="hero-image">
<img src="assets/images/hero-2.jpg" alt="Лабораторная диагностика"> <img src="assets/images/hero-2.jpg" alt="Лабораторная диагностика" loading="eager">
</div> </div>
</div> </div>
@@ -157,7 +165,7 @@
</div> </div>
</div> </div>
<div class="hero-image"> <div class="hero-image">
<img src="assets/images/hero-3.jpg" alt="УЗИ диагностика"> <img src="assets/images/hero-3.jpg" alt="УЗИ диагностика" loading="eager">
</div> </div>
</div> </div>
</div> </div>
@@ -326,7 +334,10 @@
</div> </div>
<div class="about-image"> <div class="about-image">
<img src="assets/images/about.jpg" alt="О медицинском центре ФИДЕМ"> <picture>
<source srcset="assets/images/about.webp" type="image/webp">
<img src="assets/images/about.jpg" alt="О медицинском центре ФИДЕМ" loading="lazy">
</picture>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -21,7 +21,23 @@ server {
add_header Cache-Control "public, immutable"; add_header Cache-Control "public, immutable";
} }
# Image optimization
location ~* \.(jpg|jpeg|png|gif|svg|webp)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Vary "Accept-Encoding";
}
# WebP support with proper Content-Type
location ~* \.webp$ {
add_header Content-Type "image/webp";
expires 1y;
add_header Cache-Control "public, immutable";
}
# Gzip compression # Gzip compression
gzip on; gzip on;
gzip_types text/css application/javascript image/svg+xml; gzip_types text/css application/javascript image/svg+xml application/json text/plain;
gzip_min_length 1000;
gzip_vary on;
} }