Stabilize hero images to reduce CLS
Deploy to Development and Production / deploy (push) Successful in 5s Details

This commit is contained in:
Mark Poljanšek 2025-11-03 16:05:52 +01:00
parent dda4633ee1
commit b18033fbf8
1 changed files with 15 additions and 15 deletions

View File

@ -12,7 +12,7 @@
<noscript>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&amp;family=Montserrat:ital,wght@0,100..900;1,100..900&amp;display=optional" rel="stylesheet"/>
</noscript>
<link as="image" fetchpriority="high" href="/assets/images/home-slider-01-morje.webp" rel="preload" type="image/webp"/>
<link as="image" fetchpriority="high" href="/assets/images/home-slider-01-morje.webp" rel="preload" type="image/webp"/>
<!-- Kritični in razdeljeni CSS -->
<style>
body { background-color: #fdfdfd; }
@ -74,10 +74,10 @@
}
}
</style>
<link as="style" href="/assets/css/style-home.min.css" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>
<noscript>
<link href="/assets/css/style-home.min.css" rel="stylesheet"/>
</noscript>
<link as="style" href="/assets/css/style-home.min.css" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>
<noscript>
<link href="/assets/css/style-home.min.css" rel="stylesheet"/>
</noscript>
</head>
<body class="homepage">
<!-- ========================= HEADER ========================= -->
@ -107,7 +107,7 @@
<section class="slide active">
<div class="slide-content">
<figure class="slide-image">
<img alt="Morje s skalo v ozadju" height="629" loading="eager" src="/assets/images/home-slider-01-morje.webp" width="629"/>
<img alt="Morje s skalo v ozadju" height="629" loading="eager" src="/assets/images/home-slider-01-morje.webp" style="width:100%;height:auto;display:block;" width="629"/>
</figure>
<div class="slide-text">
<!-- === PORTRET === -->
@ -136,7 +136,7 @@
<section class="slide">
<div class="slide-content">
<figure class="slide-image">
<img alt="Pogled na palme in morje" decoding="async" height="1176" loading="lazy" sizes="(max-width: 900px) 100vw, 600px" src="/assets/images/home-slider-02-palme.webp" srcset="/assets/images/home-slider-02-palme-768w.webp 768w, /assets/images/home-slider-02-palme.webp 1167w" width="1167">
<img alt="Pogled na palme in morje" decoding="async" height="1176" loading="lazy" sizes="(max-width: 900px) 100vw, 600px" src="/assets/images/home-slider-02-palme.webp" srcset="/assets/images/home-slider-02-palme-768w.webp 768w, /assets/images/home-slider-02-palme.webp 1167w" style="width:100%;height:auto;display:block;" width="1167"/>
</figure>
<div class="slide-text">
<h2>
@ -155,8 +155,8 @@
<section class="slide">
<div class="slide-content">
<figure class="slide-image">
<img alt="Puščavska pokrajina" decoding="async" height="1191" loading="lazy" sizes="(max-width: 900px) 100vw, 600px" src="/assets/images/home-slider-03-puscava.webp" srcset="/assets/images/home-slider-03-puscava-768w.webp 768w, /assets/images/home-slider-03-puscava.webp 1191w" width="1191"/>
</figure>
<img alt="Puščavska pokrajina" decoding="async" height="1191" loading="lazy" sizes="(max-width: 900px) 100vw, 600px" src="/assets/images/home-slider-03-puscava.webp" srcset="/assets/images/home-slider-03-puscava-768w.webp 768w, /assets/images/home-slider-03-puscava.webp 1191w" style="width:100%;height:auto;display:block;" width="1191">
</img></figure>
<div class="slide-text">
<h2>Potovanje k samemu sebi</h2>
<p>
@ -172,7 +172,7 @@
<section class="slide">
<div class="slide-content">
<figure class="slide-image">
<img alt="Svetloba, ki sije v kanjon" decoding="async" height="1188" loading="lazy" sizes="(max-width: 900px) 100vw, 600px" src="/assets/images/home-slider-04-kanjon-svetloba.webp" srcset="/assets/images/home-slider-04-kanjon-svetloba-768w.webp 768w, /assets/images/home-slider-04-kanjon-svetloba.webp 1188w" width="1188"/>
<img alt="Svetloba, ki sije v kanjon" decoding="async" height="1188" loading="lazy" sizes="(max-width: 900px) 100vw, 600px" src="/assets/images/home-slider-04-kanjon-svetloba.webp" srcset="/assets/images/home-slider-04-kanjon-svetloba-768w.webp 768w, /assets/images/home-slider-04-kanjon-svetloba.webp 1188w" style="width:100%;height:auto;display:block;" width="1188"/>
</figure>
<div class="slide-text">
<h2>Spoznajte lastni žarek zaupanja</h2>
@ -186,7 +186,7 @@
<section class="slide">
<div class="slide-content">
<figure class="slide-image">
<img alt="Drevo, ki raste v soteski" decoding="async" height="1188" loading="lazy" sizes="(max-width: 900px) 100vw, 600px" src="/assets/images/home-slider-05-drevo-soteska.webp" srcset="/assets/images/home-slider-05-drevo-soteska-768w.webp 768w, /assets/images/home-slider-05-drevo-soteska.webp 1188w" width="1188"/>
<img alt="Drevo, ki raste v soteski" decoding="async" height="1188" loading="lazy" sizes="(max-width: 900px) 100vw, 600px" src="/assets/images/home-slider-05-drevo-soteska.webp" srcset="/assets/images/home-slider-05-drevo-soteska-768w.webp 768w, /assets/images/home-slider-05-drevo-soteska.webp 1188w" style="width:100%;height:auto;display:block;" width="1188"/>
</figure>
<div class="slide-text">
<h2>Starodavni modreci so poudarjali: Spoznajte samega sebe najprej, preden spoznaš svet.</h2>
@ -200,7 +200,7 @@
<section class="slide">
<div class="slide-content">
<figure class="slide-image">
<img alt="Rastlina, ki raste iz peska" decoding="async" height="1155" loading="lazy" sizes="(max-width: 900px) 100vw, 600px" src="/assets/images/home-slider-06-rastlina-pesek.webp" srcset="/assets/images/home-slider-06-rastlina-pesek-768w.webp 768w, /assets/images/home-slider-06-rastlina-pesek.webp 1191w" width="1191"/>
<img alt="Rastlina, ki raste iz peska" decoding="async" height="1155" loading="lazy" sizes="(max-width: 900px) 100vw, 600px" src="/assets/images/home-slider-06-rastlina-pesek.webp" srcset="/assets/images/home-slider-06-rastlina-pesek-768w.webp 768w, /assets/images/home-slider-06-rastlina-pesek.webp 1191w" style="width:100%;height:auto;display:block;" width="1191"/>
</figure>
<div class="slide-text">
<h2>Začutiti sebe, radost, energijo</h2>
@ -214,7 +214,7 @@
<section class="slide">
<div class="slide-content">
<figure class="slide-image">
<img alt="Barvita papiga na veji" decoding="async" height="1191" loading="lazy" sizes="(max-width: 900px) 100vw, 600px" src="/assets/images/home-slider-07-papiga.webp" srcset="/assets/images/home-slider-07-papiga-768w.webp 768w, /assets/images/home-slider-07-papiga.webp 1191w" width="1191"/>
<img alt="Barvita papiga na veji" decoding="async" height="1191" loading="lazy" sizes="(max-width: 900px) 100vw, 600px" src="/assets/images/home-slider-07-papiga.webp" srcset="/assets/images/home-slider-07-papiga-768w.webp 768w, /assets/images/home-slider-07-papiga.webp 1191w" style="width:100%;height:auto;display:block;" width="1191"/>
</figure>
<div class="slide-text">
<h2>Pristno začutiti sebe</h2>
@ -229,7 +229,7 @@
<section class="slide">
<div class="slide-content">
<figure class="slide-image">
<img alt="Peščene sipine" decoding="async" height="1191" loading="lazy" sizes="(max-width: 900px) 100vw, 600px" src="/assets/images/home-slider-08-sipine.webp" srcset="/assets/images/home-slider-08-sipine-768w.webp 768w, /assets/images/home-slider-08-sipine.webp 1191w" width="1191"/>
<img alt="Peščene sipine" decoding="async" height="1191" loading="lazy" sizes="(max-width: 900px) 100vw, 600px" src="/assets/images/home-slider-08-sipine.webp" srcset="/assets/images/home-slider-08-sipine-768w.webp 768w, /assets/images/home-slider-08-sipine.webp 1191w" style="width:100%;height:auto;display:block;" width="1191"/>
</figure>
<div class="slide-text">
<h2>Naredite prvi korak</h2>
@ -264,6 +264,6 @@
</p>
</footer>
<!-- Povezava na obstoječo JavaScript datoteko -->
<script defer src="/assets/js/main.min.js"></script>
<script defer="" src="/assets/js/main.min.js"></script>
</body>
</html>