Merge pull request #119 from cryptomator/feature/loading-time-optimizations

Loading Time optimizations

Author: overheadhunter

README.md

@@ -14,3 +14,26 @@
   * for production builds simply run `npm run build`
   * for local development run `npm run dev`
   * for local production tests `npm run serve`
+
+## Optional Dependencies for Size Optimizations
+
+### Font Subsets
+To create subsets of font files, e.g. when we know only very few characters are required to render the title of the page "CRYPTOMATOR HUB":
+
+1. First install `pip install fonttools brotli`
+2. `pyftsubset quicksand-bold.woff2 --text="CRYPTOMATOR HUB" --verbose --flavor=woff2 --output-file=quicksand-bold.reduced.woff2`
+
+### Image Conversions
+Using WebP (for smaller images) or AVIF (for >80 kiB due to larger overhead) may yield in better compression. [Here](https://www.reddit.com/r/AV1/comments/aabqdc/lossless_compression_test_png_vs_webp_vs_avif/) is a (rather old) comparison benchmark. However, we need to test the best format ourselves.
+
+* `brew install libavif` (see [GitHub Project Page](https://github.com/AOMediaCodec/libavif?tab=readme-ov-file#installation) for other installation methods)
+  * Example (lossless): `avifenc -l input.png output.avif`
+  * Example (lossy): `avifenc --qcolor 70 --qalpha 100 --depth 8 input.png output.avif`
+* `brew install libwebm`
+  * Example (lossless): `cwebp -preset drawing -lossless -z 6 input.png -o output.webp`
+  * Example (lossy): `cwebp -preset drawing -q 90 -alpha_q 100 input.png -o output.webp`
+* `brew install optipng`
+  * Example: `optipng -o3 image.png`
+
+> [!TIP]
+> If you see color banding in lossy conversions, try avif with 10 bit color depth.

assets/css/custom.css

@@ -1,6 +1,6 @@
 /* custom classes: */
 .header-bg {
-  background-image: url(/img/home/header-background.png), linear-gradient(to bottom, #0b0f17 0%, #143454 38%, #3f8bd9 72%, #9ac7f5 90%);
+  background-image: url(/img/home/header-background.avif), linear-gradient(to bottom, #0b0f17 0%, #143454 38%, #3f8bd9 72%, #9ac7f5 90%);
   background-size: auto 100%;
 }
 

content/_index.de.html

@@ -69,7 +69,7 @@ <h2>Wie schützt Cryptomator deine Daten?</h2>
   <article class="prose prose-sm md:prose max-w-none md:max-w-none">
     <h2>Optimaler Schutz dank neuesten Technologie-Standards</h2>
     <figure class="mx-auto md:w-5/6 lg:w-2/3">
-      <img data-src="/de/img/home/split-screenshots.png" class="lazyload aspect-[1664/975] w-full" alt="Gegenüberstellung von verschlüsselten und entschlüsselten Daten in einem Cryptomator-Tresor"/>
+      <img data-src="/de/img/home/split-screenshots.avif" class="lazyload aspect-[1664/975] w-full" alt="Gegenüberstellung von verschlüsselten und entschlüsselten Daten in einem Cryptomator-Tresor"/>
       <figcaption>Schaut jemand in den Ordner in deiner Cloud, kann er keinerlei Rückschlüsse auf deine Daten ziehen.</figcaption>
     </figure>
   </article>

content/_index.en.html

@@ -69,7 +69,7 @@ <h2>How does Cryptomator protect your data?</h2>
   <article class="prose prose-sm md:prose max-w-none md:max-w-none">
     <h2>Optimal protection thanks to the latest technology standards</h2>
     <figure class="mx-auto md:w-5/6 lg:w-2/3">
-      <img data-src="/img/home/split-screenshots.png" class="lazyload aspect-[1664/975] w-full" alt="Comparison of encrypted and decrypted data in a Cryptomator vault"/>
+      <img data-src="/img/home/split-screenshots.avif" class="lazyload aspect-[1664/975] w-full" alt="Comparison of encrypted and decrypted data in a Cryptomator vault"/>
       <figcaption>If someone looks into the folder in your cloud, they cannot draw any conclusions about your data.</figcaption>
     </figure>
   </article>

layouts/_default/baseof.html

@@ -4,6 +4,13 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ .Title }}</title>
+    {{ block "preloads" . }}
+      <!-- optional additional page-specific preloads -->
+    {{ end }}
+    <link rel="preload" fetchpriority="low" as="image" href="favicon.ico" type="image/x-icon">
+    <link rel="preload" fetchpriority="low" as="image" href="img/logo.svg" type="image/svg+xml">
+    <link rel="preload" fetchpriority="low" href="/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" fetchpriority="low" href="/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     {{ if and (eq .Section "blog") .IsPage }}
       <meta name="description" content="{{ .Summary }}">
       <meta property="og:title" content="{{ .Title }}">
@@ -62,9 +69,6 @@
     {{ range .Translations }}
       <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .RelPermalink }}" />
     {{ end }}
-    {{ block "head" . }}
-      <!-- optional additional page-specific stuff that goes into head -->
-    {{ end }}
   </head>
   <body x-data="{ isNavOpen: false, globalData: { githubStargazers: null } }" x-init="determineGitHubStargazersCount('{{ .Site.Language.Lang }}', globalData)" :class="isNavOpen && 'overflow-hidden'" class="bg-dark font-body text-gray-900">
     {{ partial "nav.html" . }}

layouts/donate-thanks/single.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
   <div class="container text-center py-12">
     <header class="prose prose-sm md:prose max-w-none md:max-w-none">
-      <img src="/img/logo.svg" class="object-scale-down mx-auto w-1/4 mb-8" alt="Cryptomator Logo"/>
+      <img src="/img/logo.svg" class="object-scale-down mx-auto w-1/4 mb-8 aspect-1110/942" alt="Cryptomator Logo"/>
       <h1>{{ .Title }}</h1>
       {{ .Content }}
     </header>

layouts/downloads/list.html

@@ -1,4 +1,4 @@
-{{ define "head" }}
+{{ define "preloads" }}
   <link rel="dns-prefetch" href="https://github.com">
 {{ end }}
 {{ define "main" }}

layouts/downloads/single.html

@@ -1,4 +1,4 @@
-{{ define "head" }}
+{{ define "preloads" }}
   <link rel="dns-prefetch" href="https://github.com">
 {{ end }}
 {{ define "main" }}

layouts/hub/single.html

@@ -6,7 +6,7 @@
       </div>
       <div class="w-full lg:w-3/5">
         <div class="flex items-center mb-4">
-          <img src="/img/logo.svg" class="h-8" alt="Logo"/>
+          <img src="/img/logo.svg" class="h-8 aspect-1110/942" alt="Logo"/>
           <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR&nbsp;HUB</span>
         </div>
         <h1 class="font-headline font-medium text-3xl md:text-4xl leading-tight mb-6">{{ i18n "hub_header_title" . | safeHTML }}</h1>

layouts/index.html

@@ -1,5 +1,13 @@
-{{ define "head" }}
+{{ define "preloads" }}
   <link rel="prerender" href="{{ "/downloads" | absLangURL }}">
+  <link rel="preload" fetchpriority="high" as="image" href="img/home/header-background.avif" type="image/avif">
+  <link rel="preload" fetchpriority="high" as="image" href="img/home/woman-cloud.png" type="image/png">
+  <link rel="preload" fetchpriority="auto" href="/fonts/opensans-regular.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" fetchpriority="auto" href="/fonts/opensans-medium.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" fetchpriority="auto" href="/fonts/opensans-bold.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" fetchpriority="auto" href="/fonts/quicksand-regular.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" fetchpriority="auto" href="/fonts/quicksand-medium.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" fetchpriority="high" href="/fonts/quicksand-bold.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
 {{ end }}
 {{ define "main" }}
   <section class="flex items-center header-bg bg-dark bg-center min-vh-66 bg-repeat-x">
@@ -36,7 +44,7 @@ <h2 id="get-started" class="text-center font-headline font-medium text-xl md:tex
         <div class="flex justify-between items-center p-4 border-b border-primary">
           <h3>
             <div class="flex items-center">
-              <img src="/img/logo.svg" class="hidden md:block h-8 mr-2" alt="Logo"/>
+              <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt="Logo"/>
               <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR</span>
             </div>
           </h3>
@@ -74,7 +82,7 @@ <h4 class="font-medium lg:text-lg leading-relaxed">
         <div class="flex justify-between items-center p-4 border-b border-primary">
           <h3>
             <div class="flex items-center">
-              <img src="/img/logo.svg" class="hidden md:block h-8 mr-2" alt="Logo"/>
+              <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt="Logo"/>
               <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
             </div>
           </h3>