diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 31ecb9a..942c426 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -17,8 +17,8 @@
 {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Title | safeHTML }}
 {{ end -}}
 {{ $style := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "css/style.css" . | toCSS | minify | fingerprint -}}
-<link rel="stylesheet" href="{{ $style.Permalink }}" {{ printf "integrity=%q" $style.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous">
-{{- range .Params.custom_css -}}<link rel="stylesheet" href="{{ . | absURL }}">{{- end -}}
+<link rel="stylesheet preload prefetch" as="style" href="{{ $style.Permalink }}" {{ printf "integrity=%q" $style.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous">
+{{- range .Params.custom_css -}}<link rel="stylesheet preload prefetch" as="style" href="{{ . | absURL }}">{{- end -}}
 {{- block "head" . -}}{{- end -}}
 {{- if templates.Exists "partials/extra-head.html" -}}{{- partial "extra-head.html" . -}}{{- end -}}</head>
 <body id="page">
@@ -39,7 +39,7 @@
 	{{ $linkshare := resources.Get "js/link-share.js" | minify | fingerprint -}}
 	<script async src="{{ $linkshare.Permalink }}" {{ printf "integrity=%q" $linkshare.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous"></script>
 	{{- end -}}
-	{{- range .Params.custom_js -}}<script type="text/javascript" src="{{ . | absURL }}"></script>{{- end }}
+	{{- range .Params.custom_js -}}<script async type="text/javascript" src="{{ . | absURL }}"></script>{{- end }}
 	{{- partial "mathjax.html" . -}}
 	{{- if templates.Exists "partials/extra-foot.html" -}}{{- partial "extra-foot.html" . -}}{{- end }}
 </body>
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index 0afe081..7512c50 100644
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -1,30 +1,103 @@
-<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
-    {{- if .Get "link" -}}
-        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
-    {{- end -}}
-    <img src="{{ .Get "src" }}"
-         {{- if or (.Get "alt") (.Get "caption") }}
-         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
-         {{- end -}}
-         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
-         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
-         {{- with .Get "loading" }} loading="{{ . }}"{{ end -}}
-         loading="lazy"
-    /><!-- Closing img tag -->
-    {{- if .Get "link" }}</a>{{ end -}}
-    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
-        <figcaption>
-            {{ with (.Get "title") -}}
-                <h4>{{ . }}</h4>
-            {{- end -}}
-            {{- if or (.Get "caption") (.Get "attr") -}}<p>
-                {{- .Get "caption" | markdownify -}}
-                {{- with .Get "attrlink" }}
-                    <a href="{{ . }}">
-                {{- end -}}
-                {{- .Get "attr" | markdownify -}}
-                {{- if .Get "attrlink" }}</a>{{ end }}</p>
+{{/*  Extending upon [https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html]  */}}
+{{/*  Help from [https://discourse.gohugo.io/t/has-anyone-a-webp-shortcode/35391]  */}}
+{{- $path := .Get "src" -}}
+{{- $link := .Get "link" -}}
+{{- $target := .Get "target" -}}
+{{- $rel := .Get "rel" -}}
+{{- $class := .Get "class" -}}
+{{- $alt := .Get "alt" -}}
+{{- $attr := .Get "attr" -}}
+{{- $attrlink := .Get "attrlink" -}}
+{{- $title := .Get "title" -}}
+{{- $width := .Get "width" -}}
+{{- $height := .Get "height" -}}
+{{- $caption := .Get "caption" -}}
+{{- $loading := .Get "loading" -}}
+{{- $jpg := "" -}}
+{{- $webp := "" -}}
+{{- $fitOptionstojpg := printf "%vx%v jpg" $width $height -}}
+{{- $fitOptionstowebp := printf "%vx%v webp" $width $height -}}
+
+{{- $msg1 := "The %q shortcode requires a parameter named %q. See %s" -}}
+{{- $msg2 := "The resource %q passed to the %q shortcode is not an image. See %s" -}}
+{{- $msg3 := "The resource %q passed to the %q shortcode could not be found. See %s" -}}
+
+{{- if not (findRE `http[s]{0,1}://` $path 1) -}}
+
+  {{ if not $path }}
+    {{ errorf $msg1 .Name "path" .Position }}
+  {{ end }}
+
+
+  {{- with $i := resources.Get $path -}}
+    {{- if eq $i.MediaType.MainType "image" -}}
+      {{- if not $width -}}{{- $width = $i.Width -}}{{- end -}}
+      {{- if not $height -}}{{- $height = $i.Height -}}{{- end -}}
+      {{- if eq $i.MediaType "image/webp" -}}
+        {{- $jpg = $i.Fit $fitOptionstojpg -}}
+        {{- $webp = $i -}}
+      {{- else if eq $i.MediaType "image/jpeg" -}}
+        {{- $webp = $i.Fit $fitOptionstowebp -}}
+        {{- $jpg = $i -}}
+      {{- else -}}
+        {{- $fitOptions := printf "%vx%v jpg" $width $height -}}{{- $jpg = $i.Fit $fitOptions -}}
+        {{- $fitOptions = printf "%vx%v webp" $width $height -}}{{- $webp = $i.Fit $fitOptions -}}
+      {{- end -}}
+
+      <figure{{ with $class }} class="{{ . }}" {{ end }}>
+        {{- if $link -}}
+          <a href="{{ $link }}"{{ with $target }} target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}>
+        {{- end -}}
+        <picture>
+          <source srcset="{{ $webp.RelPermalink }}" type="image/webp">
+          <source srcset="{{ $jpg.RelPermalink }}" type="image/jpeg">
+          <img src="{{ $webp.RelPermalink }}"
+          
+          {{- if or $alt $caption -}} alt="{{ with $alt }}{{ . }}{{ else }}{{ $caption | markdownify| plainify }}{{ end }}" {{- end -}} 
+          {{- with $jpg.Width }}  width="{{ . }}" {{ end -}} 
+          {{- with $jpg.Height }} height="{{ . }}" {{ end -}} 
+          {{- with $loading }} loading="{{ . }}" {{ end -}} />
+        </picture>
+        {{- if $link }}</a>{{ end -}}
+        {{- if or (or $title $caption) $attr -}}
+          <figcaption>
+            {{ with $title -}}<h4>{{ . }}</h4>{{- end -}}
+            {{- if or $caption $attr -}}<p>
+              {{- $caption | markdownify -}}
+              {{- with $attrlink }}<a href="{{ . }}">{{- end -}}
+                {{- $attr | markdownify -}}
+                {{- if $attrlink }}</a>{{ end }}</p>
             {{- end }}
-        </figcaption>
-    {{- end }}
-</figure>
+          </figcaption>
+        {{- end -}}
+      </figure>
+    {{- else -}}
+      {{- errorf $msg2 $path $.Name $.Position -}}
+    {{- end -}}
+  {{- else -}}
+    {{- errorf $msg3 $path .Name .Position -}}
+  {{- end -}}
+
+{{- else -}}
+  <figure{{ with $class }} class="{{ . }}" {{ end }}>
+    {{- if $link -}}<a href="{{ $link }}"{{ with $target }} target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}>{{- end -}}
+    <img src="{{ $path }}"
+    {{- if or $alt $caption -}} alt="{{ with $alt }}{{ . }}{{ else }}{{ $caption | markdownify| plainify }}{{ end }}" {{- end -}} 
+    {{- with $width }}  width="{{ . }}" {{ end -}} 
+    {{- with $height }} height="{{ . }}" {{ end -}} 
+    {{- with $loading }} loading="{{ . }}" {{ end -}} />
+    {{- if $link }}</a>{{ end -}}
+    {{- if or (or $title $caption) $attr -}}
+      <figcaption>
+        {{ with $title -}}<h4>{{ . }}</h4>{{- end -}}
+        {{- if or $caption $attr -}}<p>
+          {{- $caption | markdownify -}}
+          {{- with $attrlink }}<a href="{{ . }}">{{- end -}}
+            {{- $attr | markdownify -}}
+            {{- if $attrlink }}</a>{{ end }}</p>
+        {{- end }}
+      </figcaption>
+    {{- end -}}
+  </figure>
+
+{{- end -}}
