Merge pull request #12 from jungvonmatt/feature/resource-hints

perf(resource-hints): Adds preload tag for stage images

Author: Ben Zörb

hugo-modules/core/utils/asset/image.html

@@ -14,6 +14,7 @@
       )
     ) -}}
 */}}
+{{- $globals := .globals -}}
 {{- $context := .context | default dict -}}
 {{- $options := .options | default dict -}}
 {{- $params := (merge $context $options) -}}
@@ -29,6 +30,7 @@
 {{- $loading :=  cond (eq $params.lazy true) "lazy" ($params.loading | default false) -}}
 {{- $ratio := $params.ratio -}}
 {{- $sizes := $params.sizes -}}
+{{- $preload := $params.preload  | default false -}}
 
 {{- $image_attributes := partialCached "utils/html/attribute" (dict
   "loading" $loading
@@ -49,13 +51,30 @@
         {{- $height := .height -}}
           {{- range $srcsets -}}
             <source sizes="{{- $local_sizes -}}" srcset="{{- .srcset -}}" type="{{- .type -}}">
+            {{- $preload_attr := (dict
+              "as" "image"
+              "imagesizes" $local_sizes
+              "imagesrcset" .srcset
+              "type" .type
+            ) -}}
+            {{- if and $preload (eq .type "image/avif") (not (in ($globals.Scratch.Get "preload") $preload_attr)) -}}
+              {{- $globals.Scratch.Add "preload" (slice $preload_attr) -}}
+            {{- end -}}
           {{- end -}}
-          <img src="{{- $src -}}" width="{{- $width -}}" height="{{- $height -}}" {{ $image_attributes }} alt="{{- $alt -}}">
+          <img src="{{- $src -}}" width="{{- $width -}}" height="{{- $height -}}" {{ $image_attributes }} alt="{{- $alt -}}"{{ with $params.preload }} fetchpriority="high"{{ end }}>
       {{- end -}}
     {{- else -}}
       {{- with $url -}}
         {{- $src := $params.src | default (cond (hasPrefix . "//") (print "https:" .) .) -}}
-        <img src="{{- $src -}}" width="{{- $width -}}" height="{{- $height -}}" {{ $image_attributes }} alt="{{- $alt -}}">
+        <img src="{{- $src -}}" width="{{- $width -}}" height="{{- $height -}}" {{ $image_attributes }} alt="{{- $alt -}}"{{ with $params.preload }} fetchpriority="high"{{ end }}>
+        {{- $preload_attr := (dict
+          "as" "image"
+          "href" $src
+          "type" $mime_type
+        ) -}}
+        {{- if and $preload (eq .type "image/avif") (not (in ($globals.Scratch.Get "preload") $preload_attr)) -}}
+          {{- $globals.Scratch.Add "preload" (slice $preload_attr) -}}
+        {{- end -}}
       {{- end -}}
     {{- end -}}
   </picture>

hugo-modules/core/utils/asset/video.html

@@ -13,17 +13,23 @@
       )
     ) -}}
 */}}
+{{- $globals := .globals -}}
 {{- $context := .context | default dict -}}
 {{- $options := .options | default dict -}}
 {{- $params := (merge $context $options) -}}
 {{- $mime_type := $params.mime_type -}}
 {{- $class_name := $params.class_name -}}
 {{- $url := $params.src | default $params.url -}}
+{{- $width := $params.width -}}
+{{- $height := $params.height -}}
 {{- $loop := $params.loop | default true -}}
 {{- $autoplay := $params.autoplay | default true -}}
+{{- $playsinline := $params.playsinline | default true -}}
 {{- $controls := $params.controls | default false -}}
 {{- $poster := $params.poster | default false -}}
 {{- $muted := (or $autoplay $params.muted) -}}
+{{- $loading :=  cond (eq $params.lazy true) "lazy" ($params.loading | default false) -}}
+{{- $preload := $params.preload  | default false -}}
 
 {{- $attributes := partialCached "utils/html/attribute" (dict
   "loop" $loop
@@ -35,7 +41,18 @@
 ) $params -}}
 
 {{- if in $mime_type "video" -}}
+  {{- $preload_attr := (dict
+    "as" "image"
+    "href" $poster
+  ) -}}
+  {{- if and $preload $poster (not (in ($globals.Scratch.Get "preload") $preload)) -}}
+    {{- $globals.Scratch.Add "preload" (slice $preload) -}}
+  {{- end -}}
   <video {{$attributes}}>
-    <source src="{{- $url -}}" type="{{- $mime_type -}}">
+    {{- if eq $loading "lazy" -}}
+      <source data-src="{{- $url -}}" type="{{- $mime_type -}}" />
+    {{- else -}}
+      <source src="{{- $url -}}" type="{{- $mime_type -}}" />
+    {{- end -}}
   </video>
 {{- end -}}

package-lock.json

@@ -239,7 +239,10 @@ export async function createApp({ appPath }: { appPath: string }): Promise<void>
   /**
    * Write it to disk.
    */
-  fs.writeFileSync(path.join(targetDir, 'package.json'), JSON.stringify(packageJson, null, 2) + os.EOL);
+  fs.writeFileSync(
+    path.join(targetDir, 'package.json'),
+    JSON.stringify(packageJson, null, 2) + os.EOL
+  );
 
   /**
    * These flags will be passed to `install()`.
@@ -251,6 +254,7 @@ export async function createApp({ appPath }: { appPath: string }): Promise<void>
   const dependencies = [
     '@fullhuman/postcss-purgecss@4',
     'autoprefixer@10',
+    'quicklink',
     'container-query-polyfill',
     'postcss@8',
     'postcss-cli@9',

packages/create-wekit-app/create-app.ts

@@ -7,8 +7,8 @@ ignoreFiles:
 disableHugoGeneratorInject: true
 enableRobotsTXT: true
 buildDrafts: true
-languageCode: en-us
-defaultContentLanguage: en-us
+languageCode: en
+defaultContentLanguage: en
 defaultContentLanguageInSubdir: true
 sitemap:
   changefreq: daily

templates/app/config/_default/config.yaml

@@ -1,2 +1,6 @@
 theme_color: "#fff"
 project_prefix: jvm
+
+preconnect:
+  - https://videos.ctfassets.net
+  - https://images.ctfassets.net

templates/app/config/_default/params.yaml

@@ -1,3 +1,18 @@
+{{- $settings := partial "utils/get-settings" . -}}
+
+{{- $params := merge site.Params (dict
+  "environment" (or (getenv "HUGO_ENVIRONMENT") hugo.Environment)
+) -}}
+
+{{- with .Params.content -}}
+  {{/* Prerender the page so we have the Scratch object available in "structure/head" to apply preload hints */}}
+  {{/* Stored in a variable so we don't render the content to screen */}}
+  {{ $tmp := partialCached "utils/get-partial.html" (dict
+    "context" .
+    "globals" $
+  ) . }}
+{{- end -}}
+
 <!doctype html>
 <html lang="{{ (index (split site.LanguageCode "-") 0) | default "en" }}">
   <head>

templates/app/layouts/_default/baseof.html

@@ -1,12 +1,12 @@
 {{ define "main" }}
   {{- $pages := .Pages -}}
   {{ with .Params.content }}
-    {{ partial "utils/get-partial" (dict
+    {{ partialCached "utils/get-partial" (dict
       "context" .
       "globals" $
       "options" (dict
         "pages" $pages
       )
-    ) }}
+    ) . }}
   {{ end }}
 {{ end }}