Добавил оптимизацию загрузки картинок
This commit is contained in:
@@ -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
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 -->
|
<!-- 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>
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user