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> <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"/> <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> </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 --> <!-- Kritični in razdeljeni CSS -->
<style> <style>
body { background-color: #fdfdfd; } body { background-color: #fdfdfd; }
@ -74,10 +74,10 @@
} }
} }
</style> </style>
<link as="style" href="/assets/css/style-home.min.css" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/> <link as="style" href="/assets/css/style-home.min.css" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>
<noscript> <noscript>
<link href="/assets/css/style-home.min.css" rel="stylesheet"/> <link href="/assets/css/style-home.min.css" rel="stylesheet"/>
</noscript> </noscript>
</head> </head>
<body class="homepage"> <body class="homepage">
<!-- ========================= HEADER ========================= --> <!-- ========================= HEADER ========================= -->
@ -107,7 +107,7 @@
<section class="slide active"> <section class="slide active">
<div class="slide-content"> <div class="slide-content">
<figure class="slide-image"> <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> </figure>
<div class="slide-text"> <div class="slide-text">
<!-- === PORTRET === --> <!-- === PORTRET === -->
@ -136,7 +136,7 @@
<section class="slide"> <section class="slide">
<div class="slide-content"> <div class="slide-content">
<figure class="slide-image"> <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> </figure>
<div class="slide-text"> <div class="slide-text">
<h2> <h2>
@ -155,8 +155,8 @@
<section class="slide"> <section class="slide">
<div class="slide-content"> <div class="slide-content">
<figure class="slide-image"> <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"/> <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">
</figure> </img></figure>
<div class="slide-text"> <div class="slide-text">
<h2>Potovanje k samemu sebi</h2> <h2>Potovanje k samemu sebi</h2>
<p> <p>
@ -172,7 +172,7 @@
<section class="slide"> <section class="slide">
<div class="slide-content"> <div class="slide-content">
<figure class="slide-image"> <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> </figure>
<div class="slide-text"> <div class="slide-text">
<h2>Spoznajte lastni žarek zaupanja</h2> <h2>Spoznajte lastni žarek zaupanja</h2>
@ -186,7 +186,7 @@
<section class="slide"> <section class="slide">
<div class="slide-content"> <div class="slide-content">
<figure class="slide-image"> <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> </figure>
<div class="slide-text"> <div class="slide-text">
<h2>Starodavni modreci so poudarjali: Spoznajte samega sebe najprej, preden spoznaš svet.</h2> <h2>Starodavni modreci so poudarjali: Spoznajte samega sebe najprej, preden spoznaš svet.</h2>
@ -200,7 +200,7 @@
<section class="slide"> <section class="slide">
<div class="slide-content"> <div class="slide-content">
<figure class="slide-image"> <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> </figure>
<div class="slide-text"> <div class="slide-text">
<h2>Začutiti sebe, radost, energijo</h2> <h2>Začutiti sebe, radost, energijo</h2>
@ -214,7 +214,7 @@
<section class="slide"> <section class="slide">
<div class="slide-content"> <div class="slide-content">
<figure class="slide-image"> <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> </figure>
<div class="slide-text"> <div class="slide-text">
<h2>Pristno začutiti sebe</h2> <h2>Pristno začutiti sebe</h2>
@ -229,7 +229,7 @@
<section class="slide"> <section class="slide">
<div class="slide-content"> <div class="slide-content">
<figure class="slide-image"> <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> </figure>
<div class="slide-text"> <div class="slide-text">
<h2>Naredite prvi korak</h2> <h2>Naredite prvi korak</h2>
@ -264,6 +264,6 @@
</p> </p>
</footer> </footer>
<!-- Povezava na obstoječo JavaScript datoteko --> <!-- 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> </body>
</html> </html>