Добавил оптимизацию загрузки картинок
This commit is contained in:
@@ -438,12 +438,25 @@ a:hover {
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
background-color: var(--primary-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
animation: fadeIn 0.3s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-nav {
|
||||
|
||||
BIN
assets/images/about.webp
Normal file
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
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
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
BIN
assets/images/hero-3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
23
index.html
23
index.html
@@ -38,6 +38,11 @@
|
||||
<!-- CSS -->
|
||||
<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 -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
@@ -52,13 +57,13 @@
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<img src="logo.svg" alt="ФИДЕМ" class="logo">
|
||||
<img src="logo.svg" alt="ФИДЕМ" class="logo" loading="eager">
|
||||
<div class="brand-info">
|
||||
<span class="brand-text">ФИДЕМ</span>
|
||||
<span class="brand-subtitle">медицинский центр</span>
|
||||
<div class="partner-info">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -121,7 +126,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
@@ -139,7 +147,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-image">
|
||||
<img src="assets/images/hero-2.jpg" alt="Лабораторная диагностика">
|
||||
<img src="assets/images/hero-2.jpg" alt="Лабораторная диагностика" loading="eager">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -157,7 +165,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
@@ -326,7 +334,10 @@
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -21,7 +21,23 @@ server {
|
||||
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 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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user