cc optimizations

torbjornbp · Feb 25, 2025 · 92f5966 · 92f5966
1 parent cbeb0d7
commit 92f5966
Show file tree

Hide file tree

Showing 17 changed files with 318 additions and 133 deletions.
diff --git a/archetypes/default.md b/archetypes/default.md
diff --git a/hugo.yaml b/hugo.yaml
@@ -1,9 +1,7 @@
-baseurl: "https://torbjorn.no/"  # please update this to your actual URL
+baseurl: "https://torbjorn.no/"
 languageCode: "en-us"
 title: "Torbjørn Bakken Pedersen's home page"
-theme: "xmin"
-#disqusShortname: ""
-ignoreFiles: ["\\.Rmd$", "\\.Rmarkdown$", "_cache$"]
+ignoreFiles: ["_cache$"]
 footnotereturnlinkcontents: "↩"
 date-format: 2006-01-02
 buildDrafts: false
@@ -38,6 +36,7 @@ menu:
       weight: 3
     - name: RSS
       url: "index.xml"
+      weight: 4
 
 params:
   description: "Torbjørn Bakken Pedersen's personal web page"

diff --git a/layouts/404.html b/layouts/404.html
@@ -0,0 +1,6 @@
+{{ partial "header.html" . }}
+
+<h1>404 NOT FOUND</h1>
+<p>The page you requested does not exist.</p>
+
+{{ partial "footer.html" . }}
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
@@ -10,7 +10,7 @@
 {{- $caption := .Title -}}
 {{- $src := .Destination -}}
 {{- $imgBd5 := md5 $src -}}
-{{- $dataSzes := "800px" -}}
+{{- $dataSzes := "(max-width: 320px) 320px, (max-width: 640px) 640px, 800px" -}}
 {{- $holder := "GIP" -}}
 {{- $hint := "photo" -}}
 {{- $filter := "box" -}}
@@ -33,7 +33,7 @@
                                 {{- if lt $imgRsc.Width 800 -}}
                                     {{- $imgRsc.RelPermalink }} {{ $imgRsc.Width }}w
                                 {{- else -}}
-                                    {{- (cond (gt $imgRsc.Width .) ($imgRsc.Process (print "resize " . "x webp " $hint " " $filter)) $imgRsc).RelPermalink }} {{ . }}w
+                                    {{- (cond (gt $imgRsc.Width .) ($imgRsc.Process (print "resize " . "x webp q85 " $hint " " $filter)) $imgRsc).RelPermalink }} {{ . }}w
                                 {{- end -}}
                             {{- end -}}
                         {{- end -}}
@@ -55,34 +55,16 @@
                         alt="{{ $alt }}" 
                         title="{{ $alt }}" 
                         loading="lazy" 
-                        fetchpriority="high" 
+                        fetchpriority="auto" 
                         data-pagefind-ignore />
                 </picture>
             </a>
         </div>
     {{- end -}}
 {{- else -}}
-    <p class="ctr legal"><em>Image unavailable.</em></p>
+    <div class="image-error">
+        <p><strong>Image unavailable:</strong> <em>"{{ $src }}"</em> could not be found. Check the file path or name.</p>
+    </div>
 {{- end -}}
 {{- with $caption -}}<p class="imgCaption">{{ $caption | $.Page.RenderString }}</p>{{- end }}
 
-<style>
-.bigImgDiv a {
-    display: block;
-    background: none;
-    border: none;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-    cursor: zoom-in;
-}
-
-.bigImgDiv a:hover {
-    background-color: transparent;
-}
-
-.bigImgDiv a:hover img {
-    opacity: 0.9;
-    transition: opacity 0.2s ease-in-out;
-}
-</style>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -11,13 +11,9 @@ <h1>{{ .Title | markdownify }}</h1>
   {{ if .IsHome }}{{ $pages = .Site.RegularPages }}{{ end }}
   {{ range (where $pages "Section" "!=" "") }}
   <div class="post-item">
