add font and css preloading links

.lighthouserc.yml

@@ -1,7 +1,7 @@
 ---
 ci:
   collect:
-    numberOfRuns: 2
+    numberOfRuns: 3
     staticDistDir: exampleSite/public
     url:
       - http://localhost/
@@ -13,12 +13,17 @@ ci:
     preset: "lighthouse:no-pwa"
     assertions:
       uses-long-cache-ttl: off
-      render-blocking-resources: off
+      tap-targets: warn
-      tap-targets: off
+      unsized-images: warn
-      first-contentful-paint: off
+      categories:performance:
-      first-meaningful-paint: off
+        - error
-      largest-contentful-paint: off
+        - minScore: 0.95
-      unsized-images: off
+      categories:accessibility:
+        - error
+        - minScore: 1
+      categories:seo:
+        - error
+        - minScore: 0.95
   upload:
     target: filesystem
     outputDir: lhci_reports

CHANGELOG.md

@@ -1,2 +1,3 @@
 - ENHANCEMENT
   - improve and normalize microblog formatting
+  - add font and css preloading links

exampleSite/content/_index.md

@@ -2,11 +2,16 @@
 title: Documentation
 ---
 
-[![Build Status](https://img.shields.io/drone/build/xoxys/hugo-geekdoc?logo=drone)](https://cloud.drone.io/xoxys/hugo-geekdoc)
+<!-- markdownlint-capture -->
-[![Hugo Version](https://img.shields.io/badge/hugo-0.65-blue.svg)](https://gohugo.io)
+<!-- markdownlint-disable MD033 -->
-[![GitHub release](https://img.shields.io/github/v/release/xoxys/hugo-geekdoc)](https://github.com/xoxys/hugo-geekdoc/releases/latest)
+
-[![GitHub contributors](https://img.shields.io/github/contributors/xoxys/hugo-geekdoc)](https://github.com/xoxys/hugo-geekdoc/graphs/contributors)
+<span class="badge-placeholder">[![Build Status](https://img.shields.io/drone/build/xoxys/hugo-geekdoc?logo=drone)](https://cloud.drone.io/xoxys/hugo-geekdoc)</span>
-[![License: MIT](https://img.shields.io/github/license/xoxys/hugo-geekdoc)](https://github.com/xoxys/hugo-geekdoc/blob/master/LICENSE)
+<span class="badge-placeholder">[![Hugo Version](https://img.shields.io/badge/hugo-0.65-blue.svg)](https://gohugo.io)</span>
+<span class="badge-placeholder">[![GitHub release](https://img.shields.io/github/v/release/xoxys/hugo-geekdoc)](https://github.com/xoxys/hugo-geekdoc/releases/latest)</span>
+<span class="badge-placeholder">[![GitHub contributors](https://img.shields.io/github/contributors/xoxys/hugo-geekdoc)](https://github.com/xoxys/hugo-geekdoc/graphs/contributors)</span>
+<span class="badge-placeholder">[![License: MIT](https://img.shields.io/github/license/xoxys/hugo-geekdoc)](https://github.com/xoxys/hugo-geekdoc/blob/master/LICENSE)</span>
+
+<!-- markdownlint-restore -->
 
 Geekdoc is a simple Hugo theme for documentations. It is intentionally designed as a fast and lean theme and may not fit the requirements of complex projects. If a more feature-complete theme is required there are a lot of got alternatives out there. You can find a demo and the full documentation at [https://geekdocs.de](https://geekdocs.de).
 

layouts/partials/head.html

@@ -5,7 +5,19 @@
 <title>{{ partial "title" . }} | {{ .Site.Title -}}</title>
 
 <link rel="icon" href="{{ "favicon/favicon-32x32.png" | relURL }}" type="image/x-icon">
+
+<link rel="preload" as="font" href="/fonts/Metropolis.woff2" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="/fonts/LiberationSans.woff2" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="/fonts/LiberationSans-Bold.woff2" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="/fonts/LiberationSans-BoldItalic.woff2" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="/fonts/LiberationSans-Italic.woff2" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="/fonts/LiberationMono.woff2" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="/fonts/DroidSans.woff2" type="font/woff2" crossorigin="anonymous">
+
+<link rel="preload" href="{{ "main.min.css" | relURL }}" as="style">
 <link rel="stylesheet" href="{{ "main.min.css" | relURL }}" media="screen">
+
+<link rel="preload" href="{{ "custom.css" | relURL }}" as="style">
 <link rel="stylesheet" href="{{ "custom.css" | relURL }}" media="screen">
 
 {{ with .OutputFormats.Get "rss" -}}

src/sass/_utils.scss

@@ -50,6 +50,11 @@
   display: none;
 }
 
+.badge-placeholder {
+  display: inline-block;
+  min-width: 4rem;
+}
+
 @mixin spin($duration) {
   animation: spin $duration ease infinite;
   @keyframes spin {