added lazy loading for css and js

exampleSite/hugo.toml

@@ -122,31 +122,45 @@ notAlternative = true
 # CSS Plugins
 [[params.plugins.css]]
 link = "plugins/swiper/swiper-bundle.css"
+lazy = false
 [[params.plugins.css]]
 link = "plugins/glightbox/glightbox.css"
+lazy = true
 [[params.plugins.css]]
 link = "plugins/font-awesome/v6/brands.css"
+lazy = true
 [[params.plugins.css]]
 link = "plugins/font-awesome/v6/solid.css"
+lazy = true
 [[params.plugins.css]]
 link = "plugins/font-awesome/v6/icons.css"
+lazy = true
 
 # JS Plugins
 [[params.plugins.js]]
 link = "js/search.js"
+lazy = false
 [[params.plugins.js]]
 link = "plugins/swiper/swiper-bundle.js"
+lazy = false
 [[params.plugins.js]]
 link = "plugins/glightbox/glightbox.js"
+lazy = true
 [[params.plugins.js]]
 link = "js/gallery-slider.js"
+lazy = true
 [[params.plugins.js]]
 link = "js/accordion.js"
+lazy = true
 [[params.plugins.js]]
 link = "js/tab.js"
+lazy = true
 [[params.plugins.js]]
 link = "js/modal.js"
+lazy = true
 [[params.plugins.js]]
 link = "plugins/cookie.js"
+lazy = true
 [[params.plugins.js]]
 link = "plugins/youtube-lite.js"
+lazy = true

layouts/partials/essentials/script.html

@@ -1,5 +1,6 @@
 <!-- JS Plugins + Main script -->
 {{ $scripts := slice }}
+{{ $scriptsLazy := slice }}
 {{ range site.Params.plugins.js }}
   {{ if findRE "^http" .link }}
     <script
@@ -7,24 +8,39 @@
       type="application/javascript"
       {{ .attributes | safeHTMLAttr }}></script>
   {{ else }}
+    {{ if not .lazy }}
       {{ $scripts = $scripts | append (resources.Get .link) }}
+    {{ else }}
+      {{ $scriptsLazy = $scriptsLazy | append (resources.Get .link) }}
+    {{ end }}
   {{ end }}
 {{ end }}
 
 
 <!-- main script -->
 {{ $scripts = $scripts | append (resources.Get "js/main.js") }}
-{{ $scripts = $scripts | resources.Concat "js/script.js" }}
+{{ $scripts = $scripts | resources.Concat "js/scripts.js" }}
+
+{{ $scriptsLazy = $scriptsLazy | resources.Concat "js/scripts-lazy.js" }}
+
 {{ if hugo.IsProduction }}
   {{ $scripts = $scripts | minify | fingerprint }}
+  {{ $scriptsLazy = $scriptsLazy | minify | fingerprint }}
 {{ end }}
 
-
+{{/* scripts */}}
 <script
   crossorigin="anonymous"
   integrity="{{ $scripts.Data.Integrity }}"
   src="{{ $scripts.RelPermalink }}"></script>
 
+{{/* scripts lazy */}}
+<script
+  crossorigin="anonymous"
+  integrity="{{ $scriptsLazy.Data.Integrity }}"
+  src="{{ $scriptsLazy.RelPermalink }}"
+  defer></script>
+
 <!-- progressive web app -->
 {{ partialCached "pwa.html" . }}
 

layouts/partials/essentials/style.html

@@ -31,6 +31,7 @@
 
 <!-- plugins + stylesheet -->
 {{ $styles := slice }}
+{{ $stylesLazy := slice }}
 {{ range site.Params.plugins.css }}
   {{ if findRE "^http" .link }}
     <link
@@ -40,20 +41,40 @@
       href="{{ .link | relURL }}"
       {{ .attributes | safeHTMLAttr }} />
   {{ else }}
+    {{ if not .lazy }}
       {{ $styles = $styles | append (resources.Get .link) }}
+    {{ else }}
+      {{ $stylesLazy = $stylesLazy | append (resources.Get .link) }}
+    {{ end }}
   {{ end }}
 {{ end }}
-{{ $styles := $styles | append (resources.Get "scss/main.scss" | toCSS) }}
+
-{{ $styles := $styles | resources.Concat "css/style.css" }}
+{{/* main style */}}
+{{ $styles = $styles | append (resources.Get "scss/main.scss" | toCSS) }}
+{{ $styles = $styles | resources.Concat "css/style.css" }}
 {{ $styles = $styles | resources.PostCSS }}
+
+{{ $stylesLazy = $stylesLazy | resources.Concat "css/style-lazy.css" }}
+{{ $stylesLazy = $stylesLazy | resources.PostCSS }}
+
 {{ if hugo.IsProduction }}
   {{ $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . | minify | fingerprint | resources.PostProcess }}
+  {{ $stylesLazy = $stylesLazy | resources.ExecuteAsTemplate "css/style-lazy.css" . | minify | fingerprint | resources.PostProcess }}
 {{ else }}
   {{ $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . }}
+  {{ $stylesLazy = $stylesLazy | resources.ExecuteAsTemplate "css/style-lazy.css" . }}
 {{ end }}
 
-
+{{/* styles */}}
 <link
   href="{{ $styles.RelPermalink }}"
   integrity="{{ $styles.Data.Integrity }}"
   rel="stylesheet" />
+
+{{/* styles lazy */}}
+<link
+  rel="stylesheet"
+  href="{{ $stylesLazy.RelPermalink }}"
+  integrity="{{ $stylesLazy.Data.Integrity }}"
+  media="print"
+  onload="this.media='all'; this.onload=null;" />