Core Web Vitals: improve page loading time and accessibility

assets/css/.gitignore

@@ -0,0 +1 @@
+chroma.css

static/css/itix.css → assets/css/itix.css

@@ -2,7 +2,7 @@
   /*
    * Theme colors 
    */
-  --main-color: #1976d2;
+  --main-color: #1975d2; /* Adjusted to ensure a 4.5:1 contrast ratio for accessibility */
   --main-background-color: #fcfcfc;
   --alternate-text-color: #145ca4;
   --main-text-color: #092949; /* 50% darker than main-color */
@@ -29,9 +29,9 @@
   /*
    * Fonts
    */
-  --default-font-list: "Source Serif Pro";
+  --default-font-list: "Source Serif Pro", serif;
   --mono-font-list: "JetBrains Mono", monospace;
-  --sans-preferred-font-list: "Source Sans Pro";
+  --sans-preferred-font-list: "Source Sans Pro", sans-serif;
 
 }
 
@@ -45,6 +45,13 @@
     url('/fonts/JetBrainsMono-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
+
+  /* 
+   * Core Web Vitals / Cumulative Layout Shift.
+   *
+   * Avoid showing invisible text while custom fonts load.
+   */
+  font-display: swap;
 }
 
 @font-face{
@@ -52,6 +59,13 @@
   src: url('/fonts/SourceSerifPro-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
+
+  /* 
+   * Core Web Vitals / Cumulative Layout Shift.
+   *
+   * Avoid showing invisible text while custom fonts load.
+   */
+   font-display: swap;
 }
 
 @font-face{
@@ -59,6 +73,13 @@
   src: url('/fonts/SourceSansPro-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
+
+  /* 
+   * Core Web Vitals / Cumulative Layout Shift.
+   *
+   * Avoid showing invisible text while custom fonts load.
+   */
+   font-display: swap;
 }
 
 @font-face {
@@ -290,7 +311,6 @@ pre:hover {
  * i18n
  */
 .tiny-flag {
-  height: 0.9rem;
   vertical-align: middle;
   margin-left: 5px;
   margin-right: 5px;

layouts/partials/article-headline.html

@@ -3,7 +3,7 @@
 <h4><a href="{{ .current.RelPermalink }}">{{ .current.Title }}
 {{- partial "lang-detection.html" .current -}}
 {{ if .current.Scratch.Get "en_article_in_fr_site" }}
-    <img src="/icons/en.svg" class="tiny-flag" alt="en flag">
+    <img src="/icons/en.svg" class="tiny-flag" alt="en flag" width="28" height="14">
 {{ end }}
 </a></h4>
 {{- partial "post-metadata.html" . -}}

layouts/partials/head.html

@@ -2,6 +2,30 @@
 <title>{{.Title}}</title>
 <meta charset="utf-8">
 
+<!--
+  -- Package all CSS files together and minify them.
+  -- The page loading time should improve.
+  -->
+{{ $chroma := resources.Get "css/chroma.css" }}
+{{ $itix := resources.Get "css/itix.css" }}
+{{ $css := slice $chroma $itix | resources.Concat "css/itix.css" | resources.Minify | resources.Fingerprint "sha512" }}
+<link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
+
+<!--
+  -- Core Web Vitals / Cumulative Layout Shift.
+  --
+  -- Preload all fonts and images to reduce layout shifts.
+  -->
+<link rel="preload" href="/fonts/JetBrainsMono-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" href="/fonts/JetBrainsMono-Regular.woff" as="font" type="font/woff" crossorigin="anonymous">
+<link rel="preload" href="/fonts/JetBrainsMono-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+<link rel="preload" href="/fonts/SourceSerifPro-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+<link rel="preload" href="/fonts/SourceSansPro-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+<link rel="preload" href="/fonts/material-icons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" href="/fonts/material-icons.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+<link rel="preload" href="/icons/en.svg" as="image" type="image/svg+xml">
+<link rel="preload" href="/icons/fr.svg" as="image" type="image/svg+xml">
+
 {{ if .IsHome -}}
 <meta name="description" content="{{ .Site.Params.description }}">
 {{- else -}}
@@ -30,10 +54,6 @@
 {{ template "_internal/opengraph.html" . }}
 {{ template "_internal/twitter_cards.html" . }}
 
-<!-- The chroma syntax highlighter needs a separate CSS that can be generated using "hugo gen chromastyles --style=your-style > static/css/chroma.css" -->
-<link rel="stylesheet" href="/css/chroma.css">
-<link rel="stylesheet" href="/css/itix.css">
-
 <!-- The search page is the only one to require Javascript -->
 {{ if eq .Type "search" }}
 <!--

layouts/partials/menu.html

@@ -43,12 +43,12 @@
             {{- if .IsTranslated -}}
             <!-- Try to redirect the user to the translated page if possible -->
             {{- range .AllTranslations }}
-            <a href="{{ .RelPermalink }}"><img src="/icons/{{ .Lang }}.svg" class="tiny-flag" alt="{{ .Lang }} flag"></a>
+            <a href="{{ .RelPermalink }}"><img src="/icons/{{ .Lang }}.svg" class="tiny-flag" width="28" height="14" alt="{{ .Lang }} flag"></a>
             {{- end -}}
             {{- else -}}
             <!-- Otherwise, redirect it to the homepage -->
             {{- range site.Sites }}
-            <a href="{{ .Home.RelPermalink }}"><img src="/icons/{{ .Language.Lang }}.svg" class="tiny-flag" alt="{{ .Language.Lang }} flag"></a>
+            <a href="{{ .Home.RelPermalink }}"><img src="/icons/{{ .Language.Lang }}.svg" class="tiny-flag" width="28" height="14" alt="{{ .Language.Lang }} flag"></a>
             {{- end -}}
             {{- end }}
         </div>