Reduce CLS by adjusting font loading and typographic metrics
Deploy to Development and Production / deploy (push) Successful in 5s Details

This commit is contained in:
Mark Poljanšek 2025-11-03 15:58:33 +01:00
parent 6b5ebb37b9
commit dda4633ee1
13 changed files with 26 additions and 24 deletions

View File

@ -17,6 +17,7 @@ body {
color: var(--color-text); color: var(--color-text);
background-color: var(--color-background); background-color: var(--color-background);
line-height: 1.7; line-height: 1.7;
font-size-adjust: 0.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }

View File

@ -6,6 +6,7 @@ h1, h2, h3 {
line-height: 1.2; line-height: 1.2;
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
color: var(--color-primary-accent); /* SPREMEMBA: Vsi naslovi so sedaj v primarni barvi */ color: var(--color-primary-accent); /* SPREMEMBA: Vsi naslovi so sedaj v primarni barvi */
font-size-adjust: 0.45;
} }
p { p {

View File

@ -33,8 +33,8 @@
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link as="style" 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=swap" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><noscript> <link as="style" 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" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><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=swap" 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>
<!-- CSS Stylesheet --> <!-- CSS Stylesheet -->

View File

@ -8,8 +8,8 @@
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link as="style" 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=swap" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><noscript> <link as="style" 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" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><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=swap" 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>
<!-- CSS Stylesheet --> <!-- CSS Stylesheet -->

View File

@ -8,8 +8,8 @@
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link as="style" 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=swap" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><noscript> <link as="style" 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" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><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=swap" 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>
<!-- CSS Stylesheet --> <!-- CSS Stylesheet -->

View File

@ -8,8 +8,8 @@
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link as="style" 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=swap" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><noscript> <link as="style" 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" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><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=swap" 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>
<!-- CSS Stylesheet --> <!-- CSS Stylesheet -->

View File

@ -8,8 +8,8 @@
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link as="style" 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=swap" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><noscript> <link as="style" 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" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><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=swap" 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>
<!-- CSS Stylesheet --> <!-- CSS Stylesheet -->

View File

@ -8,8 +8,8 @@
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link as="style" 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=swap" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><noscript> <link as="style" 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" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><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=swap" 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>
<!-- CSS Stylesheet --> <!-- CSS Stylesheet -->

View File

@ -8,9 +8,9 @@
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link as="style" 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=swap" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/> <link as="style" 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" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>
<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=swap" 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 -->

View File

@ -8,8 +8,8 @@
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link as="style" 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=swap" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><noscript> <link as="style" 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" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><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=swap" 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>
<!-- CSS Stylesheet --> <!-- CSS Stylesheet -->

View File

@ -8,8 +8,8 @@
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link as="style" 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=swap" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><noscript> <link as="style" 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" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/><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=swap" 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>
<!-- CSS Stylesheet --> <!-- CSS Stylesheet -->

View File

@ -8,9 +8,9 @@
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link as="style" 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=swap" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/> <link as="style" 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" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>
<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=swap" 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>
<!-- CSS Stylesheet --> <!-- CSS Stylesheet -->
<style> <style>

View File

@ -8,9 +8,9 @@
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/> <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link as="style" 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=swap" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/> <link as="style" 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" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>
<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=swap" 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>
<!-- CSS Stylesheet --> <!-- CSS Stylesheet -->
<style> <style>