Merge pull request #19 from Promptus-Imperii/refactor/optimizations

Various small optimizations based on Google Lighthouse
Promptus-Imperii · Feb 16, 2024 · ffbf0d6 · ffbf0d6
2 parents a7d40b5 + 9adc225
commit ffbf0d6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 34 deletions.
diff --git a/hugo.toml b/hugo.toml
@@ -119,6 +119,8 @@ notAlternative = true
 
 
 ############################# Plugins ##############################
+[[google_map]]
+enable = false
 
 # CSS Plugins
 [[params.plugins.css]]

diff --git a/themes/hugoplate/layouts/index.html b/themes/hugoplate/layouts/index.html
@@ -37,40 +37,25 @@ <h1>{{ $.Params.banner.title | markdownify }}</h1>
                 {{ $folder := (printf "%s%s" "assets/" .Params.banner.banner_images)}}
                 {{ if fileExists $folder }}
                   {{ $files := readDir $folder }}
-                  {{ range $files }}
-                    {{/*  resources.Get reads files from the assets folder on, so we don't prefix the assets folder here  */}}
-                    {{ $imagePath := printf "%s%s" $.Params.banner.banner_images .Name }}
-
-                    <div class="swiper-slide">
-                      {{ $image := resources.Get $imagePath }}
-                      {{ $image_sm := $image.Fit "510x360"}}
-                      {{ $image_md := $image.Fit "740x370"}}
-                      {{ $image_lg := $image.Fit "992x370"}}
-                      {{ $image_xl := $image.Fit "1250x370"}}
-
-                      {{/*  The style attribute makes sure that the alt text is hidden when the page is loading, but still remains visible for screen-readers  */}}
-                      <picture style="color: rgba(0, 0, 0, 0) !important;">
-                        <source 
-                          media="(max-width: 767px)"
-                          srcset="{{ $image_sm.RelPermalink }}">
-                        <source 
-                          media="(max-width: 1023px)"
-                          srcset="{{ $image_md.RelPermalink }}">
-                        <source 
-                          media="(max-width: 1280px)"
-                          srcset="{{ $image_lg.RelPermalink }}">
-                        <source 
-                          media="(min-width: 1280px)"
-                          srcset="{{ $image_xl.RelPermalink }}">
-                        <img
-                        src="{{ $image.RelPermalink }}"
-                        class="h-full w-full object-fit-cover" 
-                        alt="Een foto van de vereniging"
-                        loading="lazy">
-                      </picture>
-
-                    </div>
-                  {{ end }}
+                  {{ range $index, $file := $files }}
+                  {{ $imagePath := printf "%s%s" $.Params.banner.banner_images $file.Name }}
+
+                  <div class="swiper-slide">
+                    {{ $image := resources.Get $imagePath }}
+                    {{ $image_sm := $image.Fit "510x360 webp" }}
+                    {{ $image_md := $image.Fit "740x370 webp" }}
+                    {{ $image_lg := $image.Fit "992x370 webp" }}
+                    {{ $image_xl := $image.Fit "1250x370 webp" }}
+                    {{/*  The style attribute makes sure that the alt text is hidden when the page is loading, but still remains visible for screen-readers  */}}
+                    <picture style="color: rgba(0, 0, 0, 0) !important;">
+                      <source media="(max-width: 767px)" srcset="{{ $image_sm.RelPermalink }}">
+                      <source media="(max-width: 1023px)" srcset="{{ $image_md.RelPermalink }}">
+                      <source media="(max-width: 1280px)" srcset="{{ $image_lg.RelPermalink }}">
+                      <source media="(min-width: 1280px)" srcset="{{ $image_xl.RelPermalink }}">
+                      <img src="{{ $image.RelPermalink }}" class="h-full w-full object-fit-cover" alt="Een foto van de vereniging"{{ if ne $index 0 }} loading="lazy"{{ end }}>
+                    </picture>
+                  </div>
+                {{ end }}                
                 {{ else }}
                   {{ errorf "The folder specified for slideshow images does not exist:  %q" .Params.banner.banner_images}}
                 {{ end }}

diff --git a/themes/hugoplate/layouts/partials/essentials/script.html b/themes/hugoplate/layouts/partials/essentials/script.html
@@ -23,6 +23,7 @@
 <script
   crossorigin="anonymous"
   integrity="{{ $scripts.Data.Integrity }}"
+  defer
   src="{{ $scripts.RelPermalink }}"></script>
 
 <!-- progressive web app -->