-    <span class="date"><strong>{{ .Date.Format "2006-01-02" }} -</strong></span>
-    <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
+    <span class="date"><strong>{{ .Date.Format "2006-01-02" }} -</strong></span><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
   </div>
   {{ end }}
 </div>
 
-{{- if .Site.Params.goatcounter }}
-  {{ partial "analytics.html" . -}}
-{{- end}}
 {{ partial "footer.html" . }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -13,9 +13,6 @@ <h1><span class="title">{{ .Title | markdownify }}</span></h1>
 <main>
 {{ .Content }}
 </main>
-{{- if .Site.Params.goatcounter }}
-  {{ partial "analytics.html" . -}}
-{{- end}}
 {{ partial "footer.html" . }}
 
 
diff --git a/layouts/partials/analytics.html b/layouts/partials/analytics.html
@@ -1,3 +1,10 @@
-<script id="partials/analytics.html" 
-  data-goatcounter="https://{{ .Site.Params.goatcounter }}.goatcounter.com/count"
-  async src="//gc.zgo.at/count.js"></script>
+<script>
+// Delay loading analytics until after page content is loaded
+window.addEventListener('load', function() {
+  var script = document.createElement('script');
+  script.src = '//gc.zgo.at/count.js';
+  script.setAttribute('data-goatcounter', 'https://{{ .Site.Params.goatcounter }}.goatcounter.com/count');
+  script.setAttribute('async', '');
+  document.body.appendChild(script);
+});
+</script>
diff --git a/layouts/partials/clown.html b/layouts/partials/clown.html
@@ -4,8 +4,9 @@
   </svg>
 </button>
 
-<script>
-(function() {
+<script defer>
+// Defer non-critical JavaScript
+document.addEventListener('DOMContentLoaded', function() {
   const btn = document.getElementById('font-change-button');
 
   function setFontState(isComicSans) {
@@ -17,12 +18,23 @@
     localStorage.setItem('useComicSans', isComicSans);
   }
 
-  const savedState = localStorage.getItem('useComicSans') === 'true';
-  setFontState(savedState);
+  // Use requestIdleCallback for non-critical initialization
+  if (window.requestIdleCallback) {
+    requestIdleCallback(function() {
+      const savedState = localStorage.getItem('useComicSans') === 'true';
+      setFontState(savedState);
+    });
+  } else {
+    // Fallback for browsers that don't support requestIdleCallback
+    setTimeout(function() {
+      const savedState = localStorage.getItem('useComicSans') === 'true';
+      setFontState(savedState);
+    }, 200);
+  }
 
   btn.addEventListener('click', function() {
     const newState = !document.body.classList.contains('comic-sans');
     setFontState(newState);
   });
-})();
+});
 </script>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -0,0 +1,12 @@
+  <footer>
+  {{ with .Site.Params.footer }}
+  <hr/>
+  {{ replace . "{Year}" now.Year | markdownify}}
+  {{ end }}
+  </footer>
+
+  {{- if .Site.Params.goatcounter }}
+    {{ partial "analytics.html" . -}}
+  {{- end}}
+  </body>
+</html>
diff --git a/layouts/partials/head_custom.html b/layouts/partials/head_custom.html
@@ -0,0 +1 @@
+<!-- Custom head content -->
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -6,6 +6,38 @@
     <title>{{ .Title }} | {{ .Site.Title }}</title>
     <meta name="description" content="{{ .Description }}" />
 
+    <!-- Preconnect to external domains -->
+    <link rel="preconnect" href="https://gc.zgo.at">
+    <link rel="preconnect" href="https://{{ .Site.Params.goatcounter }}.goatcounter.com">
+
+    <!-- Preload primary font -->
+    <link rel="preload" href="/fonts/IosevkaCustomAile-Regular-reducedmore.woff2" as="font" type="font/woff2" crossorigin>
+
+    <!-- Inline critical CSS -->
+    <style>
+      /* Essential styles for above-the-fold content */
+      body {max-width: 800px; margin: auto; padding: 1em; overflow-y: scroll;}
+      .menu, .article-meta, footer {text-align: center;}
+      .menu {padding: 0;}
+      .menu li {display: inline-block;}
+      .menu a {
+        text-decoration: none; 
+        background: #f9f9f9; 
+        border: 1px solid #aaa; 
+        box-shadow: 2px 2px #ddd;
+        padding: 5px; 
+        margin: 4px;
+      }
+      .clown-container {text-align: center; font-size: 2em; margin: 0;}
+      .site-title {text-align: center; font-size: 1em;}
+      h1 {font-size: 1.7em;}
+      hr {height: 1px; background-color: #aaa; border: none; max-width: calc(100% - 10px);}
+      .posts-list .post-item {margin: 0;}
+      .posts-list .date {margin-right: 0.5em;}
+      a {color: royalblue;}
+      a:hover {color: white; background-color: royalblue;}
+    </style>
+
     <!-- OpenGraph tags -->
     <meta property="og:title" content="{{ .Title }}" />
     <meta property="og:description" content="{{ .Description }}" />
@@ -20,9 +52,14 @@
     <meta name="twitter:title" content="{{ .Title }}">
     <meta name="twitter:description" content="{{ .Description }}">
     <meta name="twitter:image" content="{{ with .Params.images }}{{ ($.Page.Resources.GetMatch (index . 0)).Permalink }}{{ else }}{{ .Site.Params.defaultImage | absURL }}{{ end }}">
-    <!-- Stylesheets -->
-    <link rel="stylesheet" href="{{ "css/style.css" | relURL }}" />
-    <link rel="stylesheet" href="{{ "css/fonts.css" | relURL }}" />
+
+    <!-- Non-critical stylesheets with media queries for delayed loading -->
+    <link rel="stylesheet" href="{{ "css/style.css" | relURL }}" media="print" onload="this.media='all'">
+    <link rel="stylesheet" href="{{ "css/fonts.css" | relURL }}" media="print" onload="this.media='all'">
+    <noscript>
+      <link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
+      <link rel="stylesheet" href="{{ "css/fonts.css" | relURL }}">
+    </noscript>
 
     <!-- Custom head content -->
     {{ partial "head_custom.html" . }}
@@ -33,9 +70,9 @@
     {{ end }}
   </head>
   <body>
-    <div style="text-align: center; font-size: 2em; margin: 0em">{{ partial "clown.html" . }}</div> 
+    <div class="clown-container">{{ partial "clown.html" . }}</div> 
     <nav>
-      <h1 style="text-align: center; font-size: 1em">Torbjørn Bakken Pedersen's page</h1>
+      <h1 class="site-title">Torbjørn Bakken Pedersen's page</h1>
       <ul class="menu">
         {{ range .Site.Menus.main }}
         <li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>

diff --git a/layouts/shortcodes/webamp.html b/layouts/shortcodes/webamp.html
@@ -17,6 +17,7 @@
     return new Promise((resolve, reject) => {
       const script = document.createElement('script');
       script.src = url;
+      script.async = true;
       script.onload = resolve;
       script.onerror = reject;
       document.body.appendChild(script);
@@ -28,12 +29,13 @@
       launchWebamp();
       return;
     }
-
+    
     try {
+      // Load locally hosted webamp files
       await Promise.all([
-        loadScript('https://unpkg.com/webamp@1.5.0/built/webamp.bundle.min.js'),
-        loadScript('https://unpkg.com/butterchurn@2.6.7/lib/butterchurn.min.js'),
-        loadScript('https://unpkg.com/butterchurn-presets@2.4.7/lib/butterchurnPresets.min.js')
+        loadScript('/js/webamp/webamp.bundle.min.js'),
+        loadScript('/js/webamp/butterchurn.min.js'),
+        loadScript('/js/webamp/butterchurnPresets.min.js')
       ]);
 
       launchWebamp();