feat: lazy load figures and gallery images

The proportion of image data in the typical payload of a website can be significant. Lazy loading is a solution that lowers initial page payload and load time, without removing content. Non-critical resources are instead loaded at the moment that they are needed.

Also, load MathJax async in head if required, rather than at end of body.

Close #1106

data/assets.toml

@@ -19,6 +19,7 @@
   version = "3"
   sri = ""  # No SRI as dynamically generated.
   url = "https://cdn.jsdelivr.net/npm/mathjax@%s/es5/tex-chtml.js"
+  async = true
 [js.isotope]
   version = "3.0.6"
   sri = "sha256-CBrpuqrMhXwcLLUd5tvQ4euBHCdh7wGlDfNz8vbu/iI="
@@ -59,6 +60,11 @@
   version = "8.4.3"
   sri = ""  # SRI unavailable.
   url = "https://cdnjs.cloudflare.com/ajax/libs/mermaid/%s/mermaid.min.js"
+[js.lazysizes]
+  version = "5.1.2"
+  sri = "sha256-Md1qLToewPeKjfAHU1zyPwOutccPAm5tahnaw7Osw0A="
+  url = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/%s/lazysizes.min.js"
+  async = true
 
 # CSS
 

layouts/partials/site_head.html

@@ -47,6 +47,12 @@
   <meta name="theme-color" content="{{ $scr.Get "primary" }}">
   {{ end }}
 
+  {{/* Config LaTeX math rendering. */}}
+  {{ if or .Params.math site.Params.math }}
+  {{ $mathjax_config := resources.Get "js/mathjax-config.js" }}
+  <script src="{{ $mathjax_config.RelPermalink }}"></script>
+  {{ end }}
+
   {{/* Attempt to load local vendor CSS, otherwise load from CDN. */}}
   {{ $scr.Set "vendor_css_filename" "main.min.css" }}
   {{ $scr.Set "vendor_js_filename" "main.min.js" }}
@@ -92,6 +98,20 @@
       {{ printf "<link rel=\"stylesheet\" href=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\">" (printf $css.instantsearchTheme.url $css.instantsearchTheme.version) $css.instantsearchTheme.sri | safeHTML }}
     {{ end }}
 
+    {{/* Load async scripts. */}}
+    {{ range $k, $v := site.Data.assets.js }}{{/* TODO: investigate why `where ... "async" true` does not work. */}}
+      {{ $load := $v.async }}
+
+      {{/* Only load MathJax if required. */}}
+      {{ if (eq $k "mathJax") | and (not (or $.Params.math site.Params.math)) }}
+        {{ $load = false }}
+      {{end}}
+
+      {{ if $load }}
+        {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" async></script>" (printf $v.url $v.version) $v.sri | safeHTML }}
+      {{end}}
+    {{end}}
+
   {{ end }}
 
   {{/* We cannot use SRI with Google Fonts because the CSS is dynamically generated according to the user agent. */}}

layouts/partials/site_js.html

@@ -1,11 +1,5 @@
     {{ $scr := $.Scratch }}
 
-    {{/* Config LaTeX math rendering. */}}
-    {{ if or .Params.math site.Params.math }}
-    {{ $mathjax_config := resources.Get "js/mathjax-config.js" }}
-    <script src="{{ $mathjax_config.RelPermalink }}"></script>
-    {{ end }}
-
     {{/* Attempt to load local vendor JS, otherwise load from CDN. */}}
     {{ $js := site.Data.assets.js }}
     {{ if not ($scr.Get "use_cdn") }}
@@ -28,10 +22,6 @@
         {{ end }}
       {{ end }}
 
-      {{/* LaTeX math rendering. */}}
-      {{ if or .Params.math site.Params.math }}
-      {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" async></script>" (printf $js.mathJax.url $js.mathJax.version) $js.mathJax.sri | safeHTML }}
-      {{ end }}
     {{ end }}
 
     {{/* Maps JS. */}}

layouts/shortcodes/figure.html

@@ -21,7 +21,7 @@
   <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{.}}"{{ end }}{{ with .Get "rel" }} rel="{{.}}"{{ end }}>
 {{ end -}}
 
-<img src="{{$image_src}}" alt="{{ with .Get "alt" }}{{.}}{{end}}" {{ with .Get "width" }}width="{{.}}" {{end}}{{ with .Get "height" }}height="{{.}}" {{end}}>
+<img data-src="{{$image_src}}" class="lazyload" alt="{{ with .Get "alt" }}{{.}}{{end}}" {{ with .Get "width" }}width="{{.}}" {{end}}{{ with .Get "height" }}height="{{.}}" {{end}}>
 
 {{- if or $lightbox (.Get "link") }}</a>{{ end }}
 

layouts/shortcodes/gallery.html

@@ -29,7 +29,7 @@
       {{ end }}
     {{ end }}
   <a data-fancybox="gallery-{{$album}}" href="{{ .RelPermalink }}" {{ with $caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }}>
-  <img src="{{ $image.RelPermalink }}" alt="">
+  <img data-src="{{ $image.RelPermalink }}" class="lazyload" alt="">
   </a>
   {{end}}
 
@@ -46,7 +46,7 @@
     {{ end }}
   {{ end }}
   <a data-fancybox="gallery{{ with .album }}-{{.}}{{ end }}" {{ with .caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }} href="{{$.Scratch.Get "src"}}">
-    <img src="{{$.Scratch.Get "src"}}" alt="">
+    <img data-src="{{$.Scratch.Get "src"}}" class="lazyload" alt="">
   </a>
   {{end}}
   {{else}}